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 폴더에 기술..

import './App.css'; import React, { Component } from 'react'; import Word from './Word' class App extends Component { state = { words: [] } componentDidMount(){ const BASE_URL = 'https://dictionary-search.herokuapp.com/api/words' fetch(BASE_URL, { headers: { "Content-Type": "application/json", // "Access-Control-Allow-Origin": "*" // 이 코드 때문에 CORS 에러가 발생한것임. 이 코드 주석처리하면 프론트엔드에서 곧바로 외부 API 접근가능하다..

주의사항 : npm run build 하고 build 폴더를 깃허브에 올릴때 아래와 같은 설정을 해주는데 로컬에서는 아래와 같은 설정을 하게 되면 경로를 읽어오지 못하고 404 에러가 발생한다. 그럼 설정한 것들을 해제해주거나 환경변수를 설정해서 환경변수의 값이 development 일때와 production 일때 다른 코드를 읽어오게 하면 된다. 예를 들어 개발환경에서는 BrowserRouter 의 basename 은 설정해주지 않는 것이다. 1. 깃허브 저장소 이름 (dongjin) 을 BrowserRouter 컴포넌트의 basename 으로 설정해준다. 2. package.json 파일에 homepage 주소를 설정해준다. 3. public/index.html 의 head 부분에 base 태그를 추..

이벤트 처리 참고문서 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org * 기본적인 개념 open 일반적인 HTML 문서에서 이벤트핸들러 함수를 등록할때는 위와 같이 작성한다. (인라인 이벤트등록 방식) open 리액트에서는 이벤트 이름에 카멜케이스를 사용한다. 그리고 JSX 문법을 이용하여 문자열이 아닌 함수로 등록한다. * 이벤트핸들러 함수의 this import './App.css'; import React, { Component } from 'react'; class App extends Component { showAlert() { console.log(this) alert('this is alert..

header sidebar contents footer body { padding: 0; margin: 0; text-align: center; } #container { width: 100%; height: 100vh; display: flex; flex-direction: column; background: tomato; } #header, #sidebar, #contents, #footer { background: skyblue; margin-bottom: 5px; } #header { height: 50px; } #body { display: flex; flex-grow: 1; } #sidebar { width: 400px; flex-shrink: 0; margin-right: 5px; } #co..

* 기본 구조 만들기 컨텐츠 아이템 1 아이템 2 아이템 3 body { padding: 0; margin: 0; } #entire { width: 100%; height: 100vh; } #contents { background: tan; height: 120vh; text-align: center; line-height: 200vh; font-size: 2rem; } #container { width: 100%; height: 70px; background: tomato; text-align: center; position: fixed; bottom: 0; z-index: 1; font-size: 0; /* inline-block의 기본 마진값 제거*/ } .item { width: 33.2%; he..