프로젝트 준비

$ yarn create react-app movie
$ cd router-tutorial
$ yarn add react-router-dom@6 
// v6 설치 
$ yarn add axios
$ yarn start 

🏷️ src/index.js
라우팅 기능을 사용하려면 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter 컴포넌트를 사용해 App을 감싸면 된다.

import React from 'react';
import ReactDOM from 'react-dom/client';

// 리액트 라우터 라이브러리 
import { BrowserRouter } from 'react-router-dom';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

API

TMDB API KEY 발급

1. https://www.themoviedb.org/?language=ko 회원가입
2. 상단의 ‘프로필’ 클릭 → ‘설정’ 클릭 → 좌측 메뉴의 ‘API’ 클릭 후 정보 입력 후 발급받기
3. API 키 (v3 auth)에 해당하는 키 값 복사 후 .env파일에 저장

• API 키 (v3 auth) : 13333adfde11568e016e85b9ec3b7e02
• API 요청 예
  https://api.themoviedb.org/3/movie/550?api_key=13333adfde11568e016e85b9ec3b7e02

영화 검색 API

• URL 구성
  https://api.themoviedb.org/3/movie/{TYPE}?language=ko-KR&api_key={API_KEY}

• TYPE : popular, top_rated, upcoming 중 하나 입력

특정 영화 조회 API

• URL 구성
  https://api.themoviedb.org/3/movie/{MOVIE_ID}?language=ko-KR&api_key={API_KEY}

• MOVIE_ID : movie 데이터의 id 필드 입력

---

React SVG 다루기
https://musma.github.io/2021/12/27/react-svg.html
https://www.svgviewer.dev/svg-to-react-jsx
위의 사이트를 통해 SVG 코드를 리액트 컴포넌트로 변환하여 사용할 수 있다.