12.Creating React Project (Set-Up)
Updated:
1.Create React App
facebook open source 로서 react 로 프로젝트를 실행시, 개발환경을 쉽게 만든들어 주는 라이브러리 임
- 설치
$ npx create-react-app 폴더명
- dev mode 실행
$ yarn start
- build mode 실행
$ yarn build
# serve 명렁어를 -s 옵션으로 build 폴더를 지정하여 실행합니다 (-s 옵션은 어떤 라우팅으로 요청해도 index.html 을 응답하도록 합니다)
$ npx serve -s build
- test mode
CRA (create-react-app) 에서는 기본적으로 jest 를 통한 test 모드를 진행 합니다. (내장 되어 있음)
$ yarn test
- eject mode
CRA 로 작성을 하다가 더이상 CRA 로 작성하지 않는다는 의미의 탈출 모드를 말함.
필요성: CRA 는 많은 기능을 가지고 있지만, 프로젝트를 커스텀 할 상황이 생기면 eject 를 통해서 변경해서 사용할 수 있음
근데 한번 eject 하면 다시 되돌아 올 수 없기 때문에 현업에서는 관리 되고 있는 CRA 를 eject 안하는 것을 권장함 (나중에 버그 발생시, 도움 받기가 어려움)
$ yarn eject
CRA 작동원리
2.ESLint
-
코딩 스타일같은것을 통일하기 위해 모든 개발자들이 코딩 스타일을 통일 시키기 위해 사용되는 tool (CRA 에 기본 내장)
-
기존에 ESLint 를 설치하면 project root 경로에
.eslintrc.js파일을 통해서 ESLint 를 설정했지만 CRA 에서는package.json에서 확인 가능
// in package.json
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
// rule 을 추가해서 customize 할 수 있음
"rules": {
"semi":
}
- node_modules 가서 eslint-config-react-app 이 생략되서 package.json 에서
"react-app"으로 사용됨
3.husky
- Git hooks made easy
husky는 프론트엔드 개발 환경에서 git hook을 손쉽게 제어하도록 도와주는 매니저이다. git hook은 git을 쓰다가 특정 이벤트(커밋할 때, 푸시할 때 등등)가 벌어졌을 때, 그 순간에 ‘갈고리’를 걸어서 특정 스크립트가 실행되도록 도와주는 것이다.
Git init 이 된 상태에서 설치
$ yarn add husky -D
# Git hooks installed
$ npx husky install
package.json 가서 script 추가
"scripts": {
"prepare": "husky install"
},
만약 commit 을 하기 전에 test 를 하고 싶을 경우
$ npx husky add .husky/pre-commit "yarn test"
git add 하고
git commit -m “husky test” commit 을 실행 할 경우 위에 설정된 yarn test 가 먼저 실행하게 되어 commit 이 되기 전에 test 를 거치게 된다
- team 에서 설치를 해서 사용하게 되면 공동 작업 시 code error 를 미리 확인 할 수 있게 됨
4.lint-staged
- Run linters on git staged files
commit 이 되기 직전에 ESLint 나 Prettier 를 통해서
설치
$ yarn add lint-staged -D
그리고 husky 가 실행 될수 있도록 설정
$ npx husky add .husky/pre-commit "lint-staged"
- 세팅
// in package.json 에 추가
// 의미는 ** 모든 폴더 범위에서 .js 로 끝나는 파일 전부 "eslint --fix" 해주고 , prettier 를 통해서 양식을 알맞게 고쳐준 다음에 "git add" 해주는 것임
// CRA 에는 prettier 가 기본적으로 없기 때문에 yarn add prettier -D 를 해서 미리 설치 해줘야 함
"lint-staged": {
"**/*.js": [
"eslint --fix",
"prettier --write",
"git add"
]
},
이와 같이 할 경우 모든 commit 이 잘 정돈된 형태로 commit 을 하게 됨 (코드 스타일을 통일을 할 수 있게 도와 줌)
5.React Developer Tools
- 개발 모드로 띄운 다음에 디버깅을 위해서 크롬이나 파이어폭스 에다가 extension 으로 dev tools 를 설치하게 되면 dev tools 가 react component 를 디버깅하는 기능을 제공해주는것
크롬 React Developer Tools 설치해서 사용하기
f12 누르고 component ,
🔶 🔷 📌 🔑
Reference
-
React redux official site - https://react-redux.js.org/tutorials/quick-start
-
coding apple - https://online.codingapple.com/course/react-basic/
Leave a comment