리액트 공부를 위해 지인이 추천해준 제로초 강의를 결재하게 되었다.
항상 처음해놓고 신경전혀 안쓰다가 나중에 잊어버려서 절절매게 되는 환경설정 을 기록에 남기려 한다.
- VS설치
- node -v:14.17.6
- npm -v: 6.14.15
- npm init 입력 -> package name에 react-nodebird-front 입력 (나머지 다 Enter 하다가 Is this Ok? 에서 yes입력 )
- package.json에서 버전 체크 후 next를 만약 9버전으로 사용하고 싶다면? npm i next@9 입력
[package.json] 에서 설정변경
여기서 npm run dev 로 시작하면 npm start와 같은기능이지만 next로 시작됨.
그리고 App.js에 따로 라우팅 하지 않아도 자동으로 라우팅됨(개꿀)
pages란 폴더를 하나 만들어서 그안에 js를 여러개 추가했단 말이지? (단 pages란 폴더명은 절대 변경하면 안됨.)
그리고 서버를 돌려보면 profile이란 js파일이 자동으로 라우팅되있음!
proptype 설정법 : npm i proptype
eslint 설치 : npm i eslint -D / npm i eslint plugin-import -D /npm i eslint-plugin-react-hooks -D
디자인 관련 : npm i antd styled-components @ant-design/icons
리덕스 설치 : npm i next-redux-wrapper / npm i react-redux
DEV TOOLS import 를 위한 설치 : npm i redux-devtools-extension 이걸 설치해야 브라우저 확장툴이랑 연결이됨.
캐로셀중 유명한 컴포넌트 npm i react-slick
npm i redux-thunk
npm i redux-saga 이번프로젝트는 사가로 사용
npm i axios
eslint 세팅 :
- npm -D babel-eslint eslint-config-airbnb eslint-plugin-import
- npm i -D eslint-plugin-react-hooks
- npm i -D eslint-plugin-jsx-a11y (접근성: 스크린리더가 화면을 잘 이해 할수 있는 지)
[.eslintrc]
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"airbnb"
],
"plugins": [
"import",
"react-hooks"
],
"rules": {
"jsx-a11y/label-has-associated-control": "off",
"jsx-a11y/anchor-is-valid": "off",
"no-console": "off",
"no-underscore-dangle": "off",
"react/forbid-prop-types": "off",
"react/jsx-filename-extension": "off",
"react/jsx-one-expression-per-line": "off",
"object-curly-newline": "off",
"linebreak-style": "off",
"no-param-reassign": "off"
}
}
불변성 유지 : npm i immer
