📚 TS config

tsconfig.base.json(루트폴더)

{
  "compileOnSave": false, // 파일 저장 시 자동으로 컴파일하지 않음
  "compilerOptions": {
    "rootDir": ".", // 프로젝트의 루트 디렉토리 설정 (컴파일된 .js 파일이 생성될 기준 경로)
    "sourceMap": true, // .ts 파일에 대응되는 .js.map 파일을 생성하여 디버깅 가능하게 함
    "declaration": false, // .d.ts 타입 선언 파일 생성 여부 (false면 생성하지 않음)
    "moduleResolution": "node", // 모듈 해석 방식 지정 (Node.js 방식 사용 - node_modules 기준)
    "emitDecoratorMetadata": true, // 데코레이터 사용 시 타입 메타데이터를 함께 생성 (Reflect.metadata 등 데코레이터와 함께 타입 정보를 runtime에 유지하기위함)
    "experimentalDecorators": true, // 실험적인 데코레이터 문법을 사용할 수 있게 함 (@ 데코레이터)
    "importHelpers": true, // TypeScript의 중복되는 헬퍼 함수들을 tslib에서 가져오도록 설정. 중복코드 제거, 빌드크기 축소, 깔끔한 번들 생성(tslib패키지를 설치해야한다.)
    "target": "es2015", // TypeScript를 컴파일할 때 변환될 JavaScript 버전 (ES6)
    "module": "esnext", // import/export 문법의 모듈 형식 지정 ('commonjs', 'amd', 'es2015', 'esnext' 등)
    "lib": ["es2017", "dom"], // 사용 가능한 내장 API를 정의한 라이브러리 포함 (예: Promise, DOM 등)
    "skipLibCheck": true, // node_modules 내의 .d.ts 파일 타입 검사 생략 (컴파일 속도 향상)
    "skipDefaultLibCheck": true, // 기본 라이브러리 파일 검사 생략
    "baseUrl": ".", // 모듈을 import할 때 기준이 되는 경로 설정
    "paths": {
      "@dongsun/shared": ["libs/shared/src/index.ts"] // 경로 별칭 설정 (예: import from '@project/shared')
    }
  },
  "exclude": ["node_modules", "tmp"] // 컴파일 대상에서 제외할 디렉토리
}

tsconfig.json(프로젝트 개별 폴더 내)

{
  "extends": "../../tsconfig.base.json", // 상위 디렉토리에 있는 공통 tsconfig 설정을 가져와서 확장

  "compilerOptions": {
    "jsx": "preserve", // JSX 문법을 그대로 유지해서 Babel 같은 다른 트랜스파일러가 처리하게 함(React, Next.js에서 주로 사용)
    "allowJs": true, // .js 파일도 TypeScript에서 import 하여 사용할 수 있게 허용
    "esModuleInterop": true, // CommonJS 모듈을 ES6 방식으로 import 가능하게 해줌 (import fs from 'fs'), default export가 없는 모듈도 default처럼 사용할 수 있게 해줌
    "allowSyntheticDefaultImports": true, // default export가 없어도 default import 문법을 허용(esModuleInterop 없이도 작동하나, 둘 다 true가 일반적)
    "strict": false, // TypeScript의 strict 모드 (엄격한 타입 검사) 비활성화(true면 null 체크, 타입 추론 등 매우 엄격해짐)
    "forceConsistentCasingInFileNames": true, // 파일 import 시 대소문자 일치 강제(ex: 실제 파일은 `MyComponent.tsx`인데 `myComponent`로 import하면 오류)
    "noEmit": true, // 실제로 JavaScript 파일(.js)로는 출력하지 않음 (빌드 결과물 생성 안 함)주로 타입 검사만 할 때 사용 (Next.js에서는 Babel이 컴파일하므로 TS가 emit할 필요 없음)
    "resolveJsonModule": true, // .json 파일도 import 가능하게 해줌 (ex: import config from './config.json')
    "isolatedModules": true, // 각 파일을 개별적인 모듈로 취급 (Next.js 등에서 필수 설정) Babel을 사용해 트랜스파일링할 때, TS 컴파일러가 전체 프로그램을 알 수 없기 때문에 필요
    "incremental": true, // 이전 컴파일 결과를 저장해서 다음 컴파일 시 속도 향상 (캐시 기반)
    "types": ["jest", "node"] // 글로벌 타입 정의할 라이브러리 지정(jest 테스트용, node.js 관련 타입 포함)
  },

  "include": [
    "**/*.ts",     // 모든 .ts 파일 포함
    "**/*.tsx",    // 모든 .tsx (React 컴포넌트 등) 파일 포함
    "**/*.js",     // .js 파일도 포함 (allowJs: true일 경우 필요)
    "**/*.jsx",    // .jsx 파일도 포함
    "next-env.d.ts" // Next.js에서 자동 생성되는 타입 정의 포함
  ],

  "exclude": [
    "node_modules", // 의존성 폴더 제외
    "jest.config.ts", // Jest 설정 파일 제외
    "src/**/*.spec.ts", // 테스트 파일 제외
    "src/**/*.test.ts"  // 테스트 파일 제외
  ]
}

그 외 추천 옵션

{
 "compilerOptions": {
	"strict": true,
	"strictNullChecks": true,       // null/undefined에 대한 엄격한 체크
	"noImplicitAny": true,          // 타입 추론 시 any 방지
	"strictFunctionTypes": true,    // 함수 타입 더 엄격히 체크
	"noUnusedLocals": true,      // 선언만 되고 사용되지 않는 변수 경고
	"noUnusedParameters": true   // 사용되지 않는 함수 파라미터 경고
	"noFallthroughCasesInSwitch": true //switch문 더 엄격하게 관리. break를 빠뜨리는 실수 방지해줌
	"exactOptionalPropertyTypes": true //optional 프로퍼티에서 "없음"과 "undefined"를 구분
	"useUnknownInCatchVariables": true // 기본적으로 catch (e)는 any 타입인데, 이걸 unknown으로 바꿔서 타입 단언을 유도
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "removeComments": true, //컴파일시 주석제거 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 경고
  "noImplicitReturns": true, //함수에서 return 빼먹으면 경고
 }
}

tsconfig.json은 여러 버전으로 분리해서 목적에 맞게 설정을 관리할 수 있다.

공식적으로 파일 이름에 제약은 없고, 관례적으로 사용되는 이름에 대해 알아보자!

이렇게 작성해 놓은 설정들은 tsc -p tsconfig.build.json 으로 빌드할 때 지정해주거나 빌드 스크립트에 등록해두면 된다.

{
  "scripts": {
    "build": "tsc -p tsconfig.build.json"
  }
}

📚 ESLint

설정이 단순하거나 팀 내 포맷 일관성이 중요할 때(주석사용 불가능, 정적 구조) → .eslintrc.json

조건부 설정, 환경별 분기, 동적 import가 필요할 때(js사용 가능) → .eslintrc.js

eslintrc.json

nx기반 모노레포 루트디렉토리