리액트 시작하기

# 영화 리뷰업 작업 리스트
[x] Router 설정
Router.jsx
import { HashRouter, Routes, Route } from "react-router-dom";

import Home from "./pages/home";
import Movie from "./pages/movie";
import Search from "./pages/search";
import NotFound from "./pages/NotFound";

export default function Router() {
return (
<HashRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/movie/:id" element={<Movie />} />
<Route path="/search" element={<Search />} />
<Route path="/*" element={<NotFound />} />
</Routes>
</HashRouter>
);
}

[x] 각 컴포넌트, 폴더 구성(IA)
[x] CSS 설정
[x] 웹폰트

main.jsx 화일
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import Router from "./Router";
import "./style/index.css";

createRoot(document.getElementById('root')).render(
<StrictMode>
<Router />
</StrictMode>,
)

[x] api 설정
the movie api
https://www.themoviedb.org/u/oo8317
설정 api
API key : b9fba3ed47fef961ca8018c959acc003

지금재생중

const url = 'https://api.themoviedb.org/3/movie/now_playing?language=ko-kr&page=1';
const options = {
method: 'GET',
headers: {accept: 'application/json', Authorization: 'Bearer ••••'}
};

fetch(url, options)
.then(res => res.json())
.then(json => console.log(json))
.catch(err => console.error(err));

[ ] Header, Footer, Loading, 404
[ ] 각 페이지 ui + 반응형 작업
[ ] Helmet
[ ] Page Scroll Event
[ ] Deploy