[Netflix clone coding]

넷플릭스 첫 화면을 리엑트와 The movie db api를 사용하여 만들었다.

 

제일 먼저 내 프로젝트 폴더에서 create-react-app을 해준다.

 

그 후 The movie DB API의 key를 생성한다. The movie DB 사이트에서 로그인 후 복사해준다.

 

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

 

이 API를 인스턴스화하기 위하여 api라는 폴더를 프로젝트 내에 생성해주고 그 안에 axios.js, requests,js파일을 만든다.

 

 

import axios from "axios";

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

export default instance;

 

const requests={
    fetchNowPlaying: "movie/now_playing",
    fetchNetflixOriginals: "/discover/tv?with_networks=213",
    fetchTreding: "/trending/all/week",
    fetchTopRated: "/trending/all/week",
    fetchActionMovies: "/discover/movie?with_genres=28",
    fecthComedyMovies: "/discover/movie?with_genres=35",
    fecthHorrorMovies: "/discover/movie?with_genres=27",
    fecthRomanceMovies: "/discover/movie?with_genres=10749",
    fecthDocumentaries: "/discover/movie?with_genres=99",

}

export default requests;

 

이렇게 인스턴스화 하는 이유는 사용되는 url의 앞부분과 api_key를 중복해서 치지 않기 위함이다.

 

 API를 웹 에플리케이션에 사용하기 위해선 Axios라는 비동기 통신 라이브러리를 사용한다.

 

 

---

Open API를 사용할 준비가 되었으니 이제 웹페이지를 구성해준다.

 

넷플릭스 웹 화면은 nav, banner, 여러개의 row, footer, modal 로 구성될 것이다.

 

nav와 banner, row

1개의 row와 footer

영화 클릭시 생기는 modal

 

전체적인 구조는 react router dom을 사용하여 만들어졌다.

 

App.js의 구조를 보면

 

const Layout = () =>{
  return(
    <div>
      <Nav />

      <Outlet/>

      <Footer/>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Routes>
        <Route pate="/" element={<Layout />}>
          <Route index element={<MainPage/>}/>
          <Route path=":movieId" element={<DetailPage/>}/>
          <Route path='search' element={<SearchPage/>}/>
        </Route>
      </Routes>
    </div>
  );
}

export default App;

 

총 3개의 route가 있다. 인덱스 페이지는 Nav, Footer로 항상 유지된다.

 

mainpage는 위의 사진 예시와 같이

 

export default function MainPage() {
  return (
    <div>
         <Banner />
      <Row
        title="NETFLIX ORIGTINALS"
        id="NO"
        fetchUrl={requests.fetchNetflixOriginals}
        isLargeRow
      />
      <Row title="Trending Now" id="TN" fetchUrl={requests.fetchTreding} />
      <Row title="Top Rated" id="TR" fetchUrl={requests.fetchTopRated} />
      <Row title="Action Movies" id="AM" fetchUrl={requests.fetchActionMovies} />
      <Row title="Comedy Movies" id="CM" fetchUrl={requests.fecthComedyMovies} />
      <Row title="Horror Movies" id="HM" fetchUrl={requests.fecthHorrorMovies} />
      <Row title="Romance Movies" id="RM" fetchUrl={requests.fecthRomanceMovies} />
    </div>
  )
}

 

Banner와 Row로 이루어져있다. 

 

SearchPage와 DetailPage는 검색에 대한 결과와 찾는 동안의 결과값을 나타낸다.

 

자세한 코드 https://github.com/qkrsh/react-netflix