팀프로젝트 - 영화검색사이트 만들기

프로젝트 소개

1. 진행 기간: 2024.07.31 ~ 2024.08.06 (7일)

2. 인원: 5명

3. 개발 환경

• HTML5 / CSS / Vanilla JS
• Firebase (Auth, Firestore DB)
• TMDB API (영화 데이터 조회)

4. 깃허브

GitHub - spmrsong/movieDive

 

5. 팀 노션

16조_코드다이브 | Notion

 

+ 정리해서 팀원분들께 공유했던 기획 내용

 

 

 

6. 와이어프레임

Figma

 

 

구현 기능

1. TMDB 활용한 영화 데이터 fetch

 

2. 상세페이지, 검색 기능

- 검색어 값을 입력했는지 유효성 검사

- 최신작, 평점 높은순, 평점 낮은 순 정렬 가능 (기본 정렬 최신작)

 

3. 상세페이지 내 리뷰(댓글) 기능, 찜 기능

- 로그인 상태에서만 댓글 남길 수 있도록, 내 댓글에만 수정/삭제 버튼 보이도록 유효성 검사

- 로그인하지 않고 찜 버튼 누를 경우 유효성 검사

 

4. 회원가입, 로그인, 로그아웃

- Firebase auth 이용

 

5. 찜한 영화, 리뷰한 영화 확인할 수 있는 마이무비 페이지 (내 담당!)

- 로그인시 로컬스토리지에 저장해두었던 userID를 이용해 firestore의 유저 문서에 접근

- 데이터베이스에 저장돼있던 찜한 영화, 리뷰한 영화의 ID를 받아온 후, TMDB의 검색 기능을 이용해 영화 데이터를 받아옴

- 찜하거나 리뷰를 남겼을 때 firestore의 userID 문서에 업데이트

 

 

어려웠던 점 + 개선할 점

 

1. 로그인 상태가 변경될 때 헤더의 로그인, 회원가입 ↔ 로그아웃, 프로필 버튼 전환이 느림

- 로그인시 firebase에서 계정 정보를 받아 local storage에 저장하고 새로고침될 때 firebase가 아닌 local storage에서 로그인 정보를 확인해 인증에 걸리는 딜레이를 줄여서 해결

 

2. 영화 리뷰를 여러개 작성한 경우 하나만 삭제해도 마이무비의 리뷰한 영화에서 보이지 않음

- 리뷰에대한 정확한 기능 정의를 뒤늦게 했다.. 나는 사용자마다 영화당 하나의 리뷰만 남길 거라고 생각했는데 (별점 느낌) 리뷰를 담당하신 분은 여러개가 가능하게 구현해두셨다(댓글 느낌) 내가 먼저 기능을 만들고 리뷰가 나중에 구현돼서 리뷰 기능을 구현하다가 방향성을 맞추게 됐다

- 내가 더 안전한 방향으로 구현한 게 아닌 것 같고 (여러개 등록 가능한 경우의 로직은 하나만 등록 가능할 때도 가능, 반대는 불가) 조금 더 여유가 있는 것 같아서 리뷰는 여러개 가능하게 하는 방향으로 이야기했다

- 영화당 한번만 가능한 찜 기능과 달리 리뷰는 영화당 여러번 가능한 상황이므로 리뷰한 영화의 ID만 저장하던 배열에서 ID-리뷰수를 key-value쌍으로 관리할 수 있도록 객체로 저장 방식을 변경했다!

- 리뷰 수가 0이되면 리뷰를 지운 것으로 판단하여 firestore에서 삭제했다.

 

3. 비동기 메서드에서 예상한 방식으로 동작되지 않음

- 비동기 내에 forEach문으로 반복 동작을 처리하는 부분이 있었는데, 알고보니 async에서 await은 forEach 시작까지는 기다려주지만 forEach의 콜백함수가 모두 실행될때까지 기다려주지는 않는다고 한다

- forEach를 for-of문으로 변경해 해결했다!

 

4. 로그인 필요한 기능은 로그인을 해달라는 문구만 띄우는 것보다 로그인 창으로 이동할 것인지 확인하기 (튜터님 피드백)

 

 

