Vite, CRA 없이 타입스크립트 프로젝트 만들기

언제나 그랬듯 아래 커맨드를 사용해 프로젝트를 만들고 있었습니다. 그런데 원티드 공고에 바닐라 자바스크립트만 사용하는 회사가 있더라구요.

나는 과연 이 도구 없이 프로젝트를 만들어 나갈 수 있을까

라는 생각이 머리에 스쳐 지나가면서 아예 프로젝트를 쌩으로 시작해보자 다짐했습니다.

개요

NPM, 사실 yarn, pnpm 등 은 아직 제대로 써 본 적이 없어서 npm을 사용하기로 했습니다.
TypeScript, 일단 프로젝트 시작 후 개발을 이어나갈 수 있게 익숙한 언어를 사용하기로 했습니다.
Webpack, 마침 제가 webpack을 예전에 깔짝(?)대본 기억이 있어서 번들링 툴로 사용하기로 했습니다. 나중에 RollUp이나 다른 툴도 경험해 볼 기회가 있을까요?

충격적이게도 이것밖에 아는 게 없더라구요. 일단 프로젝트를 생성하고 webpack 설정을 마친 뒤 더 필요한 작업이 있는지 알아봐야 겠습니다. 바벨이라던지?

Git & npm

먼저 package.json을 생성하기 위해 npm init -y 커맨드를 실행했습니다.
다음 각 과정 커밋을 남기기 위해 git init 으로 버전 관리를 시작했습니다.

폴더 구조 세팅

가장 처음 구조는 아래로 구성했습니다.

• entry는 src/index.js
• 빌드 output은 dist 폴더에 (vite처럼)
• webpack.config.js 에 웹팩 설정

├── dist/
│   └── index.html
├── src/
│   └── index.js
├── .gitignore
├── package.json
├── package-lock.json
└── webpack.config.js

Webpack

먼저 웹팩 설정입니다. 그래도 참 신기한게, 처음 웹팩 공식 문서를 봤을 때는 뭐 이렇게 조잡하게 구구절절 써놨나 싶었거든요. 지금 다시 보니까 이렇게 친절할 수가 없네요 (심지어 한국어 번역까지). 아래 링크에 가이드를 따라 차근차근 설정하기로 했습니다.
https://webpack.kr/guides/getting-started

먼저 웹팩을 설치합니다. 아래에 webpack 설정은 모두 webpack.config.js 파일에서 이루어집니다. 직접 만들어주시면 됩니다.

npm install webpack webpack-cli --save-dev

1. entry / output 설정

내 코드를 빌드하기 위해 entry와 output을 추가해야 합니다. 그런데 왜 빌드해야 하는 걸까요? 마저 쓰고 알아보겠습니다.

• entry: 어디에 있는 어떤 파일(들)을
• output: 어디에 어떤 이름으로 번들링 할지

2. style-loader, css-loader로 스타일 파일 번들링

npm i --save-dev style-loader css-loader

hello 클래스를 가진 요소에 color: red 를 추가한 style 파일을 import 했습니다. 안타깝지만 style.css 와 같은 스타일 파일은 따로 번들링 모듈을 추가해야 합니다.

여담으로 style-loader 대신 mini-css-extract-plugin 을 사용할 수도 있습니다.
https://webpack.js.org/plugins/mini-css-extract-plugin/

아까전 webpack.config.js 로 돌아가서 output 아래에 module을 추가합니다. 앞으로 이 모듈 내부에 필요한 도구를 추가할 예정입니다.

• test: 어떤 파일을 (정규식으로 매칭 판단)
• use: 어떤 로더를 사용해서 번들링 할지

3. 이미지 파일 번들링

이제 이미지 파일을 번들링 해보겠습니다. 왜 한 번에 안 되는지 의문입니다. rules 배열에 하나 더 추가하겠습니다. 다행히 이미지는 webpack5 부터 내장 모듈로 로드됩니다. 따로 설치할 것 없이 use 대신 type을 사용하면 됩니다.

4. 폰트 파일 번들링

폰트도 따로 번들링 해줘야 합니다. 갖고 계신 폰트(ex. woff)를 src 폴더에 넣고 아래 코드를 웹팩 설정에 추가한 뒤 빌드 해보시면 잘 되는 것을 알 수 있습니다.

5. 여러 entry 설정

앞서 설명에서 파일(들)이라고 했었는데요, entry를 여러 개 만들어 줄 수도 있습니다. entry 객체에 name: path 형태로 적어주시면 됩니다. name은 아래 output 시 생성되는 이름을 의미합니다. [name].bundle.js 에 [name] 은 유동적으로 바뀔 수 있다는 것을 의미합니다.

entry의 두 파일을 빌드하면 index.bundle.js 와 print.bundle.js 라는 두 개의 파일이 생성됩니다.

6. index.html 파일 자동 생성

기존에는 dist/index.html 을 직접 만들고, js 이름이 바뀔 때마다 script의 src도 바꿔줬었는데요. 이렇게 하면 너무 귀찮겠습니다. 하지만 다행입니다.

npm i --save-dev html-webpack-plugin

아래와 같이 plugins에 HtmlWebpackPlugin을 추가하면 entry에 맞게 index.html이 자동 생성됩니다.

7. 타입스크립트로 마이그레이션

https://webpack.js.org/guides/typescript/

npm install --save-dev typescript ts-loader

이제 타입스크립트로 갈아탈 시간입니다. 간단하지만 그냥 js를 ts로 바꾼다고 될 문제는 아닙니다 (당연히 바꾸긴 해야합니다). 중요한 건 두 가지입니다.

• resolve: 응 타입스크립트야~ 알려주는 역할인 것 같습니다.
• rules:
  • ts-loader 를 추가합니다.
  • source-map-loader (역할이 다릅니다. 필수는 아닙니다.)

루트에 tsconfig.json 파일을 추가합니다. 중요한 건 outDir, target, module 인 것 같습니다. 각각의 속성은 천천히 알아봅시다.