Javascript & Typescript

초보자를 위한 tsconfig.js 파일 완벽 가이드

0

TypeScript는 JavaScript의 슈퍼셋으로, 정적 타입을 제공하여 더 안전한 코드 작성을 가능하게 합니다. 하지만 TypeScript 프로젝트를 시작할 때 반드시 설정해야 하는 파일이 바로 `tsconfig.js`입니다. 이 파일은 TypeScript 컴파일러에게 어떻게 코드를 변환하고 처리할지에 대한 지침을 제공하는 중요한 역할을 합니다. 이번 글에서는 `tsconfig.js` 파일의 역할, 주요 옵션, 설정 방법 등을 쉽게 설명하겠습니다.

tsconfig.js 파일이란?

`tsconfig.js` 파일은 TypeScript 프로젝트의 루트 디렉토리에 위치하며, 프로젝트 전반에 걸쳐 TypeScript 컴파일러(TSC)의 동작 방식을 정의합니다. 이 파일을 통해 컴파일 옵션, 파일 포함/제외 규칙, 경로 별칭 등을 설정할 수 있습니다.

기본 구조

`tsconfig.js` 파일은 JSON 형식으로 작성됩니다. 기본 구조는 다음과 같습니다:

{
  "compilerOptions": {
    // 컴파일러 옵션
  },
  "include": [
    // 포함할 파일 또는 디렉토리
  ],
  "exclude": [
    // 제외할 파일 또는 디렉토리
  ],
  "files": [
    // 명시적으로 포함할 파일 목록
  ]
}

주요 옵션 설명

1. compilerOptions

`compilerOptions`는 TypeScript 컴파일러의 동작을 제어하는 다양한 옵션을 정의하는 곳입니다. 주요 옵션들을 살펴보겠습니다:

  • target: 어떤 버전의 JavaScript로 컴파일할지를 설정합니다. 예: “es5”, “es6”.
  • module: 모듈 시스템을 지정합니다. 예: “commonjs”, “es6”.
  • strict: 모든 엄격한 타입 검사를 활성화합니다. 예: true.
  • outDir: 컴파일된 파일이 저장될 디렉토리를 지정합니다.
  • rootDir: 입력 파일의 루트 디렉토리를 설정합니다.
  • baseUrl: 모듈 해석을 위한 기본 디렉토리를 지정합니다.
  • paths: 모듈 경로 별칭을 설정합니다.
2. include

`include` 배열에는 TypeScript 컴파일러가 포함할 파일이나 디렉토리 패턴을 지정합니다. 예:

"include": ["src//*"]
3. exclude

`exclude` 배열에는 컴파일러가 무시할 파일이나 디렉토리 패턴을 지정합니다. 예:

"exclude": ["node_modules", "dist"]
4. files

`files` 배열에는 명시적으로 포함할 개별 파일을 지정합니다. 예:

"files": ["src/index.ts"]

경로 별칭(Alias) 설정 방법

프로젝트가 커짐에 따라 모듈의 경로가 길어지고 복잡해질 수 있습니다. 이때 경로 별칭(Alias)을 사용하면 코드를 더 깔끔하고 읽기 쉽게 만들 수 있습니다. `paths` 옵션을 통해 이를 설정할 수 있습니다.

1. 경로 별칭 설정 예시

예를 들어, `src/app` 디렉토리를 `@app`이라는 별칭으로 설정하려면 `tsconfig.js` 파일의 `compilerOptions`에 `baseUrl`과 `paths`를 다음과 같이 추가합니다:

{
     "compilerOptions": {
       "target": "es6",
       "module": "commonjs",
       "strict": true,
       "outDir": "./dist",
       "rootDir": "./src",
       "baseUrl": "./",
       "paths": {
         "@app/*": ["src/app/*"],
         "@components/*": ["src/components/*"],
         "@utils/*": ["src/utils/*"]
       }
     },
     "include": ["src//*"],
     "exclude": ["node_modules", "dist"]
   }

2. Alias 사용 예시

이제 `src/app` 디렉토리 안의 모듈을 import할 때 절대 경로 대신 별칭을 사용할 수 있습니다:

import { MyComponent } from '@app/MyComponent';
   import { Utility } from '@utils/Utility';
설정 예시

간단한 프로젝트의 `tsconfig.js` 파일 예시는 다음과 같습니다:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./",
    "paths": {
      "@app/*": ["src/app/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src//*"],
  "exclude": ["node_modules", "dist"]
}

결론

`tsconfig.js` 파일은 TypeScript 프로젝트의 필수 구성 요소로, 올바르게 설정하면 개발 과정에서 많은 이점을 제공합니다. 이 파일의 다양한 옵션을 이해하고 적절히 활용하면 TypeScript의 강력한 기능을 최대한 활용할 수 있습니다. 이번 글을 통해 `tsconfig.js` 파일에 대한 기본 개념과 주요 옵션을 이해하는 데 도움이 되었기를 바랍니다.

TypeScript를 처음 접하는 개발자라도 이 가이드를 참고하여 설정 파일을 구성하고, 프로젝트를 시작해보세요. 올바른 설정은 개발의 효율성을 크게 향상시킬 것입니다.

Leave a Reply