[컴] create-react-app 사용 + typescript

 typecript 사용 / react typescript /

create-react-app 사용

1.  Getting Started : npx create-react-app my-app --template typescript : my-app 이라는 기본 reactjs app 구조를 만들어 준다.
   
2.  Adding a Sass Stylesheet: npm i node-sass --save-dev 만 해주면 된다. 나머지는 설정이 다 되어 있다.
   
3.  Available Scripts : npm eject: 만약 webpack.config 를 직접 수정하고 싶다면 npm eject 를 이용하면 된다. 하지만 npm reject 를 한 번 사용하면 되돌릴 수 없으니 참고하자.
4. Class Components | React TypeScript Cheatsheets

> my-react-app@0.1.0 eject d:\a\prog\nodejs\my-react-app
> react-scripts eject

NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

Copying files into d:\a\prog\nodejs\my-react-app
  Adding \config\env.js to the project
  Adding \config\getHttpsConfig.js to the project
  Adding \config\modules.js to the project
  Adding \config\paths.js to the project
  Adding \config\pnpTs.js to the project
  Adding \config\webpack.config.js to the project
  Adding \config\webpackDevServer.config.js to the project
  Adding \config\jest\cssTransform.js to the project
  Adding \config\jest\fileTransform.js to the project
  Adding \scripts\build.js to the project
  Adding \scripts\start.js to the project
  Adding \scripts\test.js to the project

Updating the dependencies
  Removing react-scripts from dependencies
  Adding @babel/core to dependencies
  Adding @svgr/webpack to dependencies
  Adding @typescript-eslint/eslint-plugin to dependencies
  Adding @typescript-eslint/parser to dependencies
  Adding babel-eslint to dependencies
  Adding babel-jest to dependencies
  Adding babel-loader to dependencies
  Adding babel-plugin-named-asset-import to dependencies
  Adding babel-preset-react-app to dependencies
  Adding camelcase to dependencies
  Adding case-sensitive-paths-webpack-plugin to dependencies
  Adding css-loader to dependencies
  Adding dotenv to dependencies
  Adding dotenv-expand to dependencies
  Adding eslint to dependencies
  Adding eslint-config-react-app to dependencies
  Adding eslint-loader to dependencies
  Adding eslint-plugin-flowtype to dependencies
  Adding eslint-plugin-import to dependencies
  Adding eslint-plugin-jsx-a11y to dependencies
  Adding eslint-plugin-react to dependencies
  Adding eslint-plugin-react-hooks to dependencies
  Adding file-loader to dependencies
  Adding fs-extra to dependencies
  Adding html-webpack-plugin to dependencies
  Adding identity-obj-proxy to dependencies
  Adding jest to dependencies
  Adding jest-environment-jsdom-fourteen to dependencies
  Adding jest-resolve to dependencies
  Adding jest-watch-typeahead to dependencies
  Adding mini-css-extract-plugin to dependencies
  Adding optimize-css-assets-webpack-plugin to dependencies
  Adding pnp-webpack-plugin to dependencies
  Adding postcss-flexbugs-fixes to dependencies
  Adding postcss-loader to dependencies
  Adding postcss-normalize to dependencies
  Adding postcss-preset-env to dependencies
  Adding postcss-safe-parser to dependencies
  Adding react-app-polyfill to dependencies
  Adding react-dev-utils to dependencies
  Adding resolve to dependencies
  Adding resolve-url-loader to dependencies
  Adding sass-loader to dependencies
  Adding semver to dependencies
  Adding style-loader to dependencies
  Adding terser-webpack-plugin to dependencies
  Adding ts-pnp to dependencies
  Adding url-loader to dependencies
  Adding webpack to dependencies
  Adding webpack-dev-server to dependencies
  Adding webpack-manifest-plugin to dependencies
  Adding workbox-webpack-plugin to dependencies

Updating the scripts
  Replacing "react-scripts start" with "node scripts/start.js"
  Replacing "react-scripts build" with "node scripts/build.js"
  Replacing "react-scripts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset

Running npm install...
audited 1644 packages in 5.619s

71 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Ejected successfully!

warning: LF will be replaced by CRLF in config/env.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in config/getHttpsConfig.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in config/jest/cssTransform.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in config/jest/fileTransform.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in config/modules.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in config/paths.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in config/pnpTs.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in config/webpack.config.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in config/webpackDevServer.config.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in scripts/build.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in scripts/start.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in scripts/test.js.
The file will have its original line endings in your working directory
Staged ejected files for commit.

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1

Reference

1. Create React App · Set up a modern web app by running one command.