[React/리액트] TS 초기세팅 - tsconfig.json 주요 옵션들 및 tsconfig.node.json

tsconfig.json 파일

tsconfig.json 은 타입스크립트 프로젝트 컴파일에 필요한 루트 파일과 컴파일러 옵션을 지정해주는 역할을 한다. 

해당 파일은 루트 디렉토리에 위치하여 vscode 는 현재 프로젝트가 타입스크립트를 기반으로 진행되고 있음을 인식할 수 있다. 

 

최상위 속성

파일 내 가장 상위에 위치한 속성이다. 

compilerOptions

컴파일에 관련된 설정을 할 수 있다. 

옵션이 정말 많이 존재하기에... 

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

TypeScript 한글 문서

해당 사이트에 정리가 잘 되어있다. 

 

중요한 옵션들만 몇가지 살펴보면

target

ECMAScript 대상 버전을 지정한다. 어떤 버전의 자바스크립트로 컴파일할 지 결정하는 옵션이다. 

ES3 부터 ES6, ES2020 까지 다양하게 설정 가능하다. 

ESNext 로 작성할 경우 가장 최신 버전으로 설정된다. 

공식 문서에서 추천하고 있는 값은 ES2016 이다

lib

컴파일에 필요한 라이브러리를 설정한다. 

설정하는 target 에 따라 기본 lib 설정이 달라진다. 

console이나 document 같은 객체를 사용하고 싶다면 dom 값을 추가해주어야 한다. 

 

jsx

tsx의 컴파일 결과 jsx 파일을 어떤 방식으로 지원할지 결정한다. 

 

module

모듈 시스템을 설정한다. 

공식 문서에서 추천하고 있는 설정은 commonjs 이다. 

 

esModuleInterop

Es2016 과 commonjs 의 export 방식이 다르다. 

이에 상호 운용성을 제공하도록 설정한다. 

 

forceConsistentCasingInFileNames

파일의 대소문자를 판별하는 설정이다. 

 

strict

엄격한 타입 검사 옵션을 설정한다. 

true 로 설정해주면 된다. (아마 기본값으로 설정되어 있을 것이다!)

 

 

skipLibCheck

선언 파일(d.ts)의 컴파일을 건너뜀을 설정한다. 

컴파일 시간을 줄일 수 있다.

 

extends

다른 tsconfig.json 파일의 속성을 가져와 사용할 수 있도록 한다. 

//configs/base.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

//tsconfig.json
{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

 

include

컴파일할 파일들을 지정하는 속성이다. 

와일드카드 패턴으로 작성할 수 있다. 

exclude 속성보다 우선도가 낮아, include 속성에 포함되어 있더라도 exclude 속성에 값을 설정하게 되면 컴파일에서 제외된다. 

"include": ["src", "**/*.tsx"],

 

** : 해당 디렉토리의 하위 모든 디렉토리

* : 해당 디렉토리에 포함되는 모든 파일

exclude

컴파일에서 제외할 파일들을 지정한다. 

 

files

컴파일할 파일들을 개별적으로 지정한다. 

exclude 보다 우선도가 높아, exclude 속성으로 작성하였어도 files 속성에 값을 설정하게 되면 컴파일이 진행된다. 

files 속성이 생략되면 include 와 exclude 를 바탕으로 컴파일이 진행된다. 

 

 

tsconfig.node.json와 tsconfig.app.json

vite을 통해 프로젝트를 생성하면 tsconfig.json, tsconfig.app.json, tsconfig.node.json 총 3개의 파일이 생성된다. 

 

tsconfig.json이 웹 브라우저에 적용되는 필수적인 컴파일러 설정이라면,

tsconfig.node.json은 Node.js 를 대상으로 하는 컴파일 설정이다. 

tsconfig.app.json은 src 하위 애플리케이션의 소스 코드를 대상으로 하는 컴파일러 설정이다.

모두 tsconfig.json 을 기반으로 하며 추가적으로 재설정할 수 있다.

 

각 파일을 용도에 맞게 작성하여 서버와 클라이언트에서의 컴파일을 설정할 수 있다. 

물론... 프로젝트의 규모가 그렇게 크지 않을 경우 tsconfig.json 만 잘 설정해주어도 상관없다 ! 

---

 

js로 코딩을 할 때도 그렇고, 항상 프로젝트를 설치하면 추가 설정은 하지 않은 채로 개발을 진행하곤 하였다. 

물론 프로젝트가 잘 돌아갈 수 있도록 최적의 기본값(?)에 맞추어 초기 설정이 되어 있겠지만, 해당 파일이 어떤 역할을 하는지 정도는 알아야겠다고 생각하였다. 

특히 타입스크립트의 경우 JS로의 컴파일이 중요하기 때문에 조금 더 신경써야 한다고 생각했다. 

 

이번에 진행하는 프로젝트에서 초기 세팅을 해보았는데, 해당 부분에 대해 아무 신경도 안 쓰고 있다가 코드 리뷰를 보고 조금 당황을 했다 ㅎ...

가벼운 토이프로젝트임에도 tsconfig.json 파일이 3개나 존재하였고, tsconfig.json 이 아닌 tsconfig.node.json 에 더 많은 옵션이 설정되어 있었다. 

 

아직 숙지해야할 옵션들이 너무나도 많지만, 더 나은 개발 환경과 오류를 줄이고, 컴파일 속도를 조금이라도 높이기 위해서

잘 공부해야겠다 생각한다. 

 

 

참고)

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-tsconfigjson-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-%EC%B4%9D%EC%A0%95%EB%A6%AC

📘 타입스크립트 컴파일 설정 - tsconfig 옵션 총정리

https://velog.io/@sooran/tsconfig.json-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0#%EC%B5%9C%EC%83%81%EC%9C%84-%EC%86%8D%EC%84%B1

{ tsconfig.json } 제대로 알고 사용하기

https://typescript-kr.github.io/pages/tsconfig.json.html

TypeScript 한글 문서