리액트와 웹팩

create-react-app 이라는 툴 체인을 이용하면 쉽게 리액트에 접근할수있다.

리액트를 “간단하게" 시작하기 위해 create-react-app에서 사용되는 툴 목록은 어마어마하다.

{
	// ... 
  "dependencies": {
    "@babel/core": "^7.16.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
    "@svgr/webpack": "^5.5.0",
    "babel-jest": "^27.4.2",
    "babel-loader": "^8.2.3",
    "babel-plugin-named-asset-import": "^0.3.8",
    "babel-preset-react-app": "^10.0.1",
    "bfj": "^7.0.2",
    "browserslist": "^4.18.1",
    "camelcase": "^6.2.1",
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.2.0",
    "dotenv": "^10.0.0",
    "dotenv-expand": "^5.1.0",
    "eslint": "^8.3.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "fs-extra": "^10.0.0",
    "html-webpack-plugin": "^5.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.4.3",
    "jest-resolve": "^27.4.2",
    "jest-watch-typeahead": "^1.0.0",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss": "^8.4.4",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-loader": "^6.2.1",
    "postcss-normalize": "^10.0.1",
    "postcss-preset-env": "^7.0.1",
    "prompts": "^2.4.2",
    "react-app-polyfill": "^3.0.0",
    "react-dev-utils": "^12.0.1",
    "react-refresh": "^0.11.0",
    "resolve": "^1.20.0",
    "resolve-url-loader": "^4.0.0",
    "sass-loader": "^12.3.0",
    "semver": "^7.3.5",
    "source-map-loader": "^3.0.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.2",
    "terser-webpack-plugin": "^5.2.5",
    "webpack": "^5.64.4",
    "webpack-dev-server": "^4.6.0",
    "webpack-manifest-plugin": "^4.0.2",
    "workbox-webpack-plugin": "^6.4.1"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  },
  "peerDependencies": {
    "react": ">= 16",
    "typescript": "^3.2.1 || ^4"
  },
  "peerDependenciesMeta": {
    "typescript": {
      "optional": true
    }
  }
}

 

반면, 사용자에게 최적의 번들을 제공하기 위한 전문 프론트엔드 개발자들은 이런 create-react-app의 거대한 라이브러리 목록을 줄이고자 직접 웹팩을 설치하여 하나씩 리액트와 그에 필요한 라이브러리 설정을 하기 시작했다. 자기에게 필요한 부분만 콕 집어서 개발하고자 했던 것이죠. 개발자가 필요한 이런저런 라이브러리를 골라서 번들링 할 수 있는 웹팩이 필요하게 되었다.

 

# 리액트 개발에 꼭 필요한 라이브러리

1. react, react-dom

2. babel

- 브라우저는 javascript는 읽을수 있지만 JSX는 읽을수없다. 그래서 create-react-app에 포함되어있는 babel이 jsx를 js로 변경해주어 번들링을 해주어서 우리가 React를 JSX로 작성해줘도 되는것이다.

-babel은 JSX를 JavaScript로 변경하여 entry에서 불러올 수 있게 만들어줬기 때문에 로더의 일종으로 볼 수 있다.

3. css-loader

 

# 리액트 개발에 도움이 되는 라이브러리

1. react-hot-loader

- webpack-dev-server처럼 저장할 때 마다 변경사항을 개발 환경에 적용해주는 라이브러리이다.

-리액트 상태를 유지시켜준다.

- 이거 개발한 사람이 이제 더이상 개발안하고 있다는듯..... 

2. eslint

-JavaScript로 개발 시 자주 접하는 에러를 방지하기 위한 린터이다.

- eslint 역시 많은 config와 plugin이 있는데, 이를 잘 조합하면 리액트에서 자주 접하는 에러를 미리 발견하는데 도움이 된다

3. prettier

-JavaScript로 개발 시 통일성 있게 코드 형식을 맞출 수 있게 도와주는 툴입니다. eslint와 조합해서 통일된 코드 형식까지 강요할 수도 있다.