YONG.ZIP

이제 넷플릭스 영화 트레일러 팝업을 넣어보려고 한다. 먼저 터미널에 아래에 있는 두 개의 명령어를 입력해서 패키지를 설치한다. npm i react-youtube npm i movie-trailer 이제 영화 트레일러를 유튜브에서 불러올 수 있다. 역시나 얘기가 길어져서 간단한 설명은 주석 처리로 했다. [Row.js] import React, { useState, useEffect, } from "react"; import axios from "./axios"; import "./Row.css" import YouTube from "react-youtube"; import movieTrailer from "movie-trailer"; const base_url = "https://image.tmdb.o..

이제 모든 장르를 리액트 앱에 불러올 차례다. request.js에서 가지고 왔던 장르들을 App.js에 있는 넷플릭스 오리지널과 실시간 트렌드 아래에 넣어주면 된다. 해당 코드를 작성하면 사진처럼 리액트 앱에 다양한 장르를 불러올 수 있다. 다음은 App.css다. 먼저 새로 작성하기 위해 원래 존재하던 코드를 다 지워준다. 그리고 아래 코드를 작성한다. *{ margin: 0; } 마진 0을 주는 이유는 간단하다. 브라우저마다 기본 마진 값이 다르기 때문이다. 내가 설정한 css 값이 다른 브라우저에서도 동일하게 보이기 위해 마진 값을 0으로 초기화 해주는 것이다. 이제 다시 App.js로 넘어가겠다. 넷플릭스 오리지널 row 포스터의 크기가 크고 비율이 다른 것을 해결해야 한다. [App.js] [..

[App.js] import React from 'react'; import './App.css'; import Row from './Row'; import request from './request'; function App() { return ( 안녕 난 오늘 넷플릭스 클론코딩을 해볼 거야~ ); } export default App; 쿼카.js와 Prettier을 설치해준다. 프리티어는 설치 후 확장설정에 들어가서 Editor: Format On Save 체크박스를 체크한다. src 폴더 아래 Row.css 파일을 새로 만들고 Row.js 파일에서 css를 사용하기 위해 import 해준다. [Row.js] import React, { useState, useEffect } from "react";..

시작부터 블로그에 기록하면서 클론코딩을 진행해보려고 한다. 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. 앱 닉네임을 작성하고 '..