📚 Reference

• 참고 자료 1

📜 Chapter

tsconfig.app.json, tsconfig.json, tsconfig.node.json

• tsconfig.json
  • 공통적인 설정을 정의하는 파일이다.
  • 주로 빌드 설정, 전역 옵션, 참조 파일 목록 등을 포함한다.
• tsconfig.app.json
  • 주로 브라우저와 관련된 옵션을 포함한다. JSX 설정, 라이브러리, DOM 관련 옵션을 설정할 수 있다.
• tsconfig.node.json
  • Node.js와 관련된 옵션을 포함한다.
• 브라우저 환경과 Node.js 환경은 서로 사용하는 타입, 모듈 시스템이 다르기 때문에 설정을 분리하는 것이 좋다.
• 예를 들면, 브라우저에서는 DOM관련 API가 필요하지만, Node 환경에서는 필요하지 않다. 반면, Node.js에서 사용하는 내장 모듈은 브라우저에서 사용할 수 없다.
• 따라서 tsconfig 파일을 세 가지로 나누는 이유는 프로젝트 환경에 따른 TypeScript 설정을 분리하여 더 유연하게 관리하기 위함이다.
• tsconfig.node.json과 tsconfig.app.json은 환경 별로 그에 맞는 컴파일러 옵션을 제공하기 위해 나뉘어져 있는 것이다.

tsconfig.json

• tsconfig.json

• 예시 1

  {
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "esModuleInterop": true
    },
    "exclude": ["node_modules"],
    "references": [
      { "path": "./tsconfig.app.json" },
      { "path": "./tsconfig.node.json" }
    ]
  }
  

  • references
    • tsconfig.json 파일이 tsconfig.node.json과 tsconfig.app.json을 참조하고 있음을 나타낸다.
    • TypeScript 프로젝트 참조를 통해 변경된 파일만 빌드할 수 있다. 이 옵션을 통해 전체 프로젝트를 다시 컴파일하는 대신 변경된 모듈만 빠르게 업데이트하여 빌드 시간을 단축할 수 있다.