[JS][프로젝트] 🎬영화 검색 UI(8) - 프로젝트 회고

🍎 프로젝트 결과물

🔗링크: https://github.com/Eunyoung-Jo/movie_nonot

 

🍊 프로젝트 소개

• 팀원들과 함께 JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다.
• 기존의 개인 과제에서 수행한 내용의 심화 버전으로 진행합니다.
• 바닐라 자바스크립트를 이용하여 온전한 결과물을 제작합니다.

✔️ 프로젝트 요구사항

(1) 필수요구사항

1. TMDB Open API 이용
2. 영화정보 상세 페이지 구현
   • 기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 해당 item 상세 페이지로 이동하도록 구현합니다.
   • 상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성합니다.
3. 상세 페이지 영화 리뷰 작성 기능 구현
   • 상세 페이지에서 해당 영화에 대한 의견을 작성할 수 있는 UI를 구현합니다.
   • 작성자, 리뷰, 비밀번호를 입력하도록 구현합니다.
   • 작성한 정보는 브라우저의 localStorage에 적재하도록 합니다.
4. github PR을 통한 협업
5. UX를 고려한 validation check
   • 영화 검색 시 → 빈 문자열 검색 시 alert 메세지
   • 댓글 작성 시 → validation rules에 맞지 않는 리뷰 작성 시 alert 메세지
6. JavaScript 문법 요소를 이용하여 구현

   (2) 선택요구사항

• CSS

  • flex 사용하기
  • grid 사용하기
  • 반응형 UI 사용하기

• 상세 페이지 리뷰 수정 및 삭제 기능 구현

• 메인 페이지에 조건에 맞는 카드 리스트 정렬 기능 구현 (이름순, 별점 높은 순)

   

🍋 Stacks

 

🍈 주요 기능

• TMDB 인기 영화 콜렉션 조회
• 영화 제목순, 별점 높은 순으로 영화 리스트 조회 가능
• 영화 제목을 통한 영화 검색 가능
• 영화 카드 클릭시 해당 영화 상세 정보 조회
• 영화 상세 페이지에서 해당 영화에 대한 댓글 작성, 수정, 삭제 가능

 

🍇 회고

👍 Keep

• 일주일 동안 꽤나 집중도 있게 프로젝트를 진행했다.
• 기간 안에 내가 맡은 일을 잘 해냈으며, 할 일이 다 끝나고 시간이 남았을 때 다른분들의 작업을 도와주거나 추가 구현사항을 진행하는 등 프로젝트의 완성도를 위해 노력했다.
• 브랜치를 통한 협업에 익숙해졌고, 깃허브 사용에 능숙해졌다.
• 리드미 작성 실력을 향상시켰다.
• 모든 페이지에서 같은 기능을 하는 헤더 컴포넌트를 만들어 여러 코드에서 재사용 가능한 custom element 생성하였다. 이 점은 튜터님께 피드백 받을 때 칭찬 받았다.

🫵 Problem

• 변수명 설정, 커밋 컨벤션 등의 룰을 구체적으로 정하지 않아 통일적인 협업을 하지 못했다.
• 기본 과제에서 더 발전된 구현 요소를 추가할 생각을 하지 못했다. 이는 우리 팀의 전반적인 개발 능력이 아직 다른 팀에 비해 부족했기 때문도 있다. 그래도 더 나은 결과물을 위해 고민하는 시간이 적었던 것이 아쉽다.
• TMDB API를 통해 다양한 데이터를 불러올 수 있는데, 너무 한정적인 데이터만 사용했다.

✍️ Try

• 다음 협업에서는 프로젝트 시작 전 코드 규칙이나 커밋 규칙을 미리 잘 세워보도록 해야겠다.
• 과제의 내용을 전부 수행하는 것은 물론 항상 발전된 결과물을 내기 위해 욕심을 부리는 사람이 되어야겠다. 스스로의 아이디어가 부족할 시 좋은 레퍼런스가 되는 사이트를 참고하는 것도 방법이다.
• 콘솔 로그나 임시로 주석 처리 해놓은 것들은 최종 배포 전에 무조건 다 깔끔하게 지울 것!
• 시멘틱한 코드를 짜도록 더 노력해야겠다.
• 항상 사용자의 UX를 고려하며 구현하는 습관을 길러야겠다.
• 웹 프로젝트 같은 경우는 항상 해상도를 고려해야 한다.