TMDB API를 활용한 인기 영화 조회 - 개인 과제 프로젝트

📢 프로젝트 소개

• 프로젝트 명 : TMDB API를 활용한 인기 영화 조회 프로젝트
• 프로젝트 일정 : 2024.01.03 - 2024.01.08
• 깃 허브 링크 :  바로가기!
• 배포 링크 : 바로가기!

 

✏️ 프로젝트 설명

순수 바닐라 자바스크립트 + TMDB 오픈 API 를 활용하여 인기 영화 조회 및 검색 구현

 

💻 프로젝트 구현 기능

이번 과제는 필수 요구사항과 선택 요구사항이 있었다.

1. 필수 요구사항
   
   • 순수 바닐라 자바스크립트 사용하기
   • TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
   • 영화정보 리스트 UI 구현(필수 정보 : 제목, 내용 요약, 포스터 이미지 경로, 평점, 영화 id)
   • 영화 검색 UI 구현
2. 선택 요구사항
   • css - flex, grid 사용하기
   • 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치시키기
   • 대소문자 관계없이 검색 가능하게 하기
   • 키보드 enter키를 입력해도 검색버튼 클릭한 것과 동일하게 검색 실행시키기

 

🔥 배운 점 / 느낀 점

이번 프로젝트를 진행하면서 js 파일을 모듈로 분리하여 관리하는 방법에 대해 배우게 됐다.

이전에는 js 파일 하나를 만들어서 연결하거나  html 파일 하단에 script 에 넣어서 작업했는데

이번에는 모듈로 관련 기능끼리 묶어서 3개의 파일로 관리하게 됐다.

파일이 3개라서 관리할 파일이 많아보이지만 main과 search, movie 로 나눠서 기능의 흐름을 보기에는 이게 더 좋은 것 같다.

큰 규모의 프로젝트라는 생각이 들지 않아서 분리하여 작업하지 않았는데 개선하면서 반성하게 되었다.

 

그리고 이벤트 버블링, 이벤트 위임도 알게됐다.

처음에 구현한 코드는 영화 포스터 마다 addEventListener 가 추가될 수 있도록 하였는데,

코드를 개선하면서 영화 포스터를 감싸는 큰 영역 하나에 addEventListener 를 부여해서 핸들링하게 할 수 있었다.

하나하나에 부여하는건 메모리? 성능에도 좋지 않다고 한다.

이벤트 버블링/위임에 대해서 공부를 더 해서 잘 활용해야겠다.

 

html에서는 이전 게시물에 작성했던 form 태그와 button submit 부분이였다.

처음에 작성했던 코드와 같은 기능을 함에도 불구하고 개선한 코드가 더 간결하고 직관적이다.특히 form 태그는 해당 영역이 input 등으로 정보를 입력받을 수 있는 영역임을 알릴 수 있는 태그이기 때문에 div를 사용하는 것 보다 의미있는 태그를 사용하는 것이 중요한데 이 부분을 놓쳤다.html 도 잘 챙겨야겠다.

 

그리고 깃 커밋 메시지 관련 컨벤션 룰을 정해서 진행하고 있는데, 이전에 커밋했던 메시지가 다 컨벤션에 어긋나서 이전 커밋의 메시지를 수정하는 경험을 하게됐다.

git rebase 명령어를 활용했는데, rebase는 조심해야 한다고 들어서 실제 행동으로 옮기기전에 정말 많이 찾아보고 했었다. 

개인 프로젝트여서 다른 사람들에게 피해가 가거나 하는건 아니였지만 굉장히 걱정이 됐다.

dev 브랜치에서 진행했는데 다행히 잘 수정이 됐다.다음부터는 commit 은 신중하게 해야겠다고 느꼈다.

 

깃 메시지 수정

git rebase -i HEAD~14 (14부분에 수정하고 싶은 수를 적으면 된다)

내역이 나오면 pick 에서 reword로 변경 후 메시지를 수정한다.

git push --force 브랜치이름 <- 원격 저장소에 올라간 상황에 쓰는 방법이다.

 

❕ 아쉬운 점

선택 요구사항까지는 잘 마무리 했지만, 더 추가적인 기능을 넣지 못한점이 아쉽다.

디자인이 중요한 프로젝트가 아니였는데, 스스로 디자인 감각이 없다고 생각돼서 이 부분에 불필요하게 시간을 조금 더 투자했던 것 같다. 시간 관리를 좀 더 잘 해야겠다.