[LG CNS AM Inspire CAMP 1기] react (10) - 영화 조회 서비스 제작

INTRO

안녕하세요, 오늘은 아래와 같이 구성된 영화 조회 서비스 제작 과정을 정리했습니다.

1. 서비스 개요

• 영화 제목으로 영화 정보 조회하는 페이지
• 조회 결과 목록에서 특정 영화를 선택하면 영화 상세 페이지
• 영화 포스트, 시놉시스, 동영상 클립 제공
• 동영상 선택 시 유튜브 영상 제공

2. 영화 정보 제공 API

- 영화 검색

https://api.themoviedb.org/3/search/movie?api_key=비밀&query=star%20wars

- 비디오 클릭 목록 조회

https://api.themoviedb.org/3/movie/11/videos?api_key=비밀

- 유튜브 영상 실행

react-youtube 컴포넌트 이용 ⇒ https://www.npmjs.com/package/react-youtube

<YouTube videoId="XsS1yE2f-hE" />

3. 패키지 설치

c:\react\router-app> npm install axios react-youtube

4. 소스 구성

• MovieList.js ⇒ 검색어와 일치하는 영화 목록을 가져와서 포스터 이미지, 영화 제목, 시놉시스를 출력. 검색 결과를 상태변수에 출력하고 화면에 출력. 영화 제목을 클릭하면 MovieDetail 컴포넌트로 이동.

• App.js ⇒ MovieList 컴포넌트와 관련한 라우트 정보 추가. MovieDetail 컴포넌트와 관련한 라우트 정보를 추가.

• Layout.js ⇒ 영화 조회 메뉴 추가.

• MovieDetail.js ⇒ 비디오 클립 목록을 출력하는 컴포넌트. 조회 결과를 상태 변수에 저장하고, 상태 변수의 값을 화면에 출력. 비디오 제목을 클릭하면 해당 비디오가 실행되록 기능을 추가.