반응형
1. yarn 설치
yarn init
2. React 설치
yarn add react react-dom
3. Webpack 설치
yarn add -D webpack webpack-cli
npx webpack init
4. Babel 설치
yarn add -D @babel/core @babel/preset-react @babel/preset-env
5. webpack.config.js 수정
devServer: {
hot: true, //추가
open: true,
host: "localhost",
},
...
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-env'], //추가
},
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: 'asset',
},
],
},
6. Prettier 설치
yarn add -D prettier
7. .prettierrc 생성
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 100,
"endOfLine": "lf"
}
8. eslint 설치
yarn add -D eslint eslint-config-prettier eslint-plugin-prettier
9. .eslintrc 생성
{
"plugins": ["prettier"],
"extends": [
"eslint:recommended",
"plugin:prettier/recommended",
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es2021": true
},
"ignorePatterns": ["*.config.js"],
"rules": {
"prettier/prettier": "error",
}
}
그런데 이렇게 하고나니 eslint가 react 문법을 이해하지 못하는 문제가 생겼다.
그래서 다음과 같이 해결해줬다.
yarn add -D eslint-plugin-react
.eslintrc 수정
"extends": [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:react/recommended" //추가
],
10. public 폴더 생성 후, 그 안으로 index.html 옮기기
webpack.config.js 수정
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
extensions: ['.js', '.jsx'],
},
반응형
'React' 카테고리의 다른 글
클래스형 컴포넌트 vs 함수형 컴포넌트 - Hook API 등장 전 (0) | 2021.10.16 |
---|---|
useMemo vs useCallback vs React.memo (0) | 2021.08.24 |
Redux (0) | 2021.06.23 |
State vs Props (0) | 2021.06.22 |
Immutable이란? (0) | 2021.06.22 |