#4 Netflix 앱 만들기 시작 - 1

Create React App으로 리액트 설치하기

리액트 앱 설치 방법

npx create-react-app <폴더 이름>이라는 명령어로 간단하게 설치할 수 있다.

The Movie DB API 생성하기

1. The MovieDB Website로 이동

https://www.themoviedb.org/

2. 가입 후 로그인 & API_KEY 받기

이 과정을 진행하면 API_KEY를 받을 수 있다.

3. Text Editor에서 the MovieDB API를 위한 설정

API_URL

이미지는 어떻게 가져오나?

The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기

Axios 란 무엇인가?

• Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 즉, 비동기 요청을 보낼 때 쓰는 라이브러리이다.

• 쉽게 말해서 백엔드와 프론트엔드가 서로 통신을 쉽게 하기 위해 Ajax와 더불어 사용한다.
  

Axios 사용 방법

axios 모듈 설치

npm install axios --save
axios.get('https://api.themoviedb.org/3/trending/all/week')

Axios 인스턴스화 하는 이유

중복된 부분을 계속 입력하지 않아도 되기 때문에.

Axios 인스턴스 만드는 순서

인스턴스 생성할 폴더 파일 생성

axios.js

import axios from "axios";

const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3",
    params: {
        api_key : "b4f5e22dffba5be11f802d71a6dc429c",
        language: "ko-KR",
    },
});

export default instance;

request.js

const requests = {
    fetchNowPlaying: "movie/now_playing",
    fetchNetflixOrignials: "/discover/tv?with-networks=213",
    fetchTrending: "/trending/all/week",
    fetchTopRated: "/movie/to_rated",
    fetchActionMovies: "/discover/movie?with_genres=28",
    fetchComedyMovies: "/discover/movie?with_genres=35",
    fetchHorrorMovies: "/discover/movie?with_genres=27",
    fetchRomanceMovies: "/discover/movie?with_genres=10749",
    fetchDocumentaries: "/discover/movie?with_genres=99",
}

export default requests;

넷플릭스 애플리케이션 전체 구조 생성하기

전체 구조

다음과 같이 폴더와 파일을 생성해준다.