힙하게 Typescript 보일러플레이트 구성하기

해당 문서는 지속적으로 업데이트 될 예정입니다.

2021.11.27.에 마지막으로 수정됨

Create React App과 같은 이미 다 설정된 보일러플레이트를 이용할 수도 있겠지만, 그건 힙하지 못하다. 처음부터 하나씩 다 설정하자.
이하 조합은 내가 가장 많이 사용하는 스택으로, 여러 장점이 있기에 소개해본다.

1. yarn berry

node 패키지 매니저로는 yarn berry를 사용한다. yarn berry는 yarn 2.0에서 더 발전된 버전으로, 설치된 패키지들을 여러 압축파일로 나누어 원격 레포지토리에 저장할 수 있도록 하는 기능을 지원한다.

기본으로 yarn은 1.x버전으로 세팅되어 있는데, 1.x은 지원 종료된 지 오래이므로 다음 명령어로 yarn berry를 사용하도록 하자.

yarn set version berry

이후 다음 명령어로 yarn의 기본적인 패키지 디렉토리를 생성해준다.
이미 여러 패키지가 npm이나 yarn 1.x로 설치되어 있다면 node_modules와 yarn.lock, package.lock을 삭제하고 다음 명령어를 실행한다.

yarn install

2. Typescript

Javascript는 애초에 거대한 프로젝트를 위해 설계된 언어가 아니기 때문에 타입이 정해져 있지 않는 등의 중대한 문제가 있다. 이를 Microsoft에서 보완한 것이
Typescript로, Javascript에 강력한 타입 체킹을 지원하여 보다 체계적인 개발을 할 수 있도록 도와준다.

yarn add typescript

그러나 브라우저 및 node는 .ts파일을 읽을 수 없고 오직 .js 파일만 인식할 수 있기 때문에, .ts를 .js로 바꾸는 트랜스파일링(tranpiling)이 필요하다.

4. esbuild

일반적으로 가장 많이 사용되는 조합은 webpack + babel이지만, 최초 빌드 속도가 굉장히 느리다는 단점이 있다. 그렇기 때문에 번들링 및 트랜스파일링에는 esbuild를 사용하고 있다.
esbuild는 현재 현존하는 번들러 중에서 가장 빠른 속도를 제공하며, 타입스크립트를 자바스크립트로 변환하는 트랜스파일링 또한 제공한다. 단, 타입체킹은 별도로 이루어지지 않기 때문에 이를 위해서는 tsc에 내장된 type checking기능을 사용하거나, VSCode와 같은 IDE에서 제공하는 타입체킹 기능을 사용해야 한다. 나는 VSCode에서 타입체킹을 지원하는 기능을 사용하고, 브랜치에 Push할 때에만 tsc로 엄격한 type checking을 실시한다.

esbuild의 설치는 다음과 같다.

yarn add -D esbuild

여기서 -D는 --dev의 약자로, 실제 프로그램에는 들어가지 않고 개발 과정에 도움을 주기 위해 사용하는 패키지들을 -D 플래그와 함께 설치한다.
-D 플래그로 설치하면 package.json에 devDependencies 필드에 패키지가 기록된다.

이후 여러가지 설정방법이 있겠지만 나는 esbuild.config.js를 생성해서 package.json에 다음과 같이 설정하는 것을 선호한다.

scripts {
  ...
  "build": "node esbuild.config.js",
  ...
}

esbuild.config.js는 다음과 같이 설정한다.

import { build } from 'esbuild'

build({
  entryPoints: ['./src/index.ts'],
  bundle: true,
  outfile: './dist/bundle.js',
  minify: true,
  target: 'es2020',
  define: {
    'process.env.NODE_ENV': 'production'
  }
})
})

build() 내부의 각 옵션을 설명하자면 다음과 같다.

key	value
`entryPoints`	입력 파일의 목록을 지정한다. 여러 개의 파일을 지정하려면 쉼표로 구분한다.
`bundle`	입력 파일을 번들링할지 여부를 지정한다.
`outfile`	번들링 결과를 저장할 파일의 경로를 지정한다.
`minify`	번들링 결과를 난독화 할 지 여부를 지정한다.
`target`	번들링 결과를 어떤 표준으로 출력할 지 지정한다.
`define`	매크로를 지정한다. `'A':'B'`와 같이 적은 경우 파일의 모든 `'A'`를 `'B'`로 바꾼다.

3. ESLint 설정

코드 퀄리티를 유지하기 위해 통일된 컨벤션을 적용하는 것이 좋다. ESLint는 코드의 형식을 지정해둔 규칙에 따라 코드를 검사하고 규칙에 맞도록 강제할 수 있다.

yarn add -D eslint

yarn eslint --init

위 명령어를 입력하면 안내가 나오는데, 해당 안내에 따라 옵션을 선택하면 설정이 완료된다. 저장시 eslint가 자동 적용되도록 하고 싶다면 .vscode/settings.json에 다음과 같이 추가해준다.

{
  ...
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}

레퍼런스

Migration | Yarn - Package Manager https://yarnpkg.com/getting-started/migration/#step-by-step
Typescript https://www.typescriptlang.org/
ESLint - pluggable javascript linter https://eslint.org/
esbuild - An extremely fast JavaScript bundler https://esbuild.github.io/