우아한테크코스 프로젝트: CRA없이 웹팩을 이용하여 리액트와 타입스크립트 설정하기

정우시·2023년 7월 9일

목록 보기

6/13

우아한테크코스 팀 프로젝트의 경우 기술 사용 가이드가 있으며, 웹펙을 제외한 CRA, Vite, Snowpack, Parcel, Rollup, esbuild 등 모든 도구들을 제한하고 있습니다.

따라서 이번 기회에 웹펙을 이용하여 프로젝트 환경 설정을 해보게 되었습니다. 또한 환경 설정에 대한 이해도를 조금 더 높이기 위해 글로 정리를 하게 되었습니다.

이 글은 React 18 + Typescript + Webpack 5 + Babel 7을 기준으로 작성되었으며, 패키지 매니저는 yarn을 사용하였습니다.

1. yarn을 통한 package.json 파일 생성

yarn init -y

2. React 설치

yarn add react react-dom

3. Typescript 설치

타입스크립트의 경우 compile time에만 필요하기 때문에 devDependency로 설치하면 된다.

yarn add -D typescript @types/react @types/react-dom

Typescript 코드를 원하는 자바스크립트로 컴파일을 하려면 tsconfig.json을 생성을 해야 합니다.

yarn tsc --init

tsconfig.json의 경우 아래와 같이 설정을 하였습니다.

{
  "compilerOptions": {
    "target": "es2016", // TypeScript 컴파일러가 ECMAScript 2016 표준을 대상으로 컴파일하도록 지정
    "jsx": "react-jsx", // JSX 문법을 사용할 수 있도록 지정
    "module": "commonjs", // 컴파일된 JavaScript 코드를 CommonJS 모듈 형식으로 생성하도록 지정
    "allowJs": true, // TypeScript 컴파일러가 JavaScript 파일도 컴파일하도록 허용
    "esModuleInterop": true, // TypeScript에서 ES 모듈과 CommonJS 모듈을 혼용하는 경우에 사용됨
    "forceConsistentCasingInFileNames": true, // 파일 이름의 대소문자가 일치하지 않으면 컴파일 에러가 발생
    "strict": true, // 엄격한 타입 체크를 활성화
    "noImplicitAny": true, // 암묵적인 any 타입을 허용하지 않음
    "skipLibCheck": true // 선언 파일의 검사를 건너뛰도록 지정
  },
  "include": ["src/**/*"] // 컴파일 대상에 포함할 파일 및 디렉토리의 경로 패턴을 지정합니다.
}

package.json에서 "type": "module"로 지정해주었습니다.

{
  "name": "practice-without-cra",
  "version": "1.0.0",
  "main": "src/index.js",
  "type": "module",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "typescript": "^5.1.6",
  }
}

Babel 설치

@babel/core: Babel의 핵심 기능을 제공하는 패키지입니다. Babel은 JavaScript 코드를 변환하고 트랜스파일링하는 데 사용되는 도구입니다.
@babel/preset-react: React 애플리케이션을 트랜스파일링하기 위한 Babel 프리셋입니다. React의 JSX 문법과 함께 사용됩니다.
@babel/preset-typescript: TypeScript 코드를 트랜스파일링하기 위한 Babel 프리셋입니다. TypeScript의 타입 어노테이션 등을 JavaScript로 변환합니다.
babel-loader: Webpack과 함께 사용되는 Babel 로더입니다. Webpack에서 JavaScript 파일을 로드할 때 Babel을 사용하여 트랜스파일링하고, 로더 체인을 통해 다른 변환 작업과 결합할 수 있습니다.

yarn add -D @babel/core @babel/preset-react @babel/preset-typescript babel-loader

Babel 설정 파일 생성

touch babel.config.json

