05. tsconfic

타입스크립트(TypeScript) 프로젝트를 구성할 때 tsconfig.json 파일은 컴파일러(compiler: 소스 코드를 다른 언어로 변환하는 도구로, 설계도를 바탕으로 부품을 가공하는 기계와 같다)의 동작 방식과 검사 규칙을 정의하는 핵심 설정 파일이다. 이 파일은 프로젝트 루트 디렉터리에 위치하며, 컴파일 대상 파일의 범위, 변환할 자바스크립트(JavaScript) 버전, 출력 경로, 그리고 타입 검사의 엄격도를 세부적으로 제어한다. 본 글에서는 tsconfig.json에 정의된 주요 컴파일러 옵션(compilerOptions)과 파일 포함 및 제외 설정의 역할을 설명한다.


"compilerOptions": {
    /* Language and Environment */
    // 최신 브라우저에서만 돌아가는 앱인 경우 "es6"를 적용하여 컴파일된 코드를 보다 간결하게 만들 수 있다.(const, let 등의 문법 적용)
    "target": "es6",
    // 아래의 lib 옵션은 target 옵션을 "es6"으로 설정했을 때 기본적으로 적용되는 설정들이다.
	// (lib옵션이 없을 때와 동일한 효과)
    // lib 옵션이 없다면 지정된 target 옵션 값에 따라 자동으로 기본 설정이 적용된다.
    // 빈 배열을 값으로 가진 lib 옵션을 활성화할 경우 옵션이 초기회되기 때문에 컴파일 오류가 발생할 수 있으니 주의.
    "lib": [
      "DOM", // 모든 DOM API를 사용할 수 있게 해줌.
      "es6",
      "DOM.Iterable",
      "ScriptHost"
    ],

    /* Modules */
    // rootDir 옵션으로 ts를 작성하는 위치(컴파일을 진행할 폴더)를 지정할 수 있다.
    // (outDir 옵션과 함께 사용할 수 있음)
    // rootDir 옵션이 없는 상태에서 src 폴더와 dist 폴더로 나누어 작업하는 경우
    // 컴파일 대상을 전체 프로젝트로 간주하기 때문에 src폴더가 dist 폴더에 포함되는 불상사가 생길 수 있음
    "rootDir": "./src",
    // allowJs 옵션은 ts가 js파일도 컴파일 할 수 있도록 해준다.
    "allowJs": true,

    /* JavaScript Support */
    // checkJs 옵션은 컴파일을 수행하지 않더라도 구문을 검사하고 잠재적 에러를 보고해준다.
    // 이는 ts를 사용하지 않고 일부 기능의 장점만 취하고자 할 때 사용한다.
    //   -> ts는 js에서 효과적으로 사용할 수 있는 any 타입만 허용하는데 이 옵션이 그와 같이 설정해줌.
    // ts만 사용하는 프로젝트의 경우 자동으로 컴파일해주기 때문에 필요 없는 옵션이다.
    //   -> js만 사용하거나 ts와 js를 혼용하여 사용하는 경우에 사용할 수 있다.
    "checkJs": true,

    /* Emit */
    // sourceMap 옵션을 true로 설정하면 컴파일시 js파일과 함께 js.map파일도 함께 생성된다.
    // 이는 개발자 도구의 source 탭에서 ts 파일도 확인할 수 있도록 해주기 때문에 디버깅을 훨씬 수월하게 해줄 수 있다.
    // (ts 파일에서 break point 지정 가능)
    "sourceMap": true,
    // outDir 옵션을 사용하면 생성된 파일이 저장되는 위치를 ts 컴파일러에 알릴 수 있다.
    // 이 옵션을 설정하면 js파일이 src 폴더가 아닌 dist 폴더에 있다는 것을 알 수 있다.
    // 개별 파일 뿐 아니라 폴더 안에서 ts파일을 작성하더라도 dist 폴더 안에 똑같은 구조로 만들어준다.
    //   -> src/analytics/analytics.ts  =>  dist/analytics/analytics.js
    "outDir": "./dist",
    // 컴파일시 ts파일에 포함된 주석을 제외하고 컴파일한다.
    // 파일의 크기를 줄이는데 도움이 된다.
    "removeComments": true,
    // noEmit 옵션을 true로 설정하면 js파일을 생성하지 않는다.
    // 규모가 큰 프로젝트에서 출력파일을 가져오지 않고도 컴파일러가 파일을 검사하고 잠재적 에러를 보고하도록 할 수 있음.
    "noEmit": true,
    // downlevelIteration 옵션을 true로 설정하면 컴파일시 for 등의 루프가 의도대로 작동하지 않는 경우 설정해줄 수 있다.
    // 컴파일시 더 상세한 코드로 출력해주기 때문에 항상 true로 적용해 두는 것은 비효율적일 수 있다.
    "downlevelIteration": true,
    // noEmitOnError옵션을 true로 설정하면 컴파일시 에러가 발생하면 js파일을 생성하지 않는다.
    "noEmitOnError": true,

    /* Type Checking */
    // strict 옵션은 모든 strict Type Checking 옵션을 활성화한다.
    // (strict 옵션 하나만 true로 변경하면 모두 true로 설정한 효과)
    "strict": true,
    // noImplicitAny 옵션은 매개변수(parameter) 값을 명확히 할 수 있도록 해줌. (any 비허용)
    // 변수의 경우는 any로 설정되어도 오류가 발생하지 않는데 이는 코드의 흐름에 따라 할당된 값을 토대로 추적될 수 있기 때문이다.
    "noImplicitAny": true,
    // strictNullChecks 옵션은 null 값을 잠재적으로 가질 수 있는 값에 접근하는 방식을 엄격하게 알려줄 수 있다.
    // !(느낌표)나 ?(물음표), if문 설정 등을 사용하여 에러를 해결할 수 있다.
    // 만약 이 옵션을 false로 해두고 작업하면 컴파일 에러는 피할 수 있지만 참조되는 값이 null인 경우 런타임에서 오류가 발생한다.
    "strictNullChecks": true,
    // strictFunctionTypes 옵션은 함수에 설정된 매개변수와 리턴 값의 타입들이 상충되지 않는지 검사해준다.
    //   -> 매개변수가 string인 함수 타입을 설정하고 매개변수가 (string | number)인 함수를 할당할 수 없다.
    // 클래스나 상속을 사용하여 작업한다면 불필요한 옵션이다.
    "strictFunctionTypes": true,
    // strictBindCallApply 옵션은 bind, call, apply 메서드를 사용하는 경우 유용할 수 있다.
    // 매개변수(parameter)가 필요한 함수를 구성하지 않고 바로 전달하는 경우 에러 발생
    //    -> clickHandler는 string 타입 매개변수 필요; -> (button.addEventListener('click', clickHandler.bind(null))) 에러 발생
    //    -> 이 때 두 번째 인수를 전달한다면 에러가 사라지게 된다.
    //    -> button.addEventListener('click', clickHandler.bind(null, 'string 메시지'))
    "strictBindCallApply": true,
    // alwaysStrict 옵션은 컴파일시 js파일에 'use strict'를 추가하여 strict모드를 사용하도록 해준다.
    "alwaysStrict": true,
    // noUnusedLocals 옵션은 사용되지 않은 지역변수가 선언되는 경우 에러를 표시한다.
    //    -> function a(){let username = 'max'} // 함수내에서 사용되지 않는 변수 선언 -> 에러
    // ts 파일의 가장 바깥 영역에 사용하지 않는 변수를 설정하는 것은 에러를 표시하지 않는다. -> 다른 ts파일에서 참조될 수도 있기 때문.
    "noUnusedLocals": true,
    // noUnusedParameters 옵션은 사용되지 않은 매개변수가 존재하는 경우 에러를 표시한다.
    "noUnusedParameters": true,
    // noImplicitReturns 옵션은 특정 조건에서는 리턴하고 다른 경우에는 리턴하지 않는 함수가 있는 경우 에러를 나타낸다.
    // function fun(n1){if(n1 === 1) return n1;}  -> n1이 1인 경우에는 리턴하고 다른 경우에는 리턴하지 않으므로 에러 발생
    // 즉, 모든 분기가 return 문으로 이어지지 않으면 에러
    // 어떤 경우에도 return 하지 않는 함수는 에러를 표시하지 않음.(ex. console.log만 실행하는 함수인 경우)
    "noImplicitReturns": true,
  },

  // 전체 프로젝트에 대해 tsc를 실행할 때 컴파일시 제외할 항목
  "exclude": [
    "**/*.dev.ts", // 모든 폴더에서 .dev.ts로 끝나는 모든 파일을 컴파일 제외시킨다
    "node_modules" // exclude 옵션이 없다면 자동으로 컴파일 제외 처리 되지만 있다면 반드시 node_modules 폴더를 포함시킨다.
  ],
  // 컴파일 할 항목을 지정해줌. 이외의 항목은 컴파일 되지 않는다.
  // exclude 옵션과 include 옵션이 같이 있다면 include 옵션에 포한된 항목 중에 exclude에 포함된 항목을 제외하고 컴파일된다.
  // (include - exclude)
  "include": [],
  // 컴파일하고자 하는 개별 파일만(폴더x) 지정. 소규모 프로젝트에서 사용
  "files": []
}
tsconfig 핵심 설정 구조 — 컴파일러 동작과 대상 파일 범위를 설정 그룹별로 제어한다.

