🎯졸프일지를 남기게 된 계기
현재 컴공생 막학년이라 졸업프로젝트를 진행하고 있다. 지금까지 많은 시간을 들여 어느정도 개발이 진행되었다고 생각했는데, 치명적인 이슈를 발견하면서 거의 처음부터 다시 시작해야하는 상황에 부딪히게 되었다.
지금까지 팀원들과 함께 고생한 노력들을 남기지 않고 달려온 것이 아쉽고 혹시나 또 마주하게 될 이슈들에 대비해 졸프일지를 작성해야겠다고 다짐하게 되었다.
🤦🏻♀️오늘(지금까지) 마주한 이슈
우리의 프로젝트는 프론트는 React, 서버는 Node, DB는 MySQL을 이용해 프로젝트를 진행하고 있다. Django Framework를 쓸까 생각했지만,
React를 사용해 SSR을 통해 빠르게 View를 보여주고, 다양한 라이브러리를 npm으로 설치하여 사용 가능하고, 다른 프로젝트에서 React를 사용해본 경험상 컴포넌트를 기반으로 한 개발이 편리하다고 생각했기 때문에 React를 선택하게 되었다.
우리가 사용할 라이브러리들도 js기반이 많았기 때문에 당연히 호환이 잘 될 것이라는 생각도 들었다.
내가 구현한 부분은 p5를 이용해 canvas를 만들고, ml5의 doodlnet을 이용해 이미지를 그리면, quickdraw dataset을 사용해 키워드를 추출하는 부분이었다.
React에 맞게 코드를 변경하면서, useState와 같은 Hook을 사용할 수 없는 첫 번째 이슈에 부딪히게 되었다. 그림을 통해 받은 키워드를 다른 컴포넌트들에게 전달해야 했기 때문에 Recoil이나 Redux를 이용해 전역적으로 상태관리를 할 계획이었는데, p5와 함께 사용이 불가능했다.
따라서 데이터만을 받는 js파일을 따로 생성한 뒤 get, set함수를 만들어 다른 컴포넌트들이 이를 불러오는 방식으로 키워드를 전달하는 것 까지 구현하였고,
전달받은 키워드를 Flask 서버로 돌아가는 GPT3에 넣어주어 작사가 되도록 하였다.
하지만, 핵심 기능인 작곡 부분에 쓰이는 Magenta라이브러리가 ml5와 함께 돌아가지 않는 이슈가 있었다. p5의 무한 draw때문이가 싶어 noLoop()로 멈춰보기도 했지만, 팀원 중 한 친구가 ml5를 아예 uninstall 했을 때 작동된다고 말해주어 npm으로 함께 설치되면 충돌이 일어난다고 판단하였다.
🏃🏻♀️이슈를 해결하기 위한 노력
어쩔 수없이 기존에 예시로 나와있는 방식대로 CDN을 불러와 라이브러리를 사용할 수밖에 없었고, Django Framework를 이용해 테스트 해보니 각각의 페이지에서 잘 돌아가는 것을 확인하였다.
Node와 MySQL을 연결하여 그린 그림을 저장하고 불러오는 것 까지 구현하였는데 사용하지 못하게 되어 너무 아쉽지만, 많은 시행착오를 겪었다는 것은 나를 포함한 팀원들 모두 알고 있기 때문에 앞으로도 좀 더 힘내서 졸업프로젝트를 진행하고자 한다.
📚앞으로 공부할 것들
- Django 복습하기
- Three.js 파헤치기
