Share
Sign In
React initial setting
폴더 구조 (Atomic design pattern)
과거 폴더 구조
현재 폴더 구조
app
├── .babelrc
├── .eslintcache
├── .eslintrc.json
├── .gitignore
├── .husky
│ └── pre-commit
├── .prettierignore
├── .prettierrc
├── README.md
├── assets
│ └── images
├── package.json
├── public
│ ├── favicon.png
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
├── tools
│ └── webpack
│ ├── webpack.aliases.js
│ ├── webpack.config.dev.js
│ ├── webpack.config.prod.js
│ ├── webpack.helpers.js
│ ├── webpack.optimizer.js
│ ├── webpack.plugins.js
│ └── webpack.rules.js
├── tsconfig.json
├── types
└── yarn.locknpm install cross-env axios styled-components react-cookie --save TS configuration
project start
npx create-react-app . --template typescripttsconfig
{
"compilerOptions": {
"target": "es6",
"lib": [
"es7",
"es2017",
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"sourceMap": true, // 어디서 에러 났는지 표시
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": ".",
"outDir": "dist",
"paths": {
"@/*": [
"src/*"
] // alias
}
},
"typeRoots": ["./node_modules/@types", "./types"],
"include": [
"src","src/**/*", "tools/**/*"
]
}Prettier
설치
yarn add prettier.prettierrc & .prettierignore 설정
# .prettierrc
{
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"jsxSingleQuote": true
}
# .prettierignore
node_modulesEslint
설치
yarn add --dev eslint \
eslint-config-prettier \ # ESLint와 prettier 충돌 해결
eslint-plugin-prettier \ # Prettier를 ESLint에 추가
eslint-import-resolver-alias \ # Alise를 사용할수 있게 변경
eslint-plugin-import \ # Import시 파일이 있는지 검사
eslint-plugin-react \ # React를 검사
eslint-plugin-react-hooks \ # React Hooks를 검사
@typescript-eslint/eslint-plugin \ #TypeScript를 검사
@typescript-eslint/parser yarn add --dev eslint eslint-config-prettier eslint-plugin-prettier eslint-import-resolver-alias eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser .eslintrc.json
코드 보기
Resources 추가 (eslint-plugin-license-header플러그인 설치한 경우만)
라이선스에 따라 내용 수정 필요함.
// ./resources/license-header.ts
/**
* Copyright {TODO}.
*
* This source code is licensed under the WTFPL license found in the
* LICENSE file in the root of this projects source tree.
*/husky
설치
yarn add --dev huskypackage.json 수정
"scripts": {
...
"prepare": "husky install" # monorepo인 경우 project root로 이동시키고 install 한다.
},.husky/pre-commit 파일 생성
# .husky/pre-commit (모노레포의 경우 루트폴더에 이동시킨다.)
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn lint # --fix 자동으로 수정webpack
모듈 번들러로, 웹에서 모듈을 하나로 합쳐 브라우저가 사용하도록 한다.
설치
yarn add -D webpack webpack-cli webpack-dev-server cross-env ts-loader html-webpack-plugin html-loader babel-loader terser-webpack-plugin serve tools/webpack/*.js 파일 추가
webpack.aliase.js
webpack.config.dev.js
webpack.config.prod.js
webpack.helpers.js
webpack.optimizer.js
webpack.plugins.js
webpack.rules.js
package.json script 수정
cross-env가 설치되어 있어야 함 (yarn add -D cross-env)
"dev": "cross-env NODE_ENV=development webpack serve --config tools/webpack/webpack.config.dev.js",
"build": "cross-env NODE_ENV=production webpack --config tools/webpack/webpack.config.prod.js",
"start": "cross-env NODE_ENV=production webpack --config tools/webpack/webpack.config.prod.js && serve dist/",Babel
최신 자바스크립트를 지원하지 않는 브라우저에서 사용가능하도록 설정.
설치
설치 코드 확인
.babelrc
// .babelrc in root directory
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}연관된 페이지
React Coding Guide
React 홈으로 돌아가기
React.js
메인으로 돌아가기
폴더 구조 (Atomic design pattern)
과거 폴더 구조
현재 폴더 구조
app
├── .babelrc
├── .eslintcache
├── .eslintrc.json
├── .gitignore
├── .husky
│ └── pre-commit
├── .prettierignore
├── .prettierrc
├── README.md
├── assets
│ └── images
├── package.json
├── public
│ ├── favicon.png
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
├── tools
│ └── webpack
│ ├── webpack.aliases.js
│ ├── webpack.config.dev.js
│ ├── webpack.config.prod.js
│ ├── webpack.helpers.js
│ ├── webpack.optimizer.js
│ ├── webpack.plugins.js
│ └── webpack.rules.js
├── tsconfig.json
├── types
└── yarn.locknpm install cross-env axios styled-components react-cookie --save TS configuration
project start
npx create-react-app . --template typescripttsconfig
{
"compilerOptions": {
"target": "es6",
"lib": [
"es7",
"es2017",
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"sourceMap": true, // 어디서 에러 났는지 표시
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": ".",
"outDir": "dist",
"paths": {
"@/*": [
"src/*"
] // alias
}
},
"typeRoots": ["./node_modules/@types", "./types"],
"include": [
"src","src/**/*", "tools/**/*"
]
}Prettier
설치
yarn add prettier.prettierrc & .prettierignore 설정
# .prettierrc
{
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"jsxSingleQuote": true
}
# .prettierignore
node_modulesEslint
설치
yarn add --dev eslint \
eslint-config-prettier \ # ESLint와 prettier 충돌 해결
eslint-plugin-prettier \ # Prettier를 ESLint에 추가
eslint-import-resolver-alias \ # Alise를 사용할수 있게 변경
eslint-plugin-import \ # Import시 파일이 있는지 검사
eslint-plugin-react \ # React를 검사
eslint-plugin-react-hooks \ # React Hooks를 검사
@typescript-eslint/eslint-plugin \ #TypeScript를 검사
@typescript-eslint/parser yarn add --dev eslint eslint-config-prettier eslint-plugin-prettier eslint-import-resolver-alias eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser .eslintrc.json
코드 보기
Resources 추가 (eslint-plugin-license-header플러그인 설치한 경우만)
라이선스에 따라 내용 수정 필요함.
// ./resources/license-header.ts
/**
* Copyright {TODO}.
*
* This source code is licensed under the WTFPL license found in the
* LICENSE file in the root of this projects source tree.
*/husky
설치
yarn add --dev huskypackage.json 수정
"scripts": {
...
"prepare": "husky install" # monorepo인 경우 project root로 이동시키고 install 한다.
},.husky/pre-commit 파일 생성
# .husky/pre-commit (모노레포의 경우 루트폴더에 이동시킨다.)
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn lint # --fix 자동으로 수정webpack
모듈 번들러로, 웹에서 모듈을 하나로 합쳐 브라우저가 사용하도록 한다.
설치
yarn add -D webpack webpack-cli webpack-dev-server cross-env ts-loader html-webpack-plugin html-loader babel-loader terser-webpack-plugin serve tools/webpack/*.js 파일 추가
webpack.aliase.js
webpack.config.dev.js
webpack.config.prod.js
webpack.helpers.js
webpack.optimizer.js
webpack.plugins.js
webpack.rules.js
package.json script 수정
cross-env가 설치되어 있어야 함 (yarn add -D cross-env)
"dev": "cross-env NODE_ENV=development webpack serve --config tools/webpack/webpack.config.dev.js",
"build": "cross-env NODE_ENV=production webpack --config tools/webpack/webpack.config.prod.js",
"start": "cross-env NODE_ENV=production webpack --config tools/webpack/webpack.config.prod.js && serve dist/",Babel
최신 자바스크립트를 지원하지 않는 브라우저에서 사용가능하도록 설정.
설치
설치 코드 확인
.babelrc
// .babelrc in root directory
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}연관된 페이지
React Coding Guide
React 홈으로 돌아가기
React.js
메인으로 돌아가기
폴더 구조 (Atomic design pattern)
과거 폴더 구조