syleemomo의 IT 블로그 syleemomo의 IT 블로그

* 상세페이지 라우트 추가하기 import React from "react" import ReactDOM from "react-dom" import { BrowserRouter, Route, Routes } from "react-router-dom" import { Register, Login, Home, Detail } from 'pages' import './index.css' const App = () => { return ( ); }; ReactDOM.render( , document.getElementById("app")); index.js 파일을 위와 같이 수정하자! import { Register, Login, Home, Detail } from 'pages' Detail 페이지 컴포넌트를 ..

import React, { useState } from 'react' import { useNavigate } from 'react-router-dom' import { Input, Button } from 'components' import './Register.css' const Register = () => { const [id, setId] = useState('') const [password, setPassword] = useState('') const navigate = useNavigate() const handleChange = (e) => { const { name, value } = e.target name === 'id'? setId(value) : setPassword(value..

* 검색 구현하기 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 폴더에 기술..