🔥🐱 meerkats 구경하러 가기 : https://www.meerkats.monster 🔥🐱
모각코(꾸멍)팀이랑 meerkats 프로젝트를 완료했다~!
여러번의 아이디어 회의를 거친 후 영화예고편을 보고 영화에 대해 소통할 수 있는 장소를 제공할 수 있는 웹서비스를 만들기로 했다.
🙏 영화관련 웹서비스를 만들게 된 이유
우리가 생각했을 때 이미 개봉된 영화에 대해서는 많은 정보와 교류가 있지만 개봉 예정작에 대해서 사용자들끼리 정보를 공유하고 같이 설레는 마음으로 개봉을 기다릴 수 있는 장소는 부족하다고 생다. 그 이유는 아래와 같다
- 정보의 분산 : 현재 영화 정보는 인터넷을 통해 어디서든지 얻을 수 있지만, 여러 사이트와 플랫폼에 분산되어 있다. 사용자들은 원하는 정보를 찾기 위해 여러 사이트를 돌아다니고, 시간과 노력을 투자해야 한다.
- 개인적인 영화 리뷰 공유의 어려움 : 개인의 영화 관람 경험을 공유하고자 할 때도 블로그나 소셜 미디어 등 다양한 플랫폼을 사용해야 한다. 이로 인해 영화 관련 리뷰가 분산되고, 특정 플랫폼에서만 유명한 리뷰어들의 의견이 독점될 수 있다.
따라서 우리는 사람들이 모여 영화에 대한 의견을 나누고, 정보와 리뷰를 한 곳에서 쉽게 접할 수 있는 공간을 제공하여 위와 같은 문제점을 해결하고자 했다는 것!
결과적으로 이를 통해 사용자들은 영화에 대한 의견을 공유하고 다양한 정보를 손쉽게 얻을 수 있게 된다! 🤩
💡 meerkats의 핵심 기능
- 채팅 기능 : 공개 예정인 영화에 대해 채팅할 수 있는 기능을 제공한다. 사용자들은 영화 예고편을 보고 미리 기대감을 공유하며, 영화에 대한 이야기를 나눌 수 있다.
- 블로그 글 등록 기능 :자신의 영화 관련 경험, 리뷰, 분석 등을 블로그 글로 작성할 수 있습니다. 이를 통해 사용자들은 자신만의 영화 리뷰를 작성하고 공유할 수 있다.
- 커뮤니티 기능 : 블로그 내에서는 영화 정보를 공유하고 의견을 나눌 수 있는 커뮤니티 기능을 제공한다. 영화에 대한 소식, 개봉 정보, 출연 배우 정보 등을 공유할 수 있다. 이를 통해 사용자들은 영화에 대한 다양한 정보를 한 곳에서 확인하고 자유롭게 의견을 나눌 수 있다.
🔥 기획 과정
❶ 타입스크립트 사용
이번 프로젝트에서는 타입스크립트를 사용해봤다. 사용한 대표적인 이유는 두가지인데
- 첫번째는 더 나은 코드 작성을 위해서이다. 그동안 프로젝트를 할때 짧은 기간 안에 프로젝트를 완성해야 했기 때문에 기능 구현이 우선이라 코드의 퀄리티는 신경쓰지 못했던 점이 아쉬웠다. 근데 타입스크립트는 타입을 엄격히 검사해주기때문에 좀 더 나은 코드를 작성할 수 있을 것 같았다.
- 두번째는 친절한 에러메시지때문이다. 인턴십에서 타입스크립트를 사용해봤는데 기존 자바스크립트보다 에러메세지가 자세하고 친절하게 나오는 점이 좋았다. 그래서 첫번째 이유로 타입스크립트를 사용해보려고 했기때문에 에러메세지가 친절하다면 좀 더 오류를 빨리 해결할 수 있을 것 같았다!
❷ Recoil 사용
이번 프로젝트에서 상태관리를 할지 말지 고민을 꽤 했다. 프로젝트의 크기가 크지 않다면 굳이 사용안해도 된다는 의견도 있어서 처음에는 사용하지 않기로 했다가 좋아요/스크랩 기능때문에 바로 recoil을 도입했다. (좋아요/스크랩에서만 사용한건 아니고 나중에 유용하게 다른 state들도 관리했다!)
그리고 상태관리의 대표인 redux를 사용할지 recoil을 사용할지 고민도 많이 했는데, redux는 검증된 라이브러리인 반면에 작성해야 하는? 코드가 많았고 그에 비해 recoil은 보다 쉽게 이해하고 사용할 수 있었다.
결론적으로 redux가 좀 더 안전하고 신뢰성이 있었지만 작은 부분을 수정해도 작성해야 하는 보일러플레이트 코드가 많았기때문에 우리 프로젝트의 사이즈라면 recoil을 사용해도 된다라는 의견으로 recoil을 사용하게 됐다.
❸ 요구사항 정의서 작성
프론트엔드와 백엔드의 소통을 정확하게 하기 위해서 요구사항 정의서를 문서화 시켰다.
- 어떤 페이지가 필요한지 정하고, 우선순위를 정해 mvp기능 먼저 구현할 수 있도록 했다.
- 각 페이지마다 어떤 데이터가 필요한지 구분하고, 필수데이터와 선택데이터를 나눠서 정리했다.
요구사항 정의서는 프론트엔드와 백엔드 모두 기획 단계에서 만족했던 문서였다! 이 전 프로젝트때는 문서화하지 않아서 어떤데이터가 필요한지 까먹고 나중에 수습했던 경우도 있었는데 😅 이번에는 정확히 커뮤니케이션 할 수 있어서 너무 좋았던 것! 👍
❹ FE Convention
프론트엔드 컨벤션을 만들어 초기셋팅을 완료했다.
useAxios의 사용법 git사용법 스타일링 모두 기획 단계에서 정해 공통적으로 유용하게 쓸 수 있었다.
❺ Git
git은 rebase를 사용해 하나의 브랜치에 한개의 커밋만 남길 수 있도록 했다.
그리고 main,dev,release 브랜치로 나눠서 각 기능별로 개발을 할 수 있도록 했다.
- main 브랜치 : 주요 기능 개발이 완료되고 품질 검증을 거친 코드들이 있고, 해당 브랜치를 통해 배포를 완료했다.
- dev 브랜치 : 각 개발 작업을 통합하고, 버그를 수정하고, 코드 리뷰를 수행하는 작업을 했다.
- release 브랜치 : dev 브랜치에서 개발된 기능을 테스트하고 검증하는 역할을 했다.
⭐️ git.. 너무 헷갈리는거 아닙니까
부끄러운 얘기지만 이번 프로젝트에서는 git rebase를 사용하는 과정에서 이해를 제대로 못해 실수를 많이 했다.
예를 들어 dev 브랜치가 아닌 main 브랜치에 push를 했다던가.. 커밋 메시지를 여러 개 작성했다던가.. 이유를 알 수 없는 오류 등등...
결국에는 계속해서 오류가 발생해서 혼자 해결할 수 없는 상태가 됐다. 그래서 앙두와 러윤에게 도움을 요청했는데 다들 같이 해결해주려고 노력해주고 괜찮다고 격려해줘서 너무 너무 미안하고 고마웠다 🥹
마지막 해결법으로 새로운 git repo를 만들고 git rebase 방법과 컨벤션에 대해 배워서 다시 차근차근 git에 업로드를 완료했다.
앙두 러윤 너무 감사해요..💖
마지막
이번 프로젝트를 하면서 다들 타입스크립트같은 처음 써보는 기술들 적용해보면서 힘들었을텐데 으쌰으쌰 프로젝트 잘 진행한거 같아서 너무 뿌듯하다.
또 useAxios 훅도 만들어서 사용해보고 여러 피드백 받으면서 useAxios 코드 지속적으로 개선 해본 경험도 많은 도움이 됐다.
만약에 또 프로젝트를 할 수 있다면 확장성있는 custom hook을 많이 만들어서 사용해보고 싶다.
저희 맨날 밤 10시 넘어서 가고 고생 많이 했습니닷... 다음 배포데이에는 반응형까지 완벽하게 하기가 목표..⭐️
🖥️ 개발 내용
👉 자세한 개발 내용은 meetkats 깃허브 확인해주세요
https://github.com/mgkkm/meerkats-frontend
