49장 Babel과 Webpack이용한 환경구축

크롬, 사파리, 파이어폭스, 엣지같은 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다.

 

브라우저마다 ES6지원율도 다르기때문에 최신사양으로 작성된 코드를 구형 브라우저에서 문제 없이 동작시키기 위한

개발 환경을 구축하는 것이 필요하다.

 

이번장에서는 트랜스파일러인 Babel과 모듈 번들러인 Webpack을 이용하여 개발환경을 구축해보려한다.

필자는 궁금했다.

리액트를 CRA로 구축해서 개발을해와서 따로 Babel과 웹팩 이런설정을 안해주어도 문제가 없는걸까?

cra프로젝트 환경설정되있는 package.json 파일을보니 CRA는 webpack, babel 등을 다 포함하고 있다.

편하게 바로 개발할수있는 기능을 제공하는 보일러 플레이트이다.

 

CRA 만들시 npm 명령어를 쓰는데 npm은 node packaged manager 로서

Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램이다.

 

Node.js는 javascript runtime environment로 브라우저에서만 해석되는 자바스크립트를 브라우저 외에서 로컬 pc에서도 해석할수 있게된다.

 

npm 만 설치해도 react와 react-dom 라이브러리를 사용할수있지만 Node.js가 있으면 babel이라는 컴파일러 도구를 추가로 다운받아 JS 대신 JSX를 사용할수있다고한다.

 

내 프로젝트 환경설정 알아보기

{
  "name": "sprint-linkshop",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.27.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@eslint/js": "^9.13.0",
    "eslint": "^8.57.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react": "^7.37.2",
    "globals": "^15.11.0",
    "prettier": "^3.3.3"
  },
  "proxy": "<http://linkshop-api.vercel.app>"
}

 

package.json에서 가장 중요한 항목은 name과 version이다.

이것으로 패키지의 고유성을 판단하므로 생략할 수 없다.

 

그리고 dependencies 항목에는 해당 프로젝트가 의존하는 패키지들의 이름과 버전을 명시한다.

여기서 의존하는 패키지란 해당 프로젝트에서 참조하는 모듈을 의미한다.

 

프로젝트를 진행할 때는 이미 만들어진 여러 패키지를 참조해서 사용하는데, 

package.json 파일의 dependencies 항목에 해당 패키지의 이름과 버전을 명시함으로써 의존성을 설정하는 것이다.

 

devDependencies에는 개발 시에만 사용하는 개발용 의존 패키지를 명시한다.

예를 들어 TypeScript와 같은 트랜스파일러는 개발 단계에서만 필요하고 배포할 필요는 없으므로 devDependencies에 포함시킨다.

 

package.json 파일에 명시된 의존 패키지들은 npm install 명령어를 사용하여 한번에 설치할 수 있으며, 설치된 패키지는 node_modules 폴더에서 찾아볼 수 있다.