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

12.01.2022 — Babel, Webpack, React, Typescript — 1 min read

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

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

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

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

Typescript

이제 프로젝트에 Typescript를 추가해보자. Typescript는 Javascript에 타입 시스템을 추가한 것이다. 따라서 Typescript로 작성된 코드는 Javascript로의 Transpile 과정을 거친 뒤 Webpack을 통해 번들링 된다. 앞서 나는 이미 Transpiler로 Babel을 이용하고 있으므로, Babel을 이용해 Typescript 세팅을 해보겠다.

babel-loader

webpack에서 타입스크립트를 읽을 수 있는 loader는 2가지가 있다. babel을 사용하는 babel-loader와 ts-loader이다. 이 중, 나는 먼저 babel-loader을 이용해서 세팅해보겠다. 먼저 babel-loader를 설치하자. babel이 react 문법을 transpile하도록 해주는 @babel/preset-react를 같이 설치했듯이 typescript를 transpile하도록 해주는 @babel/preset-typescript를 같이 설치한다.

1yarn add --dev babel-loader @babel/preset-typescript

babel-loader와 @babel/preset-typescript를 설치한 뒤, .babelrc에 preset-typescript를 추가한다.

1{
2  "presets": [
3    "@babel/preset-env",
4    "@babel/preset-react",
5    "@babel/preset-typescript" // 추가
6  ]
7}

VS CODE 설정 및 파일 변경

Typescript를 사용하는 주된 이유는 개발 시 타입 체킹을 통한 코드 안정성이다. 따라서 개발자가 코드를 작성하는 환경이 Typescript를 지원하도록 설정해야한다. 나는 vscode를 사용하기 때문에 vscode를 기준으로 설명하겠다.

vscode에서 typescript를 사용하기 위해서는 Typescript Compiler(tsc)를 설치해야 한다. 패키지 매니저로 typescript를 설치하면 된다. Typescript는 개발 과정과 빌드시에만 사용되고 실제 production bundle에는 필요가 없으므로 devDependencies로 설치한다. 참고로 vscode 내부에서 task runner가 tsc를 이용해 타입 정보를 제공한다.

1yarn add --dev typescript
2npx tsc --version // typescript compiler 버전 확인

이제 기존 js 파일들을 ts, tsx 파일로 변경하자. 기존에 JSX 문법이 사용되었으면 tsx로, 그렇지 않으면 ts로 변경하면 된다.

1App.js => App.tsx
2index.js => index.tsx

변경 후 tsc를 이용해 수동으로 ts파일을 js파일로 transpile할 수 있다.

1# 프로젝트 root에서 실행
2npx tsc src/App.tsx

아무 설정 없이 위 명령어로 transpile를 하면 error TS17004: Cannot use JSX unless the '--jsx' flag is provided. 이런 에러가 발생한다. JSX 문법을 transpile하려면 --jsx 옵션을 추가하라는 내용이다.

1npx tsx src/App.tsx --jsx react

위와 같이 JSX는 react로 문법으로 인식을 해서 transpile하라고 시키면

이 tsx 파일이

1import React from "react";
2function App() {
3  return <div> Hello from React World </div>;
4}
5export default App;

아래와 같이 바뀐다.

1"use strict";
2exports.__esModule = true;
3var react_1 = require("react");
4function App() {
5  return react_1["default"].createElement(
6    "div",
7    null,
8    " Hello from React World "
9  );
10}
11exports["default"] = App;

tsconfig.json

vscode에서 타입을 추론할 때 --jsx와 같은 옵션을 추가해주기 위해서 tsconfig.json파일을 사용해 설정을 추가한다. 프로젝트의 root 디렉토리에 tsconfig.json을 만들고 아래와 같이 설정을 추가하자.

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

webpack.config.js

이제 개발환경을 구성 했으니, 웹팩을 이용해서 번들을 빌드해보자. 먼저 index.js가 index.tsx로 바뀌었으니 entry를 ./src/index.tsx로 바꿔주자. 그리고 js파일이 아닌 ts, tsx 파일들을 babel-loader로 이용하여 transpile 할 것이기 때문에 rules도 아래와 같이 바꿔주자.

1// webpack.config.js
2...
3resolve: {
4    alias: {
5      components: path.resolve(__dirname, "src"),
6    },
7    extensions: [".ts", ".tsx", ".js"],
8  },
9  module: {
10    rules: [
11      {
12        test: /\.tsx?$/,
13        include: [path.resolve(__dirname, "src")],
14        use: ["babel-loader"],
15      },
16    ],
17  },
18...

여기까지 한 뒤, yarn run dev나 yarn run build를 실행하면, typescript 파일들이 js파일로 잘 번들링 되는것을 확인할 수 있다. 여기 까지 내가한 것은 아래와 같다.

리액트 기본 프로젝트 구조 구성
babel을 이용한 react 문법 transpiling
webpack을 이용한 번들링
vscode typescript 설정
bable-loader을 이용한 typescript transpiling

여기 까지면 cra 없이 typescript 기반 react 프로젝트 생성이라는 주요 목표는 달성했다.

이제 앞에서 언급한 babel-loader 말고 ts-loader를 이용하여 typescript를 추가해보자.