2️tsconfig.json

tsconfig.json 파일

TypeScript 프로젝트를 설정하는 파일입니다. TypeScript 컴파일러는 이 파일을 참조하여 TypeScript 코드를 JavaScript 코드로 변환하는 방법을 결정하죠.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

compilerOptions

compilerOptions 객체는 TypeScript 컴파일러의 동작을 설정합니다. 여기에는 아래와 같은 옵션이 포함되어 있습니다. (문자열로 표기되는 값은 대소문자를 구분하지 않아도 됩니다. es5와 Es5, ES5는 모두 같은 의미로 동작합니다.)

target

TypeScript가 어떤 ECMAScript 버전을 기준으로 JavaScript 코드를 생성할지 결정합니다. 여기서는 "es5"로 설정되어 있습니다. 작성된 TypeScript 코드는 ES5 버전을 기준으로 JavaScript 코드를 생성합니다.

이외에도 "es6", "es2015", "es2016", "esnext"와 같은 값을 지정할 수 있습니다.

lib

컴파일러가 사용할 기본 라이브러리 파일을 지정합니다. 여기서는 "dom", "dom.iterable", 그리고 "esnext"를 사용하도록 설정되어 있습니다.

• dom: 이 옵션은 웹 브라우저 환경에서 사용 가능한 DOM API에 대한 타입 정의를 포함합니다. 예를 들어, document나 window와 같은 전역 변수와 Event, Node, HTMLElement 등의 타입이 포함됩니다.

• dom.iterable: 이 옵션은 DOM API에서 사용 가능한 iterable 프로토콜에 대한 타입 정의를 포함합니다. 예를 들어, NodeList, HTMLCollection 등의 타입이 for...of 문에서 사용될 수 있게 됩니다.

• esnext: 이 옵션은 가장 최신의 ECMAScript 사양에 대한 타입 정의를 포함합니다. 이는 아직 표준화되지 않았거나 최신 브라우저에서만 지원하는 ECMAScript 기능에 대한 타입 정의를 포함할 수 있습니다.

allowJs

JavaScript 파일을 컴파일에 포함시킬지 여부를 지정합니다. 여기서는 true로 설정되어 있습니다.

skipLibCheck

모든 선언 파일(*.d.ts)의 타입 검사를 건너뛸지 여부를 지정합니다. 여기서는 true로 설정되어 있습니다.

strict

모든 엄격한 타입 검사 옵션을 활성화할지 여부를 지정합니다. 여기서는 true로 설정되어 있습니다.

noEmit

출력 파일을 생성하지 않을지 여부를 지정합니다. 여기서는 true로 설정되어 있습니다.

esModuleInterop

ES 모듈과 CommonJS 모듈 간의 상호 운용성을 허용할지 여부를 지정합니다. 여기서는 true로 설정되어 있습니다.

module

모듈 코드 생성을 위한 ECMAScript 버전을 지정합니다. 여기서는 "esnext"로 설정되어 있습니다. 그 외에는 아래와 같은 값이 올 수 있습니다.

• none: 모듈 코드를 생성하지 않습니다.

• commonjs: CommonJS 모듈을 생성합니다. 이는 Node.js에서 주로 사용됩니다.

• amd: Asynchronous Module Definition (AMD) 모듈을 생성합니다. 이는 비동기 모듈 로더 (예: RequireJS)에서 사용됩니다.

• es6 / es2015: ECMAScript 2015 모듈을 생성합니다.

• es2020: ECMAScript 2020 모듈을 생성합니다.

• esnext: 가장 최신의 ECMAScript 모듈 시스템을 사용하여 모듈을 생성합니다.

moduleResolution

모듈 해석 전략을 지정합니다. 여기서는 "bundler"로 설정되어 있습니다.

• nodenext: ECMAScript 모듈(ESM)과 기존의 시스템인 CommonJS를 모두 지원합니다. Node.js 12 버전 이상부터 동작합니다. .js 파일은 ESM으로 해석되고 .cjs는 기존의 모듈 시스템으로 동작합니다.

• bundler: 이 모드는 nodenext와 마찬가지로 ESM과 CommonJS 모두를 지원합니다. 다만, 가져오는 파일의 상대 경로에 파일 확장명을 생략할 수 있습니다.

resolveJsonModule

JSON 모듈을 import할 수 있도록 허용할지 여부를 지정합니다. 여기서는 true로 설정되어 있습니다.

isolatedModules

각 파일을 별도의 모듈로 처리할지 여부를 지정합니다. 여기서는 true로 설정되어 있습니다.

jsx

JSX 코드를 처리하는 방식을 지정합니다. 여기서는 "preserve"로 설정되어 있습니다. 그 외에는 아래와 같은 값이 올 수 있습니다.

• preserve: JSX 부분을 그대로 유지합니다. 이는 JSX를 나중에 다른 변환 단계(예: Babel)에서 처리하려는 경우에 유용합니다.

• react: JSX를 React.createElement 호출로 변환합니다. 이는 React를 사용하는 프로젝트에서 주로 사용됩니다.

• react-native: JSX를 React.createElement 호출로 변환하며, .jsx 확장자를 유지합니다. 이는 React Native를 사용하는 프로젝트에서 주로 사용됩니다.

• react-jsx: JSX를 React.jsx 또는 React.jsxs 호출로 변환합니다. 이는 React 17 이상에서 사용됩니다.

• react-jsxdev: JSX를 React.jsxDEV 호출로 변환합니다. 이는 개발 환경에서 React 17 이상을 사용할 때 사용됩니다.

incremental

증분 컴파일을 사용할지 여부를 지정합니다. 여기서는 true로 설정되어 있습니다.

plugins

TypeScript 플러그인을 지정합니다. 여기서는 next 플러그인이 사용되고 있습니다.

paths

모듈 이름에 대한 경로 매핑을 지정합니다. 여기서는 @/가 ./src/*로 매핑되어 있습니다.

알아두면 좋은 설정들

마이그레이션을 위해 추가로 알아두면 좋은 설정도 기억해둡시다.

compilerOptions.allowSyntheticDefaultImports

모듈의 기본 import를 허용합니다. 이는 TypeScript가 import React from 'react'와 같은 코드를 올바르게 처리하도록 돕습니다. 이 설정이 없으면, import * as React from 'react'와 같이 작성해야 합니다.

compilerOptions.forceConsistentCasingInFileNames

파일 이름의 대소문자를 일관되게 유지하도록 강제합니다. 이는 대소문자가 다른 두 파일을 같은 파일로 오인하는 문제를 방지합니다. 예를 들어, myComponent.tsx와 MyComponent.tsx는 서로 다른 파일로 취급됩니다.

compilerOptions.noFallthroughCasesInSwitch

switch 문에서 각 case가 명시적으로 break나 return으로 끝나도록 강제합니다. 이는 의도치 않은 case fallthrough를 방지합니다. 이 설정이 없으면, 한 case의 끝에서 다음 case로 '떨어지는' 것이 허용됩니다.

include, exclude

include 배열은 컴파일에 포함될 파일이나 폴더를 지정합니다. 여기서는 next-env.d.ts 파일과 .ts 혹은 .tsx로 끝나는 파일이 포함되어 있습니다.

exclude 배열은 컴파일에서 제외될 파일이나 폴더를 지정합니다. 여기서는 node_modules 폴더가 제외되어 있습니다.

참고 자료

1. https://www.typescriptlang.org/tsconfig

2. https://typescript-kr.github.io/pages/compiler-options.html

3. https://nextjs.org/docs/app/building-your-application/configuring/typescript