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.lock
npm install cross-env axios styled-components react-cookie --save
npx create-react-app . --template typescript
{
"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/**/*"
]
}
yarn add prettier
# .prettierrc
{
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"jsxSingleQuote": true
}
# .prettierignore
node_modules
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
// ./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.
*/
yarn add --dev husky
"scripts": {
...
"prepare": "husky install" # monorepo인 경우 project root로 이동시키고 install 한다.
},
# .husky/pre-commit (모노레포의 경우 루트폴더에 이동시킨다.)
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn lint # --fix 자동으로 수정
yarn add -D webpack webpack-cli webpack-dev-server cross-env ts-loader html-webpack-plugin html-loader babel-loader terser-webpack-plugin serve
"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/",
// .babelrc in root directory
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
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.lock
npm install cross-env axios styled-components react-cookie --save
npx create-react-app . --template typescript
{
"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/**/*"
]
}
yarn add prettier
# .prettierrc
{
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"jsxSingleQuote": true
}
# .prettierignore
node_modules
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
// ./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.
*/
yarn add --dev husky
"scripts": {
...
"prepare": "husky install" # monorepo인 경우 project root로 이동시키고 install 한다.
},
# .husky/pre-commit (모노레포의 경우 루트폴더에 이동시킨다.)
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn lint # --fix 자동으로 수정
yarn add -D webpack webpack-cli webpack-dev-server cross-env ts-loader html-webpack-plugin html-loader babel-loader terser-webpack-plugin serve
"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/",
// .babelrc in root directory
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}