<div id="readability-page-1" class="page"><div id="gh-main">
    <article>
        <header>
                <span>
                    By <a href="/author/jiwon/">Jiwon Park</a>
                    —
                    <time datetime="2021-11-27">2021년 11월 27일</time>
                </span>

            


        </header>

        <div>
            <blockquote>
<p>해당 문서는 지속적으로 업데이트 될 예정입니다.</p>
<p>2021.11.27.에 마지막으로 수정됨</p>
</blockquote>
<p>Create React App과 같은 이미 다 설정된 보일러플레이트를 이용할 수도 있겠지만, 그건 힙하지 못하다. 처음부터 하나씩 다 설정하자.<br>
이하 조합은 내가 가장 많이 사용하는 스택으로, 여러 장점이 있기에 소개해본다.</p>
<h2 id="1-yarn-berry">1. yarn berry</h2>
<p>node 패키지 매니저로는 yarn berry를 사용한다. yarn berry는 yarn 2.0에서 더 발전된 버전으로, 설치된 패키지들을 여러 압축파일로 나누어 원격 레포지토리에 저장할 수 있도록 하는 기능을 지원한다.</p>
<p>기본으로 yarn은 1.x버전으로 세팅되어 있는데, 1.x은 지원 종료된 지 오래이므로 다음 명령어로 yarn berry를 사용하도록 하자.</p>
<pre><code>yarn set version berry
</code></pre>
<p>이후 다음 명령어로 yarn의 기본적인 패키지 디렉토리를 생성해준다.<br>
이미 여러 패키지가 npm이나 yarn 1.x로 설치되어 있다면 node_modules와 yarn.lock, package.lock을 삭제하고 다음 명령어를 실행한다.</p>
<pre><code>yarn install
</code></pre>
<h2 id="2-typescript">2. Typescript</h2>
<p>Javascript는 애초에 거대한 프로젝트를 위해 설계된 언어가 아니기 때문에 타입이 정해져 있지 않는 등의 중대한 문제가 있다. 이를 Microsoft에서 보완한 것이<br>
Typescript로, Javascript에 강력한 타입 체킹을 지원하여 보다 체계적인 개발을 할 수 있도록 도와준다.</p>
<pre><code>yarn add typescript
</code></pre>
<p>그러나 브라우저 및 node는 <code>.ts</code>파일을 읽을 수 없고 오직 <code>.js</code> 파일만 인식할 수 있기 때문에, <code>.ts</code>를 <code>.js</code>로 바꾸는 트랜스파일링(tranpiling)이 필요하다.</p>
<h2 id="4-esbuild">4. esbuild</h2>
<p>일반적으로 가장 많이 사용되는 조합은 webpack + babel이지만, 최초 빌드 속도가 굉장히 느리다는 단점이 있다. 그렇기 때문에 번들링 및 트랜스파일링에는 esbuild를 사용하고 있다.<br>
esbuild는 현재 현존하는 번들러 중에서 가장 빠른 속도를 제공하며, 타입스크립트를 자바스크립트로 변환하는 트랜스파일링 또한 제공한다. 단, 타입체킹은 별도로 이루어지지 않기 때문에 이를 위해서는 tsc에 내장된 type checking기능을 사용하거나, VSCode와 같은 IDE에서 제공하는 타입체킹 기능을 사용해야 한다. 나는 VSCode에서 타입체킹을 지원하는 기능을 사용하고, 브랜치에 Push할 때에만 tsc로 엄격한 type checking을 실시한다.</p>
<p>esbuild의 설치는 다음과 같다.</p>
<pre><code>yarn add -D esbuild
</code></pre>
<p>여기서 -D는 --dev의 약자로, 실제 프로그램에는 들어가지 않고 개발 과정에 도움을 주기 위해 사용하는 패키지들을 <code>-D</code> 플래그와 함께 설치한다.<br>
<code>-D</code> 플래그로 설치하면 <code>package.json</code>에 <code>devDependencies</code> 필드에 패키지가 기록된다.</p>
<p>이후 여러가지 설정방법이 있겠지만 나는 <code>esbuild.config.js</code>를 생성해서 <code>package.json</code>에 다음과 같이 설정하는 것을 선호한다.</p>
<pre><code>scripts {
  ...
  "build": "node esbuild.config.js",
  ...
}
</code></pre>
<p><code>esbuild.config.js</code>는 다음과 같이 설정한다.</p>
<pre><code>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'
  }
})
})
</code></pre>
<p><code>build()</code> 내부의 각 옵션을 설명하자면 다음과 같다.</p>
<table>
<thead>
<tr>
<th>key</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>entryPoints</code></td>
<td>입력 파일의 목록을 지정한다. 여러 개의 파일을 지정하려면 쉼표로 구분한다.</td>
</tr>
<tr>
<td><code>bundle</code></td>
<td>입력 파일을 번들링할지 여부를 지정한다.</td>
</tr>
<tr>
<td><code>outfile</code></td>
<td>번들링 결과를 저장할 파일의 경로를 지정한다.</td>
</tr>
<tr>
<td><code>minify</code></td>
<td>번들링 결과를 난독화 할 지 여부를 지정한다.</td>
</tr>
<tr>
<td><code>target</code></td>
<td>번들링 결과를 어떤 표준으로 출력할 지 지정한다.</td>
</tr>
<tr>
<td><code>define</code></td>
<td>매크로를 지정한다. <code>'A':'B'</code>와 같이 적은 경우 파일의 모든 <code>'A'</code>를 <code>'B'</code>로 바꾼다.</td>
</tr>
</tbody>
</table>
<h2 id="3-eslint-%EC%84%A4%EC%A0%95">3. ESLint 설정</h2>
<p>코드 퀄리티를 유지하기 위해 통일된 컨벤션을 적용하는 것이 좋다. ESLint는 코드의 형식을 지정해둔 규칙에 따라 코드를 검사하고 규칙에 맞도록 강제할 수 있다.</p>
<pre><code>yarn add -D eslint
</code></pre>
<pre><code>yarn eslint --init
</code></pre>
<p>위 명령어를 입력하면 안내가 나오는데, 해당 안내에 따라 옵션을 선택하면 설정이 완료된다. 저장시 eslint가 자동 적용되도록 하고 싶다면 <code>.vscode/settings.json</code>에 다음과 같이 추가해준다.</p>
<pre><code>{
  ...
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}
</code></pre>
<h2 id="%EB%A0%88%ED%8D%BC%EB%9F%B0%EC%8A%A4">레퍼런스</h2>
<ol>
<li>Migration | Yarn - Package Manager <a href="https://yarnpkg.com/getting-started/migration/#step-by-step">https://yarnpkg.com/getting-started/migration/#step-by-step</a></li>
<li>Typescript <a href="https://www.typescriptlang.org/">https://www.typescriptlang.org/</a></li>
<li>ESLint - pluggable javascript linter <a href="https://eslint.org/">https://eslint.org/</a></li>
<li>esbuild - An extremely fast JavaScript bundler <a href="https://esbuild.github.io/">https://esbuild.github.io/</a></li>
</ol>

        </div>

            
    </article>
</div></div>

jiwon.me

해당 문서는 지속적으로 업데이트 될 예정입니다.
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의 기본적인 패키지 디렉토리를 생성해준다.
yarn install
2. Typescript
Javascript는 애초에 거대한 프로젝트를 위해 설계된 언어가 아니기 때문에 타입이 정해져 있지 않는 등의 중대한 문제가 있다. 이를 Microsoft에서 보완한 것이
yarn add typescript
그러나 브라우저 및 node는 .ts파일을 읽을 수 없고 오직 .js 파일만 인식할 수 있기 때문에, .ts를 .js로 바꾸는 트랜스파일링(tranpiling)이 필요하다.
4. esbuild
일반적으로 가장 많이 사용되는 조합은 webpack + babel이지만, 최초 빌드 속도가 굉장히 느리다는 단점이 있다. 그렇기 때문에 번들링 및 트랜스파일링에는 esbuild를 사용하고 있다.
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/

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

댓글