React Movie App 구현하기 🎞

• 영화를 검색하고 즐겨찾기로 등록할 수 있는 React Movie App
• 영어로만 검색이 가능합니다
  
  

배포 링크 :)

yoon-movie-app

기술 스택

Rect, TypeScript, Scss, Recoil

1. 기획✏

1.1 ) 검색 페이지

• 상단에 검색 Input box 가 있으며 해당 키워드를 검색하면 하단에 리스트가 나타납니다.
• 검색결과 목록을 최하단으로 내렸을 시 추가적인 데이터를 불러와 리스트에 추가되어 나타납니다. (Infinite scroll)
• 리스트 목록에는 영화의 이미지, 제목, 연도, 타입 그리고 즐겨찾기 여부를 확인할 수 있는 아이콘이 있습니다.
• 리스트 목록 중 원하는 것을 클릭하면 모달 이 나타나며, 해당 모달에는 즐겨찾기를 추가/삭제 할 수 있는 버튼과 모달을 닫는 취소 버튼이 있습니다.
• 이미 즐겨찾기에 등록되어 있는 영화라면 모달에 즐겨찾기 취소 버튼이 있으며, 즐겨찾기에 등록 되어있지 않은 영화라면 즐겨찾기 버튼 이 있습니다.

1.2 ) 즐겨찾기 페이지

• 즐겨찾기 데이터 는 localStorage 에 저장되며 해당 데이터를 불러와 목록을 나타냅니다.
• 리스트 목록 중 원하는 것을 클릭하면 모달이 나타나며 즐겨찾기를 삭제할 수 있는 버튼 과 모달을 닫을 수 있는 버튼 을 나타냅니다.
• 즐겨찾기 제거 를 누르는 순간 바로 목록에서 지워 집니다.

2. UI 🎨

• Navigation 은 하단에 있으며 메뉴는 검색 과 즐겨찾기 두 가지입니다.
  
• MovieApp의 로고 색상은 rgb(233 62 61 / 85%)로 레드계열으로 나타내었습니다.
• 유저가 영화 정보를 얻는 것에 더 집중할 수 있는 UI를 만들기 위해 깔끔한 화이트 계열 로 나타내었습니다.
• 영화 정보의 타입은 movie, series, game이 있으며, 타입 별로 색상을 구별지어 나타내었습니다.
• 영화 목록 중 하나를 마우스 hover하였을 시 해당 영화를 선택한 것을 나타내기 위해 색상을 변화하여 나타내었습니다.
• 데이터를 불러올 때 나타내는 로딩 애니메이션을 추가하였습니다.

3. 구현💻

• 데이터의 상태관리는 Recoil을 이용하여 나타내었습니다.

3-1) 검색 페이지

• 검색은 form 태그를 사용하여 나타내었으며, 검색창에 키워드를 입력한뒤 submit이 되면 data를 불러오는 api를 호출하도록 하였습니다.
• 첫 검색어를 감지하기 위해 useUpdateEffect를 이용하여 api를 호출하도록 하였으며 params 값인 page의 default 값은 1로 지정하였습니다.
• 검색목록 최하단에 빈 div를 두고 useInview hook을 이용하여 해당 div가 viewPort에 보이면 다음 페이지의 api를 불러오도록 구현하였습니다.
• page값은 api요청이 되면 이전 값에서 1을 더하도록 하였습니다.
• totalPage값을 을 이용하여 조건문을 작성하여 더 불러 올 수 있는 데이터가 없다면 api를 요청하지 않도록 구현하였습니다.
• 데이터를 불러올 때는 isLoading state값을 이용하여 로딩 애니메이션을 나타내도록 하였습니다.
• 검색 목록 중 특정 영화를 클릭하면 모달이 나타나며, localStorage에 있는 즐겨찾기 데이터 를 filter 와 includes() 를 이용하여, 있다면 즐겨찾기 취소가 없다면 즐겨찾기 라는 모달을 나타나도록 하였습니다.

3-2) 즐겨찾기 페이지

• recoil-persist 를 이용하여 새로고침하여도 데이터가 localStorage 에 저장되도록 하였으며 해당 데이터를 불러와 map()을 이용하여 즐겨찾기 목록을 나타내었습니다.
• 즐겨찾기 목록 중 특정 영화를 클릭하면 모달이 나타나고, 즐겨찾기 취소 버튼을 누르면 filter() 를 이용하여 클릭한 영화의 key값과 일치하지 않는 데이터로 새롭게 filter하도록 구현하였습니다.

4. 결과물

4-1) 검색 페이지

2.mp4

4-2) 즐겨찾기 페이지

default.mp4

5. 마무리하며 느낀점

해당 Movie App을 구현하면서 recoil을 처음 사용해 보았습니다. Vue.js를 공부하며 사용할 당시 vuex를 사용해 보았기에 걱정했던 것보단 쉽게 이용하여 데이터를 관리할 수 있었으며 React에 좀 더 흥미가 생겼습니다. 디자인부터 구현까지 해보면서 어느 하나 놓치고 싶지 않았고, 더 열심히 하고 싶어 밤을 새는 일도 많았습니다. 하지만 힘든 것보다 그만큼 더 공부를 하며 지식을 더 채워나갈 수 있다는 것에 좋았습니다. 무한 스크롤( Infinite Scroll )도 해보면서 어떻게 해야 구현이 되는지 알게 되었고 가지고 있던 궁금증도 풀 수 있었던 좋은 시간이었습니다. 열심히 과제를 임하였습니다. 해당 과제를 참가할 수 있게 해주어서 감사합니다. 🙂