Skip to content
Wonakk Blog
Github

CRA 없이 React 프로젝트 만들기(3)(w/Typescript)

— Babel, Webpack, React, Typescript — 2 min read

이전글 : CRA 없이 React 프로젝트 만들기(2)(w/Typescript)

해당 게시물에 사용된 프로젝트는 아래 깃헙 레포지토리에서 확인할 수 있다.

https://github.com/21hak/no-cra/tree/typescript-ts-loader

ts-loader

https://github.com/TypeStrong/ts-loader Webpack에 사용되는 Typescript loader다. Babel은 본래 크로스 브라우징을 위한 transpiler의 기능을 목적으로 했지만, Typescript가 등장하며 babel-loader와 @babel/preset-typescript을 이용해 typescript를 javascript로 transpile하는 기능을 갖추었다. ts-loader는 webpack과 함께 typescript를 사용하기 위한 loader다.

ts-loader를 사용해보자

먼저 ts-loader를 설치한다.

1yarn add --dev ts-loader

이전에 설치되어 있던 Babel관련 depedency는 모두 제거해준다. .babelrc 파일도 제거한다.

1yarn remove babel-loader @babel/core @babel/preset-env @babel/preset-react

webpack.config.js를 아래와 같이 수정한다. babel-loader 대신 ts-loader를 이용해서 .tsx, .ts 파일을 transpile한다.

1...
2module: {
3    rules: [
4      {
5        test: /\.tsx?$/,
6        include: [path.resolve(__dirname, "src")],
7        use: ["ts-loader"],
8      },
9    ],
10  },
11...

tsconfig.json 파일을 아래와 같이 작성한다. ts-loader 문서에 따르면 ts-loader는 tsconfig.json 파일 설정을 따른다. 즉 ts-loader를 사용하는 경우 tsconfig.json이 IDE의 typescript 설정, tsc 커맨드, 그리고 ts-loader의 설정을 모두 관리하게 된다.

1{
2  "compilerOptions": {
3    "target": "es6",
4    "module": "es6",
5    "moduleResolution": "node",
6    "jsx": "react",
7    "sourceMap": true
8  },
9  "include": ["src"],
10  "exclude": ["node_modules"]
11}

tsconfig.json의 옵션에 대한 설명은 typescript 공식문서에서 확인할 수 있다. 위 속성에 대해 간단히 설명하면 target은 typescript가 transpile될 javascript의 명세 버전을 설정한다. es6로 설정하면 es6명세를 따르는 javascript로 transpile 된다.

module은 transpile된 javascript가 따를 module system을 정한다. 공식 문서에 따르면 target이 es3 또는 es5인 경우에 CommonJs로 설정하고 그 외에는 es6나 es2015로 설정하는걸 추천한다. Webpack과 사용하는 경우에 es6에 사용되는 import를 이용해야 tree shaking이 이루어지기 때문에 유의해야한다.

moduelResolution은 import되는 모듈의 위치를 찾기 위한 전략을 선택하는 옵션이다. classic 또는 node를 선택할 수 있다. 이에 대한 설명은 https://typescript-kr.github.io/pages/module-resolution.html서 자세히 확인할 수 있다.

jsx는 JSX 문법이 어떻게 변경될 지를 설정한다. 우리는 react를 사용하기 때문에 JSX는 React.createElement로 변경되어야 한다. 따라서 react로 설정한다.

sourceMap은 sourcemap files를 생성하도록 한다. sourcemap files들은 구글 개발자 도구와 같은 debugging tool에서 transpile 이전의 typescript 소스 코드를 확인할 수 있게 해준다.

ts-loader vs babel-loader

Webpack과 함께 typescript를 사용하기 위해서는 ts-loader 또는 Babel을 이용해야 한다. 그렇다면 둘 중 어느 것을 사용해야 할까?

Type Checking

Babel은 type checking을 하지 않는다.

1const myString: string = 9;

ide-error 위와 같은 코드를 작성하면 vscode에서는 빨간 줄이 생기면서 type에 대한 오류를 보여준다. 하지만 babel-loader 사용 시 아래와 같이 실제 터미널에서는 문제 없이 돌아간다. compile-success babel-loader를 이용하면서 type checking을 하고 싶다면 fork-ts-checker-webpack-plugin을 사용하면 된다. fork-ts-checker-webpack-plugin는 background process로 type checking을 진행하기 때문에 컴파일 속도 저하에 크게 영향을 주지 않으며 type checking을 할 수 있다.

반면에 ts-loader는 기본적으로 type checking을 한다. type checking 없이 transpile만 하고 싶은 경우 transpileOnly 옵션을 true로 주면 babel-loader와 동일하게 type checking 없이 transpile만 진행한다. compile-fail

Performance

ts-loader는 기본적으로 type checking을 하기 때문에 Babel에 비해 속도가 느리다. 단, tsconfig에 transplieOnly를 추가하여 typechecking 기능을 뺀다면 속도에 대한 차이는 크게 없다.

1...
2module: {
3    rules: [
4      {
5        test: /\.tsx?$/,
6        use: [
7          {
8            loader: "ts-loader",
9            options: {
10              transpileOnly: true,
11            },
12          },
13        ],
14        include: [paths.src],
15      },
16    ],
17  },
18...

ts-loader와 babel-loader의 차이를 비교해놓은 글이다. https://blog.logrocket.com/babel-vs-typescript/

정리

여기까지 CRA 없이 react 프로젝트를 구성해보았다. 빌드를 위해 webpack을 사용했으며 typescript를 적용하기 위해 Babel 또는 ts-loader를 이용했다. 구체적인 설정 방법은 나도 다 모르거니와, 필요에 따라 공식 문서를 참고하는 것이 더 좋다고 생각했다. 최소한 자신의 프로젝트가 어떤 설정을 가지고 빌드되는지, 그 과정은 어떻게 되며 각각 어떤 녀석들이 관여를 하는지 이해를 할 수 있는 좋은 시간이었다.

참고