React
-
React - Router RoutingReact/Router 2021. 6. 5. 17:11
https://reactrouter.com/ React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com SPA 라우팅 과정 브라우저에서 최초에 '/' 경로 요청 서버에서 React Web App 전체를 내려줌 내려받은 React App에서 '/' 경로에 맞는 컴포넌트를 보여줌 React App 에서 다른 페이지로 이동하는 동작을 수행하면, 새로운 경로에 맞는 컴포넌트를 보여줌 React Router 설치 npm i react-router-dom CRA에 기본 내장된 패키지가 아니므로 별도로 설치 필요 react-router-dom은 Facebook의 공식 패키지가 아님 가장 대표적인 라우팅 패키지 React ..
-
React - React Developer ToolsReact/Settings 2021. 6. 5. 16:31
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 0ae5290b54 on 5/25/2021. chrome.google.com Components 컴포넌트 기준으로 Props 및 State, 파일 위치 확인 가능 Profiler 컴포넌트 성능 측정
-
React - HuskyReact/Settings 2021. 6. 5. 15:51
https://github.com/typicode/husky typicode/husky Modern native Git hooks made easy 🐶 woof! Contribute to typicode/husky development by creating an account on GitHub. github.com husky 란? git hook 관리 git hook 이란? git을 쓰다가 특정 이벤트(커밋,푸시 등)가 발생했을 때, 그 순간 특정 스크립트가 실행 husky 설치 npm i -D husky git hook 설치 npx husky install package.json scripts prepare 추가 // package.json { "name": "react-basic", "version"..
-
React - ESLintReact/Settings 2021. 6. 4. 07:47
https://eslint.org/ ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project. eslint.org create-react-app 으로 프로젝트 설치 시, ESLint는 기본적으로 설치되어 있음 { "scripts": { "start": "react-scripts start", "build": "react-scripts build", "t..
-
React - Create React App ( package.json module 업데이트 )React/Settings 2021. 6. 4. 07:20
https://create-react-app.dev/ Create React App Set up a modern web app by running one command. create-react-app.dev 프로젝트 생성 npx create-react-app [프로젝트명] npx : npx 5.2.0 이상부터 함께 설치된 커맨드라인 명령어 프로젝트 개발 모드 실행 npm start 프로젝트 build 및 프로덕션 모드 실행 npm run build npx serve -s build 참고) package.json 모듈 업데이트 npm i -g npm-check-updates ncu -u ( package.json 모듈 업데이트) npm i ( 업데이트 된 package.json 재설치 )
-
React - Component LifeCycleReact/Basic 2021. 6. 3. 22:57
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 자주 사용되는 생명주기 메소드 Mount - 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입 constructor() render() - 최초 렌더 componentDidMount() Update - Props 또는 State가 변경되면 Update 발생(re-rendering) render() componentDidUpdate() Unmount - 컴포넌트가 DOM 상에서 제거될 ..