[React] 메뉴얼 React webpack 환경 설정

 typescript가 js 파일까지 바로 해석을 할 수 있으나, typescript와 babel 사용시 "typescript --> babel --> js" 를 거쳐서 파일을 해석하는 이유는 webpack+babel은 모든 파일을 하나의 .js파일로 변경해주기 때문이다. 

 babel-loader, style-loader, css-loader, file-loader, url-loader loader 옵션들이 .js파일로 bundling 해준다.

package name

npm i [package name]

react : react 모듈

react-dom : react-dom 모듈

typescript : typescript 모듈

@types/react : react용 typescript 모듈

@types/react-dom : react-dom용 typescript 모듈

 

npm i - D [package name]

eslint : eslint 모듈
prettier : prettier 모듈
eslint-plugin-prettier : code commit시 prettier를 사용하게 만드는 규칙 추가
eslint-config-prettier : eslint와 prettier간의 충돌 될 설정들을 비활성화

webpack : webpack 모듈

babel-loader : webpack과 babel을 연동

@babel/core : babel의 핵심 기능이 담겨있는 library

@babel/preset-env : 바뀌어야 하는 코드를 검사하는 규칙, 기본 js code 검사

@babel/preset-react : React code 검사

@babel/preset-typescript : typescript 코드 검사

@types/webpack : Webpack용 typescript 모듈

@types/node  : node용 typescript 모듈

style-loader : webpack이 style-css 파일을 읽을 수 있도록 함

css-loader : webpack이 css파일을 읽을 수 있도록 함

webpack-dev-server : nodemon과 같이 webpack 환경에서 개발 서버를 생성

webpack-cli : 터미널에서 webpack 명령어를 사용 할 수 있도록 함

@types/webpack-dev-server : 개발 서버용 typescript 모듈

@pmmmwh/react-refresh-webpack-plugin : hot reloading 플러그인

react-refresh

fork-ts-checker-webpack-plugin : webpack의 typescript 파일 해석을 빠르게 하기 위함, eslint는 문법적으로 잘못된 부분을 바로 잡고 type checker의 경우 함수나 class들이 type에 맞게 정확히 작성되었는지를 검사

file-loader : webpack이 파일을 로딩 할 수 있도록 함( 이미지 로딩)

 

typescript용 script 

package.json의 scripts에 "dev"로 정의 npm run dev

ts-node

TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack

cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack

 

reac-app: react hooks의 deps에 어떤것을 빼먹었는지 경고창을 알려주는 것

 

패키지 모음

eslint-config-react-app
eslint-plugin-flowtype
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react