담쟁이 담쟁이

import './index.css'; 하나만 import 하였고 분명히 import 하지도 않는 css 파일을 적용이 되는 것을 볼수 있다. 이는 상위 js에서 import가 되었을 가능성이 높다. module 화를 통해서 css를 분리해보자. 간단하다. css 파일 명에 module을 붙여준다. Main.css -> Main.module.css module을 안붙여주면 적용이 되지 않는다. 그 후에 import를 해준다. import style from './css/Main.module.css'; className은 다음과 같이 style. 으로 진행하면된다. LOLDUO 여러개의 className을 적용시키고 싶다면 className={s.now === selected ? `${style.Champ..

npm install react-router-dom 를 통해 react-router를 설치해준다. index.js 예시이다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import style from './css/Main.module.css'; import './css/App.css'; import App from './App'; import Detatil from './Detail'; import { BrowserRouter, Routes, Route } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElem..

리액트 16.8 버전 이후로 함수형 component에서 상태를 관리할 수 있게 됨에 따라 사용이 가능하다. Hooks 라는 기능이 16.8에 도입되면서 사용 가능한 Hooks 중 하나이다. import { useState } from 'react'; const [championName, setChampionName] = useState('' "); 첫 번째 인자값이 관리되고 있는 값이고 두 번째 인자는 함수로 써 첫 번째 값을 변경할 수 있다. const onChange = (e) =>{ setChampionName(e.target.value); } onChange 함수를 두어 들어 온 값을 두 번째 인자를 이용하여 변경 할 수 있다.

교차 출처 리소스 공유(Cross-Origin Resource Sharing)은 한 출처에서 실행 중인 웹 application이 다른 출처의 자원에 접근할 수 있는 권한을 추가 http 헤더를 이용하여 알려주는 체제이다. XMLHttpRequest 와 Fetch API는 동일 출처 정책을 따르기에 이부분을 염두해두어야한다. 해결방법. 중간에 프록시서버를 두면 되지만 react는 간단하게 해결이 가능하다. package.json에 "proxy" : "http://~" 를 적용시키고 해당 url을 사용하는 fetch api에서 url의 호스트를 지워준뒤 사용하면 된다. "http://~/test" -> "/test" 만약 여러 경로를 사용해야 하는 경우. npm install http-proxy-middl..

npx create-react-app "프로젝트 명" 프로젝트 명에 대문자는 불가능하다. npm run build build 폴더가 생성이 되고, 최적화 하여 build 된 파일들만 이 안에 들어가게 된다.