tsconfig.json 파일에 대해서 파보자!

오늘은 평소에도 알아보고 싶었던 ts.config.json 파일 세팅에 대해서 깊게 파보겠습니다

---

tsconfig.json 파일이란?

tsconfig 파일은 프로젝트 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정해놓은 파일이라고 합니다

디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 됩니다

javaScript 프로젝트에서는 jsconfig 파일과 거의 동일합니다

---

전역 속성

대표적인 전역 속성 몇가지만 알려드리겠습니다

• include: 컴파일 대상 경로 (예시: "include": ["src/**/*"])
• exclude: 제외할 파일 폴더 (예시: "exclude": ["node_modules", "dist"])
• extends: 중복되는 설정을 분리해서 재사용 가능 (모노레포에 유용)
• compilerOptions: TypeScript가 어떻게 코드를 검사하고 변환할지 정하는 설정들이 들어가는 곳

---

컴파일 옵션

예제와 함께 대표적으로 자주 사용되는 몇 가지 컴파일 옵션들만 소개드리겠습니다

"compilerOptions": {
    "target": "ES2017",
    "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,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ],
      "@views/*": [
        "./src/views/*"
      ],
      "@entities/*": [
        "./src/entities/*"
      ],
      "@shared/*": [
        "./src/shared/*"
      ],
      "@widgets/*": [
        "./src/widgets/*"
      ]
    },
  },

• target: 트랜스파일될 자바스크립트 버전 (예시: ES6, ES2017, ESNext)
• lib: 어떤 JS 기능을 쓸 수 있게 할지 결정
• allowJs: JS 파일을 프로젝트 안에 넣고 타입 검사/컴파일 가능
• skipKLibCheck: node_module 안에 있는 타입 체크 건너뛰기 (빌드 속도 상승)
• strict: 엄격한 타입 검사 옵션
• noEmit: JS 파일 생성 여부 
• esModuleInterop: commonJS 모듈의 default import를 지원
• module: 모듈 설정 (예시: CommonJS, ESNext, ES6)
• moduleResolution: import할 때 경로를 어떻게 찾을지 결정 (예시: node, classic)
• resolveJsonModule: json 파일도 import 가능 여부
• isolatedModules: 각 파일을 단독으로 처라힐지 여부
• jsx: JSX 변환 방식 (react: 16이하, react-jsx: react 17 이상 등)
• incremental: 컴파일 캐시 여부 (컴파일 속도가 올라감)
• forceConsistentCasingInFileNames: 파일 이름 대소문자 불일치 오류를 감지
• outDir: 컴파일된 JS 파일 저장 경로 (예시: dist)
• plugins: 타입스크립트 플러그인 설정 (Tailwind, next 등) 
• paths: import 경로 별칭 만들기

---

글을 마치며

이렇게 매일 사용하던 tsconfig.json 자세히 알아보아서 꽤 좋았던거 같습니다 

다 기억하지는 못하지만 사용할 때마다 대충 어떤 설정을 하는지 이제 파악할 수 있을거 같습니다

글을 읽어주셔서 감사합니다