React - 환경구축 및 설정

 

1. npx create-react-app

$ npm init react-app 파일명
or
$ yarn create react-app 파일명

 

2. prettier & eslint-plugin install

npm install prettier eslint-config-prettier eslint-plugin-prettier
or
yarn add prettier eslint-config-prettier eslint-plugin-prettier

 

 

3. router@v6, styled-components 설치

npm i react-router-dom --save
npm i styled-components --save

 

4. .eslintrc.json 설정

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn",
    "no-multiple-empty-lines": "warn",
    "no-console": ["warn", { "allow": ["warn", "error"] }],
    "eqeqeq": "warn",
    "dot-notation": "warn",
    "no-unused-vars": "warn",
    "react/destructuring-assignment": "warn",
    "react/jsx-pascal-case": "warn",
    "react/no-direct-mutation-state": "warn",
    "react/jsx-no-useless-fragment": "warn",
    "react/no-unused-state": "warn",
    "react/jsx-key": "warn",
    "react/self-closing-comp": "warn",
    "react/jsx-curly-brace-presence": "warn"
  },
  "prettier/prettier": [
    "error",
    {},
    {
      "usePrettierrc": false
    }
  ]
}

 

5. .prettierrc.json

{
  "tabWidth": 2,
  "endOfLine": "lf",
	"arrowParens": "avoid",
	"singleQuote": true,
}

 

6. .vscode/setting.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.tabSize": 2,
  "editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
	"javascript.format.enable": false,
	"eslint.alwaysShowStatus": true,
	"files.autoSave": "onFocusChange"
}

 

7. .gitignore

.eslintcache
.vscode
.eslintrc
.prettierrc

 

8. yarn 추가시 나오는 Error

 

사진 삭제

사진 설명을 입력하세요.

- 해결방법: https://hellcoding.tistory.com/entry/VSCode-%EC%98%A4%EB%A5%98-%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%A0-%EC%88%98-%EC%97%86%EC%9C%BC%EB%AF%80%EB%A1%9C

이미지 썸네일 삭제

VSCode 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로 ...

VSCode 오류 : 이 시스템에서 스크립트를 실행할 수 없으므로... VSCode의 터미널을 통하여 npm혹은 yarn을 사용하여 처음 작업을 수행할 때, 다음과같은 에러가 발생할 수 있습니다. 내용은 "이 시스템에서 스..

hellcoding.tistory.com

- 권한 상태 값을 Restricted 에서 RemoteSigned 로 변경한다.

- 다시 vscode에서 yarn을 실행하면 정상적으로 install이 된다.

 

9. redux 설치

yarn add redux react-redux redux-devtools-extension redux-logger

 

 

redux-devtools-extension : 크롬 dev tool을 통해 설치 가능, redux의 데이터 흐름을 알아보기 쉽게 하기 위함

redux-logger : redux를 통해 바뀔 이전 state, dispatch 실행으로 인해 바뀐 state가 콘솔에 찍혀 디버깅을 쉽게 해주는 라이브러리