MovieApp 만들기 (API키 발급, 세팅)

API키 발급

https://www.themoviedb.org

1. TMDB 사이트에 들어가서 로그인을 한 후 프로필 -> 설정 -> API로 들어간다.
2. API 키 요청 링크를 클릭하고 Developer / Professional에서 Developer를 선택한다.
3. 개인정보를 입력하고 애플리케이션 설명은 간단하게 적는다.

이제 프로필 -> 설정 -> API로 가서 API 키를 복사해서 사용한다.

Vite 프로젝트 생성

npm init vite MovieApp -- --template react

절대 경로 설정

1. tsconfig.json을 수정한다.

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] },
  },
}

2. path 패키지 설치 후 vite.config.ts파일을 수정한다

npm install path

import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: "@", replacement: path.resolve("src") }],
  }
});

Router 설정

Popular, Top Rated, Upcoming 페이지와 영화 상세 페이지, 영화 검색결과 페이지를 라우팅한다.

// App.tsx

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Header />
      <ScrollUpButton />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/popular" element={<PopularMoviePage />} />
        <Route path="/top_rated" element={<TopRatedMoviePage />} />
        <Route path="/upcoming" element={<UpcomingMoviePage />} />
        <Route path="/:id" element={<MovieDetailPage />} />
        <Route path="/search" element={<SearchMoviePage />} />
      </Routes>
    </Router>
  );
}

API 모듈화

axios.create를 사용해서 axios 인스턴스를 만들어 모듈화 한다.

// src/api/index.ts 

import axios from "axios";

const BASE_URL = "https://api.themoviedb.org/3/"
const API_KEY = "f875e5e5c00e2deee7845***********"

export const instance = axios.create({
  baseURL: BASE_URL
  headers: {
    "Content-Type": "application/json",
  },
  params: { api_key: API_KEY, language: "ko-KR", region: "KR" },
});

모듈화한 axios 인스턴스를 사용한다.

// src/api/movieApi.ts

import { instance } from "./index";

export const getPopularMovie = async (page: string) => {
  const response = await instance.get("movie/popular", { params: { page } });
  return response.data;
};