Universe 영화 앱

Hyun·2024년 9월 8일
project

Project

목록 보기
4/4
post-thumbnail

TMDB Api

TMDB API: https://developer.themoviedb.org/reference/intro/getting-started

영화, 드라마 등의 정보를 무료로 가져올 수 있는 오픈 API

이번에는 이 api를 이용해서 넷플릭스와 비슷하지만 컨텐츠 정보만 제공하는 앱을 만들어봤다.

기술 스택

React, React-bootstrap, React-query, React-multi-carousel

?? React Query를 사용한 이유

React-Query란?
서버 상태 관리에 중점을 둔 라이브러리 즉, 서버에서 가져온 데이터를 캐싱하고, 페칭하며, 동기화하는 일을 효과적으로 처리

React-Query의 장점

  • React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다.
  • 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있습니다.
  • 더 나아가 React Query에서 제공하는 캐싱, Window Focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업 없이 “핵심 로직”에 집중할 수 있습니다.

React-query의 장점 출처: https://tech.kakaopay.com/post/react-query-1/

위의 장점을 살펴보면 우선, 데이터를 불러올 때 항상 장황한 코드가 불편했다.

	const data = fetch(url);
	const response = await data.json();

이런 데이터 불러오기를 매번 작성해야 하는것이 불편할 뿐더러, 코드가 쓸데없이 장황해져 가독성이 나빴다.

1.데이터를 불러오고 useEffect를 이용해서 데이터가 매번 불러와지는 것을 막아야했는데, react-query 내에는 캐싱 및 자동 동기화 등의 방법으로 코드의 길이를 줄여줄 뿐더러, 다른 로직에 좀 더 신경쓰게 해줬다.

  1. 기존에는 redux로 전역관리를 하고 위에서 말한 데이터 처리들을 할 수 있었는데, redux는 초기 설정이 번거롭다는 단점이 있었다. 하지만 react-query의 경우 초기 셋팅이 간단해서 라이브러리만 설치하면 거의 바로 사용할 수 있다는 것이 편했다.

3. react-query에 익숙해지기 위해서

프로젝트 계획

  1. Home page
  2. Movie Page
  3. Tv series Page
  4. Wish list
  5. Search 기능 구현
  6. Movie, Series 정렬
  7. 장르별로 정렬
  8. 화면 반응형 구현

  • Home page : 인기 있는 영화, 평점이 높은 영화, 예정 영화 3가지를 보여주기
    이때, react-multi-carousel 라이브러리를 사용해서 영화들을 슬라이더 형식으로 보여주기

    react-multi-carousel: https://github.com/YIZHUANG/react-multi-carousel

  • Movie Page, Tv Series Page : react-query를 이용해 데이터를 불러오기

  • Wish List Page: Redux를 이용해 데이터를 store에 저장하고 필요한 컴포넌트에서 불러서 쓰기

  • Search 기능: react-router-dom에 있는 훅 중에 하나인 useSearchParam을 이용했다.
    (url에 ?뒤에 param을 붙혀서 api에 요청)

  • 정렬 기능: 인기순, 최신순, 평점순 으로 정렬 => javascript안에 있는 sort 함수로 구현

  • !!장르별 정렬 기능
    장르별로 정렬하는 부분이 생각보다 복잡했다.

    tmdb api에서는 컨텐츠의 장르 데이터를 id번호로 불러온다. 그래서 장르 아이디에 해당하는 장르가 저장되어 있는 객체를 다시 불러와 컨텐츠의 id번호와 매칭시켜줘야 한다.

즉 정리하자면, 

1. tmdb api에서 컨텐츠 데이터 속 장르id 가져오기
2. tmdb api에서 movie GenreList를 불러오기
3. 컨텐츠 데이터 속에 있는 장르id를 2번에서 가져온 데이터와 매칭 시켜서 반환하기

데이터를 매칭시에는 find함수를 사용해서 매칭시켜줬다.

프로젝트 구현 상황

Demo : https://univermovie.netlify.app
https://univermovie.netlify.app

github : https://github.com/Hyun198/Universe-MovieApp

프로젝트를 통해 배운점

아직 redux, react-query의 사용법은 익히는 중이다. 특히 redux의 같은 경우 최신 toolkit을 이용해서 좀 더 직관적으로 이해를 해보고 싶고, 초반 설정을 문서를 보지 않고도 할 수 있을 정도로 익숙해지고 싶다.

또한 redux나 react-query의 차이점을 좀 더 명확하게 이해하고, 프로젝트를 진행할 때 어떤 라이브러리가 효과적으로 사용할 수 있을지에 대해 고민하는것도 프론트엔드 개발자의 능력이라고 느끼게 됐다.
그리고 이번에 react-multi-carousel 같은 UI 디자인을 도와주는 라이브러리는 처음으로 접했는데, 역시 react 생태계가 매우 넓고 용이하다고 다시 한번 느꼈다. 😅 (정말 없는게 없다.)
이런 라이브러리를 직접 구현해보는 것도 좋겠지만, 프로젝트를 진행할 때는 디자인과 관련된 라이브러리도 많이 찾아보면 프로젝트 개발 속도를 높일 수 있겠다.

개선 사항

  • 페이지네이션 기능
    현재 구현하고 있지만, 사용자가 보기 편하게 디자인도 수정해야하고, 거의 모든 서비스에서 페이지네이션 기능이 사용되는 만큼 로직을 이해할 필요가 있다.
  • React-query를 사용한 만큼 컴포넌트들의 재사용성을 좀 더 올려서 프로젝트 유지 보수에 더 용이하게 만들 필요가 있다.
profile
Hyun
이전 포스트

SpotifyGenius

0개의 댓글