TypeScript의 심장, tsconfig.json 설정 체크리스트

4일 전

### TypeScript 개발자라면, `tsconfig.json`이 개발자들에게 얼마나 중요한지 아시죠?

TypeScript로 개발하는 대부분의 프로젝트에서 `tsconfig.json`은 프로젝트의 설정을 정의하고 TypeScript 컴파일러가 동작하는 방식을 결정하는 핵심 파일입니다.
이 글에서는 [2ality 블로그](https://2ality.com/2025/01/tsconfig-json.html)에서 다룬 내용을 기반으로 `tsconfig.json`의 주요 개념과 활용법을 살펴보겠습니다.
TypeScript를 사용 중이거나 도입을 고려 중인 분들에게 도움이 되고자 기본 개념부터 예제까지 정리해보았습니다.

***

## `tsconfig.json`이란 무엇인가?

`tsconfig.json`은 TypeScript 프로젝트의 컴파일러 옵션과 파일을 정의하는 구성 파일입니다.
이 파일을 통해 TypeScript 컴파일러인 `tsc`가 어떤 파일을 컴파일할지, 어떤 규칙을 적용할지, 어떤 출력을 생성할지를 결정할 수 있어요.

### 기본 구조

다음은 간단한 `tsconfig.json` 예제입니다.

```json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
```

**설명**

1. **`compilerOptions`**: 컴파일러의 동작 방식을 설정합니다.
    * `target`: 컴파일된 JavaScript의 ECMAScript 버전을 설정합니다.
    * `module`: 모듈 시스템을 정의합니다.
    * `strict`: TypeScript의 엄격 모드를 활성화합니다.
    * `outDir`: 컴파일된 파일이 저장될 디렉터리를 지정합니다.
2. **`include`**: 컴파일 대상이 되는 파일이나 디렉터리를 지정합니다.
3. **`exclude`**: 컴파일에서 제외할 파일이나 디렉터리를 지정합니다.

***

## 주요 설정 옵션

### `compilerOptions`에서 중요한 설정들

아래는 자주 사용되는 주요 설정들입니다.

1. **`target`**
    JavaScript로 트랜스파일링될 ECMAScript 버전을 설정합니다.
    예: `"ES5"`, `"ES6"`, `"ES2020"`
2. **`module`**
    모듈 시스템을 정의합니다.
    예: `"CommonJS"`, `"ESNext"`, `"AMD"`
    **Tip**: Node.js 환경에서는 `CommonJS`를, 최신 브라우저에서는 `ESNext`를 주로 사용합니다.
3. **`strict`**
    TypeScript의 모든 엄격 모드를 활성화합니다. 엄격 모드가 활성화되면 문법 검사를 강력하게 해줍니다.
4. **`paths`와 `baseUrl`**
    프로젝트 내에서 모듈을 더 간단히 import할 수 있도록 도와줍니다.

```
    {
      "compilerOptions": {
        "baseUrl": "./",
        "paths": {
          "@components/*": ["src/components/*"]
        }
      }
    }
    
    ```

위 설정으로 다음과 같은 단축 import가 가능해집니다.

```
    import { Button } from "@components/Button";
    
    ```

### `include`와 `exclude`

* **`include`**: 특정 파일이나 디렉터리만 컴파일 대상으로 지정합니다.
    예: `"src/**/*"`는 `src` 폴더의 모든 파일을 포함합니다.
* **`exclude`**: 특정 파일이나 디렉터리를 컴파일에서 제외합니다.
    예: `"node_modules"`를 제외하여 불필요한 파일을 제외합니다.

***

## 실전 예제: React 프로젝트에서 `tsconfig.json` 설정하기

React 프로젝트에서는 다음과 같은 설정이 일반적입니다.

```
{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"]
    },
    "outDir": "./build",
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build"]
}
```

### 주요 포인트

1. **`jsx`**: React의 JSX 구문을 지원하도록 설정합니다.
2. **`esModuleInterop`**: CommonJS 모듈과의 호환성을 향상시킵니다.
3. **`paths`**: 모듈 경로를 간단히 설정할 수 있습니다.

***

## 알아두면 좋은 팁

1. **`tsc --init` 명령어 사용**
    TypeScript 프로젝트에서 기본 `tsconfig.json` 파일을 생성하려면 `tsc --init` 명령어를 사용하세요.
    필요한 기본 옵션들이 자동으로 생성됩니다.
2. **VS Code와의 통합**
    VS Code는 `tsconfig.json`을 자동으로 인식해 코드 작성과 디버깅을 도와줍니다.
    타입 추론과 IntelliSense를 활용해 개발 생산성을 높일 수 있어요.
3. **점진적 전환**
    기존 JavaScript 프로젝트를 TypeScript로 전환할 때는 `allowJs` 옵션을 활성화해 점진적으로 파일을 변환하는 것이 좋습니다.

***

## 결론

`tsconfig.json`은 TypeScript 프로젝트에서 꼭 필요한 설정 파일입니다.
올바르게 설정하면 프로젝트의 가독성과 유지보수성이 크게 향상됩니다.
또한, 다양한 옵션을 적절히 활용하면 팀 협업과 개발 속도를 모두 개선할 수 있어요.
TypeScript를 도입하거나 최적화하고 싶다면, 이번 기회에 `tsconfig.json`을 꼼꼼히 살펴보세요.

요컨대, `tsconfig.json`은 단순히 설정 파일 그 이상입니다.
개발 환경을 최적화하고 TypeScript의 강력한 기능을 활용하는 데 핵심적인 역할을 하니까요.
이번 기회에 을 좀 더 이해하는 기회가 되었길 바랍니다✨

출처: https://2ality.com/2025/01/tsconfig-json.html

typescript tsconfig

닥터핸

4일 전

댓글 0

답변 작성

이미지 첨부

아직 댓글이 없습니다. 첫번째 댓글 작성자가 되어주세요 :)