융융이'Blog

webpack에서 프로젝트를 번들링 할 때 파일 하나가 아니라 파일 여러개로 분리시켜서 결과물을 만들 수 있습니다. 하지만 프로젝트 단위가 커지면 불러오는 module의 크기도 커진다. 그렇기 때문에 불러오는 module도 필요에 따라 분할 하고 필요한 module만 불러온다면 속도가 향상될 것입니다. 이를 위해서 코드스플리팅을 통하여 캐쉬에 저장된 모듈은 제외하거나 필요한 모듈만 불러올 수 있도록 설정해주면 좋습니다. 라이브러리 분리하기 >> 비동기 렌더링하기 >> 빌드후 확인하기 현재 프로젝트를 git 푸시를 완료한 후 yarn eject 명령어를 치면 ![image-20200128152117885](/Users/huiyung/Library/Application Support/typora-user-i..

match,location,history 리액트에서 각 컴포넌트에서 props처럼 받는 데이터가 match, location,history에 들어 있다. import React from 'react'; import queryString from 'query-string'; const About = ({location, match, history}) => { const query = queryString.parse(location.search); console.log(location); console.log(match); console.log(history); ... location {pathname: "/about", search: "?key=value&key2=value2"..

react-router-dom 리액트 경로 설정을 도와주는 패키지입니다. NODE_PATH 설정 import의 경로 설정을 절대경로로 변경을 해준다. package.json "scripts": { "start": "NODE_PATH=src react-scripts start", "build": "NODE_PATH=src react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, BrowserRouter BrowserRouter는 HTML5의 history API를 사용하여 새로고침하지 않고도 페이지 주소를 교체할 수 있게 합니다. import React from 'react'; import { B..