리액트의 설치
yarn 설치 : npm install --global yarn
CRA : npx create-react-app 폴더명 혹은 yarn create react-app 폴더명
실행 : npm start 혹은 yarn start
Git Bash는 리눅스와 명령어 일치를 위해 사용된다. Git for windows에서 설치하고, VS Code의 설정에서 'Terminal > External: Windows Exec' 설정을 bash.exe로 바꿔준다. (C:\Program Files\Git\bin\bash.exe)
Prettier와 ESLint
ESLint는 자바스크립트 문법을 검사하는 도구이며, config를 통해 특정 문법을 지정할 수 있다.
Prettier는 코딩 컨벤션에서 정해지지 않은 다양한 개발 습관들을 하나의 방식으로 통일시켜주는 도구로서, 문법적으로 허용되는 경우에도 이를 통일시켜주는 역할을 한다.
Prettier 설치 : VSCode에서 Prettier 확장를 설치한다.
Format on Save 활성화 : File > Preperences > Settings (단축기 ctrl + ,) 접근, User > Text Editor > Formatting 에서 Format on Save를 on으로 바꿔준다.
Settings의 우측 상단에서 json으로 Settings를 열 수 있다. 아래의 구문을 추가하여 자바스크립트의 기본 포맷터를 prettier로 설정할 수 있다.
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},ESLint 설치 : VSCode에서 ESLint 확장을 설치한다.
ESLint-config : $ yarn add eslint-config-airbnb을 통해 특정 코딩 컨벤션 규칙을 설정할 수 있다. Package.json에 아래와 같이 Airbnb 코딩 컨벤션을 추가해보자.
"eslintConfig": {
"extends": [
"react-app",
"airbnb"
]
},Prettier 적용 : $ yarn add eslint-config-prettier를 통해 ESLint보다 Prettier를 우선적으로 적용하게하여 충돌을 방지할 수 있다.
"eslintConfig": {
"extends": [
"react-app",
"airbnb",
"prettier"
],
"rules": {
"react/jsx-filename-extension": 0,
"no-unused-vars": 1
}
},jsx-filename-extension은 리액트 관련 확장자는 jsx로 적용해야 한다는 규칙을 의미한다. no-unused-vars는 정의되었으나 사용되지 않은 식별자에 대해 빨간색의 에러가 아닌 초록색 밑줄의 경고 수준으로 바꾸는 것을 의미한다.
