* 검색 구현하기 import React, { useState, useEffect } from 'react' import { Movie, Loading } from 'components' import { Input } from 'components' import './Home.css' const Home = () => { const [loading, setLoading] = useState(true) const [movies, setMovies] = useState([]) const [query, setQuery] = useState('') useEffect( () => { fetch('https://yts.mx/api/v2/list_movies.json?limit=20') .then( res => re..

* 글로벌 스타일 설정하기 src 폴더에 해당 파일을 추가한다. body{ margin: 0; padding: 0; } index.css 파일을 위와 같이 생성하자! import './index.css' src 폴더의 index.js 파일에 위 코드를 추가하자! * 로딩화면 스타일링하기 components 폴더에 아래 파일을 추가한다. .loading-container{ width: 100%; height: 100vh; overflow: hidden; } .loading-img{ width: 100%; height: 100%; } Loading.css 파일을 위와 같이 작성하자! import React from 'react' import loadingImg from 'assets/images/loadin..

* 프로젝트 폴더 생성하기 npx create-react-app netflix * 리액트 라우터 설치하기 cd netflix npm install react-router-dom 리액트 라우터 URL 주소 이동하기 how to use history instance while using react routers v6? I'm using react-router v6 and I have to use history instance. I've installed it using yarn add history react-router-dom@next One way of using history instance I guess it must be with v5 is to use stackoverflow.com * 라우터 기..

* 루트 폴더생성하기 CMD 창을 열고 아래와 같이 명령어를 입력한다. netflix 라는 루트 폴더를 생성하고 해당 폴더로 이동한다. mkdir netflix cd netflix * 보일러플레이트 코드 내려받기 루트 폴더 내부에서 아래와 같이 명령어를 입력한다. git clone https://github.com/sssssqew/react-webpack.git 그런 다음 dir 명령어를 입력하면 react-webpack 이라는 폴더가 생성된다. react-webpack 이라는 폴더 이름을 client 로 변경하자! 그런 다음 명령창에서 client 폴더 내부로 이동한다. * 패키지 설치하기 >npm install client 폴더 내부에서 위와 같이 명령어를 입력하면 package.json 폴더에 기술..