1. 언어 및 실행 환경 설정 (Language and Environment)

target과 lib 속성은 코드가 변환될 자바스크립트의 표준 버전과 프로젝트에서 사용할 환경 API의 타입 정의를 결정한다.

  • target: 컴파일 결과물로 생성될 자바스크립트 버전을 지정한다. "es6"로 지정하면 const, let, 화살표 함수와 같은 최신 문법이 구형 문법(var 등)으로 다운레벨 변환되지 않고 유지되어 변환 코드가 간결해진다.
  • lib: 런타임(runtime: 프로그램이 실행되는 실행 환경)에서 기본 제공되는 전역 객체 및 API의 타입 정의 목록이다. 브라우저 환경에서 필요한 "DOM"이나 ES6 기본 기능인 "es6" 등을 명시한다. lib 옵션을 빈 배열([])로 지정하면 document, console 등의 기본 객체 타입을 찾지 못해 대량의 컴파일 오류가 발생하므로 주의해야 한다.

2. 모듈 및 자바스크립트 지원 (Modules & JavaScript Support)

프로젝트 소스 코드의 입력 구조와 기존 자바스크립트 파일의 포함 여부를 제어하는 설정이다.

  • rootDir: 컴파일 대상 소스 파일이 위치하는 루트 폴더(예: ./src)를 지정한다. outDir과 함께 사용할 때 소스 폴더의 내부 디렉터리 구조를 출력 폴더에 그대로 유지하도록 보장한다.
  • allowJs: 타입스크립트 컴파일러가 자바스크립트(.js) 파일도 함께 가져와 컴파일할 수 있도록 허용한다. 기존 자바스크립트 기반 프로젝트를 타입스크립트로 점진적으로 전환할 때 유용하다.
  • checkJs: 자바스크립트 파일 내부의 문법 오류와 잠재적 타입 에러를 검사하여 보고한다. allowJs와 함께 활성화하면 .js 파일에서도 기본적인 타입 검사 이점을 얻을 수 있다.

