[#1] 넷플릭스 클론코딩.ZIP | API KEY 발급 | With React.js

시작부터 블로그에 기록하면서 클론코딩을 진행해보려고 한다.

---

1. TMDB API Key 발급

https://www.themoviedb.org/?language=ko 

 

 

 

3번에 해당하는 Developer를 선택하고 아래로 내리고 동의(accept)를 누르면 된다. 그러면 위 사진과 같이 API 생성을 위해 빈칸에 해당하는 내용을 입력하면 된다. 이용 형태는 웹사이트로 선택해야 한다.

 

그럼 바로 TMDB에서 API 키가 생성된다. 

 

2. Postman 사용법

 

 

3. 리액트 앱 생성

 

 

npx create-react-app netflix-clone

 

4. Firebase Set up

 

https://firebase.google.com/

 

해당 링크에 들어가서 로그인 후 프로젝트를 새로 생성한다.

 

 

2. 앱 닉네임을 작성하고 '또한 이 앱의 Firebase호스팅을 설정하세요.'에 해당하는 체크박스를 선택한 후 앱 등록을 한다.

 

 

3. 2단계 'Firebase SDK'에서 바로 다음을 누르고 3단계 'Firebase CLI 설치'에 있는 명령어를 복사한다.

 

 

 4. 비주얼 스튜디오 코드로 이동해서 터미널에 명령어 입력 후 설치한다.

 

 

이제 firebase set up이 완료되었다. 본격적으로 넷플릭스 클론코딩을 시작하려고 한다.

 

 

먼저, 비주얼 스튜디오 터미널 창에 cd netflix-clone 명령어를 입력한다.

* npm start 명령어를 입력하면 기본 브라우저로 react-app이 실행된다. 기본 브라우저는 크롬으로 설정하는 것이 좋다.

 

 

src 내에 있는 필요없는 파일 3개 App.test.js, logo.svg, setupTest.js를 삭제해준다.

 

 

그럼 logo.svg 때문에 리액트 앱에서 에러가 발생하는데 이건 App.js 파일에 들어가서 header에 해당하는 항목과 맨 첫째줄에 있는 import logo from './logo.svg' 를 지워주면 해결된다. 그리고 터미널에 아래에 있는 명령어를 입력한다.

 

npm i axios //axios 설치

 

 

그리고 src 폴더 아래 request.js 파일을 생성한다. 사진처럼 Request.js 말고 소문자로 생성하자.

 

[request.js] - TMDB에서 모든 영화 정보를 불러온다.

const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //자신의 API 키값 입력

const request = {
    fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
    fetchNetflixOriginals: `/discover/tv?api_key=${API_KEY}&with_networks=213`,
    fetchTopRated: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
    fetchActionMovies: `/discover/movie?api_key=${API_KEY}&with_genres=28`,
    fetchComedyMovies: `/discover/movie?api_key=${API_KEY}&with_genres=35`,
    fetchHorrorMovies: `/discover/movie?api_key=${API_KEY}&with_genres=27`,
    fetchRomanceMovies: `/discover/movie?api_key=${API_KEY}&with_genres=10749`,
    fetchDocumentaries: `/discover/movie?api_key=${API_KEY}&with_genres=99`,
}

export default request;

 

 

src 폴더 아래 axios.js 파일을 만들어준다.

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리다. 아까 별도의 명령어로 설치해줬다.

 

[axios.js] | baseURL은 영화 DB를 요청한다.

 

import axios from "axios";

const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3",
});

export default instance;

 

[App.js]

 

function App() {
  return (
    <div className="App">
      <h1>안녕 난 오늘 넷플릭스 클론코딩을 해볼 거야~</h1>
      <Row title="NETFLIX ORIGINALS" />
      <Row title="Trending Now" />
    </div>
  );
}

 

App.js 파일에 해당 코드를 작성하고 src 폴더 안에 Row.js 파일을 생성한다. 

 

[Row.js]

 

import React, { useState } from "react";

function Row({ title }) {
    const [movies, setMovies] = useState([]);

    

    return (
        <div>
            <h2> {title} </h2>

            {/* container -> posters */}
        </div>
    )
}

export default Row;

 

Row.js 파일을 작성하면 App.js에 import Row from './Row'를 적어줘야 한다.

* 주석처리는 ctrl + /를 누르면 빠르게 할 수 있다. 

 

확장에서 사진에 있는 앱 두 개를 설치해야 한다.