# tsconfig.json ### tsconfig.json 파일 TypeScript 프로젝트를 설정하는 파일입니다. TypeScript 컴파일러는 이 파일을 참조하여 TypeScript 코드를 JavaScript 코드로 변환하는 방법을 결정하죠. {% code title="tsconfig.json" lineNumbers="true" %} ```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"] } ``` {% endcode %} ### 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. 2. 3.