npx create-react-app my-app
그리고 npm start
...
의미도 모르고 기계처럼 치던 명령어들이 있다. 이런 명령어들은 초기 리액트 프로젝트를 구성할 때만 쓰겠지 하고 구글링하며 복붙한 뒤 잊어버리곤 한다🤦
그리고 한참이 지나 새로운 프로젝트를 시작할 때, 또 다시 구글링을 하는 나를 발견할 때..
더 이상의 복붙은 없다. 이번에야말로 React로 프로젝트를 시작할 때 마다 헷갈리는 초기 셋팅에 대해 알아보자!
npm
보다 빠르고 효율적인 캐시 시스템, 기타 부가 기능때문에 yarn
을 사용하기도 한다.npm start
npx create-react-app my-app
nvm install --lts
nvm current
v(version)
👉 초기 셋팅에 빠질 수 없는 정말 중요한 패키지 몇 가지를 알아보자
npm install react-router-dom
npm install node-sass@4.14.1 --save
.prettierrc
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "consistent",
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf"
}
.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",
"jsx-a11y"
],
"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 install --save-dev babel-plugin-styled-components