3. 결과물 출력 설정 (Emit)

컴파일 과정에서 자바스크립트 파일과 디버깅 정보가 디스크에 기록되는 방식을 정의한다.

  • sourceMap: 소스 맵(source map: 변환된 자바스크립트 코드와 원본 타입스크립트 코드를 연결하는 매핑 파일로, 번역본과 원본을 대조하는 색인표와 같다) 파일을 생성한다. 브라우저 개발자 도구에서 원본 .ts 파일에 중단점(breakpoint)을 설정하고 디버깅할 수 있도록 지원한다.
  • outDir: 컴파일 결과물인 자바스크립트 파일들이 저장될 대상 디렉터리(예: ./dist)를 지정한다. 원본 소스의 계층 구조가 출력 경로 안에 그대로 복제된다.
  • removeComments: 컴파일 결과물에서 모든 주석을 삭제하여 파일 용량을 최적화한다.
  • noEmit: 자바스크립트 출력 파일을 생성하지 않고 타입 검사만 수행하도록 지정한다. 지속적 통합(CI) 환경 등에서 타입 검사 전용으로 빌드를 실행할 때 사용한다.
  • downlevelIteration: 구형 자바스크립트 환경에서 for...of 문이나 전개 구문(spread operator)이 정확하게 동작하도록 도우미 코드를 추가하여 변환한다.
  • noEmitOnError: 컴파일 과정에서 타입 에러가 하나라도 발생하면 자바스크립트 출력 파일 생성을 전면 중단한다. 결함이 있는 코드가 런타임에 배포되는 상황을 방지한다.

