[본 캠프 18일차] 팀 프로젝트 끝

팀 프로젝트가 끝났다. 얼떨결에 팀장이 되서 안뒤처지려고 열심히 해보려고 했는데 나댄거 아닌가 모르겠다.

 

어쨌든 오늘 발표한 내용들 정리해봤다.

 

● 메인페이지 (배너, 영화 정렬)

 

 

• 상세페이지 (상세 정보, 리뷰 작성) 

  

 

● 헤더 (계정인증 상태에 따라 로그인/회원가입 -> 로그아웃/프로필(마이무비 이동) 변경) 

 

 

● 마이페이지 (찜한 영화, 리뷰한 영화 확인) 

필수 구현 사항

 

1. TMDB API 사용
2. 영화 상세 페이지 구현
3. 상세 페이지 리뷰 작성기능 구현
4. github PR 사용한 협업
5. UX 고려 validation check (로그인하지않고 찜, 리뷰/내용입력하지 않고 검색, 리뷰/등록된 계정으로 가입/존재하지 않는 계정으로 로그인)
6. JavaScript 문법 요소 사용 (const, let만 사용/연산자/화살표 함수/배열메서드/DOM 제어/module 사용)

도전 과제

 

1. flex 이용하기
2. 상세페이지 리뷰 수정 및 삭제 기능
3. 메인페이지 카드 정렬 기준 선택 기능
4. 회원가입, 로그인 (firebase auth 이용)
5. 영화 찜하기 (찜한 영화, 리뷰한 영화 마이무비에서 확인 가능)

트러블슈팅

✔︎ 로그인 상태가 변경될 때 헤더의 로그인, 회원가입/로그아웃, 프로필 버튼 변경이 느림

• 로그인시 firebase에서 계정 정보를 받아 local storage에 저장하고, 로그인 상태가 변경되며 새로고침될 때 firebase가 아닌 local storage에서 값을 받아와 인증 딜레이를 줄임

 

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

• 영화당 한번만 가능한 '찜'기능과 달리 리뷰는 영화당 여러번 가능한 상황이므로 리뷰한 영화의 ID를 저장하는 방식을 배열에서 객체로 변경
• 영화ID - 리뷰 수를 key-value 쌍으로 관리하고, 리뷰수가 0이되면 리뷰를 모두 지운 것으로 판단하여 firestore에서 삭제

✔︎ 리뷰 기능을 구현하며 유저의 이메일 정보를 받아와 동작, 로그인하지 않았을 때 동작하지 않도록 여러 상황을 고려해야 하는 것

• 기능을 작은 단위로 쪼개 구현 후 확인을 반복하며 해결
  
  

✔︎ 영화 정렬 기준으로 now playing을 선택했을 때 발매일 기준 정렬이 잘 되지 않음

• 발매일 정보(문자열) 자체로 비교하는 방식에서 Date 객체 사용해 비교 및 정렬
  
  

✔︎ Git, API 사용 미숙

• 팀원들간 소통과 반복 사용으로 해소하고자 함

 

발표하느라 너무 떨어가지고 지금도 정신 나가있는데.. 소감으로는 생각보다 시간이 짧았고, 커뮤니케이션이 중요하다고 느꼈으며, 과한 욕심 부리지말고 필수구현사항만 잘 지키면서 해야겠다는 생각이 많이 들었습니다