[클론 코딩] Netflix Clone Coding(1/4)

November 18, 2020 1 분 소요

들어가기에 앞서..

본 프로젝트는 https://www.youtube.com/watch?v=XtMThy8QKqU&t=9951s 의 NETFLIX clone coding 영상을 보며 따라 만들어본 프로젝트입니다.

본 프로젝트는 영화들의 정보를 가져와 프론트에 뿌려주는 작업을 위해 TMDB를 사용합니다.

회원가입 후 API key 발급받아야 하는데, 방법은 아래와 같습니다.

회원가입을 한 후 [Settings] - [API]에 들어가 새로운 API key를 생성합니다. Developer를 클릭하고 Accept 버튼을 눌러 API key를 발급 받기 위한 정보를 작성합니다. url은 대충 작성해서 넘어가도 됩니다.

다 작성하고 나면 아래와 같이 발급반은 API key를 볼 수 있습니다.

Postman을 통해 위 사진의 API 요청 예를 전송해 response 를 통해 제대로 generate 된 API key임을 확인합니다.

아래의 명령어를 터미널에 입력해 React 프로젝트를 생성합니다.

$ npx create-react-app netflix-clone

Firebase는 다음과 같은 특징이 가집니다.

본 프로젝트에서 Firebase는 Backend의 배포를 통한 웹 사이트 hosting을 목적으로 사용됩니다. Firebase가 https://netflix-clone-5966a.web.app 과 같은 real link를 줍니다.

Add project 버튼을 누르고 netflix-clone 이라는 이름의 프로젝트를 생성합니다.
프로젝트가 생성되었다면, 웹 버튼을 눌러 웹 앱에 Firebase 를 추가합니다.
[Firebase SDK 추가]는 node module을 사용할 것이므로, 생략합니다.
[Firebase CLI] 설치를 위해 터미널에 아래의 명령어를 작성합니다.
```
$ npm install -g firebase-tools
```
-g 옵션을 위해 관리자 권한으로 실행해야 합니다.
좌측 사이드바의 [Hosting] 메뉴를 선택 후 다음 버튼을 눌러 호스팅을 시작합니다.

netflix-clone 프로젝트의 src 폴더에 있는 아래 세 개의 불필요한 파일을 삭제합니다.

axios 모듈을 설치합니다

yarn add axios