4. 타입 검사 옵션 (Type Checking)

코드 작성 시 잠재적인 런타임 오류를 방지하기 위해 엄격한 검사 규칙을 설정한다.

  • strict: 타입스크립트의 모든 엄격 모드(strict mode: 검사 규칙을 가장 강하게 적용하는 모드) 설정을 일괄 활성화한다.
  • noImplicitAny: 타입이 명시되지 않고 문맥으로도 추론되지 않아 암시적으로 any 타입이 되는 매개변수(parameter)에 대해 에러를 표시한다.
  • strictNullChecks: null이나 undefined 값을 가질 가능성이 있는 변수에 직접 접근하는 것을 차단한다. 옵셔널 체이닝(?.), 널 단언(!), 또는 조건문을 통한 분기 처리를 강제하여 런타임 참조 오류를 예방한다.
  • strictFunctionTypes: 함수의 매개변수 및 반환값 타입 간의 상충 여부를 엄격하게 검사한다.
  • strictBindCallApply: bind, call, apply 메서드 사용 시 전달되는 인수의 타입 일치 여부를 검증한다.
  • alwaysStrict: 생성되는 모든 자바스크립트 파일 상단에 'use strict' 구문을 자동으로 추가한다.
  • noUnusedLocals / noUnusedParameters: 선언된 후 사용되지 않는 지역 변수나 함수 매개변수가 존재할 때 에러를 발생시켜 불필요한 코드 잔재를 방지한다.
  • noImplicitReturns: 함수 내부의 모든 조건 분기가 값을 명시적으로 반환(return)하지 않는 경우 에러를 발생시킨다.

5. 컴파일 대상 관리 (Files, Include, Exclude)

컴파일러가 읽어 들일 파일 목록과 제외할 범위를 지정한다.

  • include: 컴파일에 포함할 파일이나 디렉터리 경로 패턴을 지정한다.
  • exclude: include로 포함된 대상 중 컴파일에서 제외할 파일 패턴을 지정한다. exclude 옵션을 직접 정의하는 경우 기본 제외 대상이 초기화되므로 반드시 "node_modules"를 목록에 포함해야 의도치 않은 패키지 파일 컴파일을 방지할 수 있다.
  • files: 단일 파일 단위로 컴파일 대상을 지정할 때 사용하며, 와일드카드 패턴은 사용할 수 없다. 소규모 프로젝트나 특정 진입점 파일만 지정할 때 적합하다.

댓글 남기기