webpack을 이용한 React + Typescript 셋팅하기

Notice

처음이라면?

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Archives

Today

Total

관리 메뉴

프론트엔드 개발

webpack을 이용한 React + Typescript 셋팅하기 본문

Front-End/Webpack

webpack을 이용한 React + Typescript 셋팅하기

태나미 2022. 1. 17. 18:01

'프론트엔드 개발환경의 이해'강의를 듣고 정리를 하였는데, 이해를 바탕으로 직접 webpack과 babel을 세팅을 해보고자 합니다.

기존에는 CRA를 이용하여 React를 쉽게 바로 쓸 수 있는 장점이 있었기 때문에 사용하였습니다. CRA를 이용하면 Webpack 및 Babel 등 설정하기 까다로운 것들을 편하게 쓸 수 있었는데, 나중에 이러한 구성요소들을 변경을 하고자 할 때 이해해야 할 수 있기 때문에 직접 리액트 환경을 Webpack을 통해서 구축해보는 시간을 갖도록 하겠습니다.

React + Typescript + Webpack 구성

먼저 package manager는 이 글을 참고하여 yarn으로 진행하도록 하겠습니다.
node 14.17.3, yarn: 1.22.17 버전으로 진행하였습니다.

프로젝트 생성 및 필요 파일 생성

mkdir webpack-without-cra
cd webpack-without-cra
yarn init -y

yarn을 이용하여 package.json 파일 생성

mkdir src public dist

src : source 코드가 있는 폴더
public : static 한 파일 위치
dist : 번들링 결과물이 위치할 폴더

touch public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack without CRA</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

index.html을 public 폴더 안에 위와 같이 작성합니다.

React 설치

yarn add react react-dom

react: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리
react-dom: 리액트를 DOM과 연결

Typescript 설치

yarn add -D typescript @types/react @types/react-dom ts-loader
tsc --init

typescript, @types/react, @types/react-dom: typescript 설치 및 타입 설치
ts-loader: typescript로 작성된 코드가 javascript로 변환하게 해주는 loader
tsc --init: tsconfig.json 생성(TypeScript 코드를 원하는 JavaScript 코드로 컴파일하려면tsconfig.json이 필요합니다.)

Babel 설치 및 설정

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

babel-loader : JSX 및 ES6+ 문법을 트랜스파일링
@babel/core : 바벨의 코어
@babel/preset-react : 리액트의 JSX를 트랜스파일링
@babel/preset-env : ES6+ 코드를 ES5로 트랜스파일링하고 브라우저 폴리필을 자동화

touch babel.config.js

module.exports = {
  presets: [
    "@babel/preset-react",
    "@babel/preset-env",
    "@babel/preset-typescript",
  ],
};

프로젝트 루트에 babel.config.js 파일 생성 후 프리셋 설정

Webpack 설치

핵심

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

webpack : 번들 작업을 하는 웹팩의 코어
webpack-cli : 웹팩 터미널 도구, 웹팩을 커맨드 라인에서 사용
webpack-dev-server : 웹팩을 메모리 상에 빌드하여 개발 서버를 구동

플러그인

touch webpack.config.js
yarn add -D html-webpack-plugin clean-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require("path");
const webpack = require('webpack');

module.exports = (env, argv) => {
    const prod = argv.mode === "production";
    
    return {
        mode: prod ? "production" : "development",
        devtool: prod ? "hidden-source-map" : "eval",
        entry: "./src/index.tsx",
        output: {
            path: path.join(__dirname, "/dist"),
            filename: "[name].js",
        },
        devServer: {
            port: 3000,
            hot: true,
        },
        resolve: {
            extensions: [".js", ".jsx", ".ts", ".tsx"],
        },
        module: {
            rules: [
            {
                test: /\.tsx?$/,
                use: ["babel-loader", "ts-loader"],
            },
            ],
        },
        plugins: [
            new webpack.ProvidePlugin({
                React: "react",
            }),
            new HtmlWebpackPlugin({
                template: './public/index.html',
                minify: process.env.NODE_ENV === 'production' ? {
                    collapseWhitespace: true, // 빈칸 제거
                    removeComments: true, // 주석 제거
                } : false,
            }),
            new CleanWebpackPlugin(),
        ],
    }
};

루트 폴더에 webpack.config.js 생성
mode: 개발, 프로덕션 모드 확인
devtool: 모드에 따라 SourceMap 확인 여부
entry: 시작점 경로를 지정하는 옵션, 해당 파일부터 필요한 모듈 로딩 및 하나의 파일로 묶기
output: webpack이 번들링 결과물을 위치할 경로 및 이름
devServer: 실시간으로 개발 모드로 개발하는 중 변경사항이 프로젝트에 반영
resolve: 배열 안 확장자에 따라서 처리
module: loader 설정 / babel-loader, ts-loader 등
plugins: 부가 기능을 할 플러그인 설정
- CleanWebpackPlugIn: 번들링을 할 때마다 이전 번들링 결과를 제거
- ProvidePlugin: 자주 사용되는 모듈을 미리 등록하여 매번 작성하지 않게 하는 플러그인
- HtmlWebpackPlugin: HTML 파일에 번들링 된 자바스크립트 파일을 삽입해주고 이 플러그인으로 빌드하면 HTML 파일로 아웃풋에 생성됩니다

index.tsx (entry) 생성

touch src/Index.tsx src/App.tsx

import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Index.tsx, App 컴포넌트를 root아이디를 가진 DOM에 랜더

const App: React.FC = () => {
    return (
        <div>hello world</div>
    )
};

export default App;

App.tsx

package.json

"scripts": {
    "dev": "webpack-dev-server --mode=development --open --hot --progress",
    "build": "webpack --mode=production  --progress",
    "start": "webpack --mode=development  --progress"
},

yarn run dev 명령어 실행 시 localhost:3000으로 열리게 됩니다.

tsconfig.json

이렇게 하였지만, 위와 같은 에러가 발생하게 되는데, tsconfig.json에서 jsx부분을 다음과 같이 설정하였습니다.

{
    "compilerOptions": {
      "target": "es2016",
      "jsx": "react-jsx",
      "module": "commonjs",
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "strict": true,
      "skipLibCheck": true
    }
}