팀원들과 함께한 KPT 회고

Keep

• Git 관련
  • PR할 때 적극적으로 같이 기능 테스트함
  • 커밋 컨벤션 자체를 처음 안 팀원들도 많았는데 잊지 않고 잘 적용함
• 처음 업무 배분할 때 경험해보지 못한 부분을 일부러 가져갔는데, 책임감있게 모르는 부분을 공부하고 공유함
  • 다양한 경험을 해볼 수 있었음
  • 덕분에 더 많은 것을 배울 수 있었음
• 정해진 시간에 진행상황을 공유하는 시간을 가진 것 (아침/저녁)
  • 긴 캠프 시간동안 루틴을 가질 수 있었음
• 문제가 생기거나 어려운 점이 있을 때 공유하면 바로바로 피드백이 오고 같이 고민한 점 (구현, 깃 관련 문제 포함)

 

Problem

• PR시 코드리뷰가 점점 흐지부지됨 (기능 테스트 위주)
• 초반에 진행상황 공유가 잘 되지 않음
• 로그인 인증 정보 사용, 리뷰한 영화 ID 사용 등 다른 사람의 코드를 이해해야하는 부분이 많아 개인 프로젝트보다 힘들었음
• 필수 구현 요소를 충분히 고려하지 못함 (리뷰에 로컬 스토리지 사용하지 않은 것)

 

Try

• PR, 코드리뷰 문화에대해 알아보기
• 진행 상황 공유 규칙 정하기
  • 처음부터 규칙 정해두기
  • 하루 일과 중 처음/중간/끝 시간을 정하기
• 다른 사람의 코드 이해
  • 코드리뷰를 했다면 더 수월했을 것 같다

 

 

마무리

팀 단위로 미니 프로젝트를 진행했지만, 본격적으로 하는 첫 프로젝트같아 걱정이 많이 됐었다. 특히 기획 회의를 할 때 팀원들 모두가 우리가 할 수 있는 것보다 많이 욕심낸 것 같기도하다는 이야기를 했었는데, 다른 특강이나 TIL 등을 동시에 챙기다보니 거의 일주일을 매일매일 2~4시간만 자면서 공부와 구현을 반복했다..ㅎㅎㅎㅎㅎ ㅠㅠ

 

나를 포함한 팀원분들이 모두 진행하면서 많이 힘들어했는데 회고 때 이야기가 나온 것처럼 모두가 같이 어려움을 공유하고 해결하고자 도운 것이 좋았고, PR할 때마다 기능을 간단하게라도 테스트를 진행하다보니 사용자 입장에서 있으면 좋겠다 싶은 기능, 유효성 검사나 생각하지 못한 예외처리를 하자고 그 때 그 때 제안되는 경우가 많았다. 그런데 이 부분도 적극적으로 수용하고 만들어서 처음 생각보다 더 완성도있는 프로젝트가 된 것 같다!!

 

발표회 때도 가장 많이 받은 피드백이 '이 부분까지 꼼꼼하게 처리했다니 잘했다' 라서 더 뿌듯하기도 했고 괜히 고생한게 아니네 싶어서 더 좋게 마무리할 수 있었다 ㅎㅎㅎ

 

이전 팀프로젝트를 진행한 후에 느꼈던 개선할 점들 중 사용할/사용하지 않을 라이브러리 정해두기 (Firebase Auth 사용, 부트스트랩 사용X 등), 내가 맡은 기능들에서 한 부분에 너무 시간을 소요하지 않고 잘 분배하기, pull 하면서 기능 테스트 간단하게라도 해보기, 정확하게 업무 배분하기 를 잘 적용했던 것 같아 팀의 목표뿐만 아니라 개인적으로 달성하고 싶었던 부분도 달성한 것 같다!! 아 그리고 깃도 이전보다 훨씬 익숙해진 것 같다!!

 

내일부터는 리액트 주차.. 개인 프로젝트때는 기획할 때 조금 더 욕심부리기를 꼭 유지하고싶다!