babel.config.json의 경우 아래와 같이 설정해였습니다.
- ["@babel/preset-react", { "runtime": "automatic" }]: 이 프리셋은 React 애플리케이션을 트랜스파일링하기 위한 설정입니다. "runtime": "automatic" 옵션을 사용하면 React 17 버전 이상에서 JSX 변환을 자동으로 처리합니다. 이는 React import 선언을 생략하고 JSX 코드 작성 시 jsx 함수를 사용할 수 있게 해줍니다.
- "@babel/preset-typescript": 이 프리셋은 타입스크립트 코드를 트랜스파일링하기 위한 설정입니다. 타입스크립트의 어노테이션과 다른 타입스크립트 문법을 자바스크립트로 변환합니다.

{
  "presets": [
    ["@babel/preset-react",{"runtime": "automatic"}],
    "@babel/preset-typescript"
  ]
}

webpack 설치

webpack: 웹 애플리케이션의 모듈 번들링을 담당하는 JavaScript 모듈 번들러인 Webpack을 설치합니다. Webpack은 의존성 그래프를 만들고, 애플리케이션의 모든 모듈을 하나의 번들로 패키징하여 배포 준비된 정적 파일을 생성합니다.
webpack-cli: Webpack 명령줄 인터페이스(Command Line Interface)를 제공하는 패키지입니다. 이를 통해 Webpack을 명령줄에서 실행하고, 구성 파일을 로드하고, 빌드 및 개발 서버를 실행할 수 있습니다.
webpack-dev-server: 개발 환경에서 사용되는 간단한 개발 서버를 제공하는 패키지입니다. 이 패키지는 변경 사항을 감지하고 빠르게 개발 서버를 재시작하여 개발자에게 실시간으로 수정 사항을 표시하는 기능을 제공합니다.
html-webpack-plugin: Webpack 빌드 시 HTML 파일을 생성하고, 번들된 자원에 대한 자동으로 삽입된 스크립트 태그를 제공하는 플러그인입니다. 이를 통해 Webpack 번들을 자동으로 HTML에 삽입하여 번들링된 애플리케이션을 실행할 수 있습니다.

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

webpack 환경 설정을 위한 webpack.config.js 파일 생성

touch webpack.config.js

webpack.config.js의 경우 아래와 같이 설정을 하였습니다.

import HtmlWebpackPlugin from "html-webpack-plugin";

/** @type {import('webpack').Configuration} */
export default {
  mode: "development",
  entry: "./src/index",
  output: {
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.[tj]sx?/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
      filename: "index.html",
    }),
  ],
  devServer: {
    hot: true,
    port: 3000,
  },
};

package.json파일에 있는 scripts 항목에 웹펙과 관련된 명령어를 정의를 하였습니다.
- "start": "webpack serve": start 스크립트는 개발 서버를 실행하는 명령어로, webpack serve 명령은 웹펙 개발 서버를 시작하고, 애플리케이션을 개발 환경에서 실행합니다. 이 스크립트를 실행하면 개발 서버가 시작되고 변경 사항을 실시간으로 감지하여 브라우저에서 자동으로 새로 고침됩니다.
- "build": "webpack": build 스크립트는 프로덕션용 번들을 생성하는 명령어입니다. webpack 명령은 웹펙을 실행하여 프로젝트의 소스 코드를 번들링하고, 최적화된 정적 파일을 생성합니다. 이 스크립트를 실행하면 프로덕션에 배포하기 위한 최종 번들이 생성됩니다.

.
.
.
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  },
.
.
.

정리

React와 Typescript를 Webpack과 Babel을 이용하여 개발 환경을 구축해보았습니다.

또한 위에서 소개한 설정 단계를 통해 package.json, tsconfig.json, babel.config.json, webpack.config.js 파일을 생성하고 필요한 패키지들을 설치했습니다.

마지막으로 scripts 항목을 통해 yarn start 명령어로 개발 서버를 실행할 수 있었습니다.

정우시

프론트엔드 공부하고 있는 정우시입니다.

이전 포스트

우아한테크코스 프로젝트: 관심사 기반 스와이프 랜덤 쇼핑에서 카페 정보 제공 서비스로의 기획 변경 이야기

다음 포스트

우아한테크코스 프로젝트: CRA없이 웹팩을 이용하여 리액트와 타입스크립트 설정하기