[React] TMDB API를 활용한 넷플릭스 클론 코딩 - 2. 설치 및 초기 설정

이 글에서는 넷플릭스 클론 프로젝트를 시작하기 위해 필요한 환경 설정과 초기 파일 구조 구성 방법에 대해 다룹니다. 

1. React 프로젝트 생성

먼저, React 프로젝트를 생성해야 합니다. 아래 명령어를 통해 React 앱을 만들 수 있습니다:

npx create-react-app netflix-clone

• npx create-react-app 명령어는 React 공식 템플릿을 기반으로 새 프로젝트를 생성합니다.
• netflix-clone은 프로젝트 폴더 이름입니다. 원하는 이름으로 바꿀 수 있습니다.

생성이 완료되면 해당 디렉토리로 이동합니다:

cd netflix-clone

의존성 설치 확인

React 프로젝트를 생성하면 기본적으로 필요한 의존성들이 함께 설치됩니다. package.json 파일을 열어 다음 패키지가 포함되어 있는지 확인하세요:

• react
• react-dom
• react-scripts

확인 후, 로컬 서버를 실행해 기본 화면이 잘 뜨는지 테스트합니다:

npm start

웹 브라우저에서 http://localhost:3000에 접속하면 기본 React 페이지가 표시됩니다. 

 

2. 프로젝트 폴더 구조

프로젝트를 체계적으로 관리하기 위해 폴더 구조를 설계합니다. 넷플릭스 클론 프로젝트에서는 아래와 같은 폴더 구조를 사용할 예정입니다:

src/
├── api/            # API 호출 관련 함수
├── assets/         # 이미지, 아이콘, 폰트 등 정적 파일
├── components/     # 재사용 가능한 UI 컴포넌트
├── pages/          # 각 페이지 컴포넌트
├── styles/         # CSS 파일
├── utils/          # 유틸리티 함수
├── App.js          # 메인 앱 컴포넌트
├── index.js        # ReactDOM 렌더링

폴더 생성

위 구조에 맞춰 폴더를 생성합니다.

mkdir src/api src/assets src/components src/pages src/styles src/utils

 

 

3. 라우터 설치 및 설정

넷플릭스 클론 프로젝트는 여러 페이지(예: 홈, 인기 영화, 검색 등)를 포함하므로, React Router를 사용해 라우팅을 설정합니다.

React Router 설치

npm install react-router-dom

설치가 완료되면, 기본적인 라우팅 설정을 추가합니다:

src/index.js 수정

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

src/App.js 수정

import React from "react";
import { Routes, Route } from "react-router-dom";

const HomePage = () => <div>Home Page</div>;
const PopularPage = () => <div>Popular Page</div>;
const SearchPage = () => <div>Search Page</div>;

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/popular" element={<PopularPage />} />
      <Route path="/search" element={<SearchPage />} />
    </Routes>
  );
}

export default App;

이제 브라우저에서 http://localhost:3000/, http://localhost:3000/popular, http://localhost:3000/search에 접속하면 각 페이지가 렌더링되는 것을 확인할 수 있습니다.

 

4. CSS 초기화 및 글로벌 스타일

넷플릭스 클론 프로젝트는 직관적이고 깔끔한 UI가 핵심입니다. 이를 위해 CSS 초기화를 설정합니다.

CSS 초기화 추가

src/styles/reset.css 파일을 생성하고 아래 내용을 추가합니다:

/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background-color: #000;
  color: #fff;
}

src/index.js에서 스타일 적용

import "./styles/reset.css";

이제 기본 스타일이 초기화되어 UI를 설계하기 쉽습니다.

 

5. TMDB API 키 준비

영화 데이터를 가져오기 위해 TMDB API를 사용할 예정입니다. TMDB API 키를 발급받아 준비하세요.

TMDB API 키 발급

1. TMDB 공식 웹사이트에 가입합니다.
2. 로그인 후 API 키를 생성합니다.
   • 계정 설정 > API > API 키 관리에서 확인 가능