코노방구미와

2023-06-02

:book: Konobangumiwa

github: https://github.com/min-96/_konobangumiwa
site: http://konobangumiwa.wiki

:one: 시작 전

리액트 프로젝트가 필요했던것은 아니지만, 인생을 길게보면 정말 짧은 시간이 될것이라고 생각해서 진행하기로 했다.
이 프로젝트는 리액트의 두번째 프로젝트이기 때문에 이전 프로젝트에서 아쉬웠던 점들을 보완하고 모르는부분을 추가로 공부해보고 싶었다.
간단하게 소개하면 애니메이션 계열의 왓차피디아이다.

이전 프로젝트보다 보완할점

react router : 이전 프로젝트에서는 민규님이 프로젝트의 초기설정을 진행하셨기 때문에 라우터를 써본적이 없었다.
Atomic 패턴 : 패턴이 Organism, Molecule 두종류로만 구현했었기 때문에 제대로 샤용하지 못했다고 생각했다.
CSS 파일 분리 : tailwind를 사용해서 className이 길었고, 중복되는 className 도 있었지만 각각 적어놔서 보기 어려웠다.
컴포넌트 재활용 : 분류만 Molecule 이였고, Atom 단위의 컴포넌트는 없었기 때문에 재활용이 거의 없다시피 했다.
인프라 환경설정 : 42에서 거의 마지막에 배운게 도커 컴포즈인데, 활용해본적이 없었다.
깃 협업 방식 : 이전 프로젝트에서 아쉽진 않았는데, 왜 그런 방식으로 깃을 사용했는지도 궁금하고, 좀더 깃에 대한 이해를 하고싶었다.

:two: 프로젝트 소개

제목에서 눈치챘을지도 모르지만, 이 프로젝트는 십덕들을 위한 애니메이션 프로젝트이다.
애니메이션 시작 전에 코노방구미와 고란노스폰산노데 오쿠리시마스? 라고 나오는 음성 중 코노방구미와를 따와서 이름을 지었다.

팀원소개

:hamburger: minyong(28 여, 십덕, 개발자, 미필): https://minyong.info

기술스택

기능

애니메이션 리스트
교집합 장르검색
애니메이션 평가 및 코멘트작성 + 위시리스트
엘라스틱서치를 이용한 검색기능
유저별 평가함 리스트, 위시리스트, 취향분석
구글 OAuth 로그인 기능

프로젝트 기간

대만 여행갔다가 돌아와서 하루 쉬고 시작했다.
첫번째 커밋은 5월 11일이며 AWS로 배포는 6월 4일 완료됐다.
이미 리액트를 알고있는 상황이라 생각보다 짧은 3주정도의 시간이 걸렸는데, 완성도가 높게 나온것 같아 만족스럽다.

개발 및 API 연결(2.5w) : 5월 11일 ~ 5월 28일
버그 수정(0.5w) : 5월 26일 ~ 5월 29일
인프라 구축(1d) : 5월 19일
AWS 배포(1d) : 6월 4일

:three: 완성품 및 후기

홈

처음 이 프로젝트를 맡게됐을땐 백엔드 대충 카드 형식으로 데이터를 fetch해와서 API의 표시 정도만 진행하려고 생각했었다.

프론트엔드 개발자가 되고싶은 마음이 눈꼽만큼도 없었기 때문이였는데 마음을 고쳐먹은 계기는 내비게이션 바의 코노방구미와 라는 로고를 찾고나서부터였다.

text to svg에서 일본어가 가능한 아무 폰트나 찾다가 발견된게 지금의 폰트이다. 조금 수정했더니 진짜 일본틱해서 선택하게 됐다.

디테일

원래라면 하지 않았을 기능이지만, 애정이 생겨 만들게된 기능이 scrollTop일때 내비게이션을 투명화 하는것이다.

디테일 페이지만 내비게이션 공간의 패딩을 없애고 scroll 위치에따라 transparent 기능을 넣어 구현했다.

의외로 어려웠던게 애니메이션사진 위치 조절과 템플릿을 재활용하면서 배경이미지와 설명이 담긴 카드의 위치가 제 자리를 찾는일이였다. 구현하고나니 꽤 그럴듯해져서 너무 만족스러운 부분중 하나이다.

선호태그

왓차피디아에는 사용자가 선호하는 태그를 랜덤한 위치에 뿌려주는 기능이 있다.
팀장님의 요청으로 이 기능을 구현하게 됐는데, 그냥 랜덤한 위치에 뿌리자니 서로 겹쳐지는 부분이 생겼다.

이 부분을 어떻게 해결할지 고민하다가 게임 프로그래밍에서 배웠던 충돌감지가 떠올라 비슷하게 구현하게 됐다.

폰트사이즈와 글자수를 기준으로 대략적인 충돌 박스를 계산하고 다른 글자들과 충돌하는 경우 새로운 랜덤좌표에 글자를 표시하도록 했다.
적당히 크기를 조절하니 10개의 태그를 표시하는데 10~20번정도의 충돌이 발생하는것 같았다.

만들고나서 뿌듯했던 기능 2번이다.

장르검색

이 기능은 개인적으로 만들어보고싶었다. 전체 애니메이션이 버튼을 누를때마다 해당하는 태그에 맞게 검색되는 기능이다.

만들면서 꽤 재밌었는데, 이전엔 스크롤만 가지고 페이징 처리를 했던 내가 옵저버라는 기능을 이용해서 페이징 처리를 하게됐다.

태그도 누를때마다 검색되고 다시 그 태그를 누르면 태그가 지워지기도 한다.
태그를 랜덤한 색으로 구현하려 했지만, 그렇게되면 같은 태그지만 다시 눌렀을땐 다른색이 되어 정신없어보였다.
태그이름을 기준으로 5가지 색중 하나를 선택하도록 구현했다.

제목검색

엘라스틱서치를 사용해서 구현한 제목검색 기능이다. 엘라스틱서치가 뭐하는 친구인지, 어떻게 동작하는지 새로운 기술을 알게됐던 중요한 기능이라고 생각한다.

:four: 진짜후기

생각보다 개발하면서 몇번이나 싸우게 됐고 프로젝트 자체가 엎어질뻔 하기도 했지만, 결국 이렇게 완성해낸게 다행이면서 좀더 서로를 이해할 수 있게된것같아 만족스러운 프로젝트가 됐다.

기술적인 부분에서도 docker-compose를 이용해서 인프라 구축도 한번 해볼 수 있었고, elasticsearch를 공부해볼 기회도 생겼으며, AWS에 배포하는 과정에서도 이것저것 만져서 9 to 21로 서버를 작동하게 스케줄 처리를 하는 부분에서도 많은걸 배운것같다.