[타입스크립트 TypeScript] tsconfig.json 의미

 

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 타입스크립트 초기 세팅할 때 추가한 tsconfig.json에 있는 key의 의미에 대해 공유하겠습니다.

사실, 저는 package.json이나, tsconfig.json을 100% 이해하고 있지 않습니다.

그러나 그런 상태로 개발을 하다보니 가끔 막힐 때가 있더라구요..

그래서 타입스크립트 공부를 할 때는 '제대로 짚고 넘어가자!'라는 마음이 생겼어요.

 

이전 포스팅에서 타입스크립트 초기 세팅에 대해 다뤘었는데요.

초기 세팅할 때 tsconfig.json을 작성해주었습니다.

[타입스크립트 TypeScript] 프로젝트 초기 설정 / 프로젝트 초기 세팅 / 프로젝트 만들기 / 'npm --y' 의

 

지금부터, 타입스크립트 초기 세팅 시 작성한 tsconfig.json 파일의 내용을 파헤쳐보겠습니다!

  tsconfig.json 확인

{ 
	"compilerOptions": { // 1
		"module": "commonjs", // 2
		"esModuleInterop": true, // 3
		"target": "ES5", // 4
		"moduleResolution": "node", // 5
		"outDir": "dist", // 6
		"baseUrl": ".", // 7
		"sourceMap": true, // 8
		"downlevelIteration": true, // 9 
		"noImplicitAny": false, // 10
		"paths": {"*": [":node_modules/*"]} // 11 
	}, 
	"include": ["src/**/*"] // 12
}

 

 

 

  tsconfig.json 키의 의미

주석으로 달아놓으려고 하다가 그게 더 가독성이 떨어지는 것 같더라구요.

키마다 주석으로 번호를 매겼습니다. 위에서부터 한 줄 한 줄 적어볼게요.

 

 

1. compilerOptions

tsc 명령 형식에서 사용할 옵션들을 의미합니다. 즉, 타입스크립트를 컴파일러 할 때 사용되는 옵션들을 말하는 거죠.

 

 

2. module

• 웹 브라우저와 NodeJS는 동작하는 방식이 달라서, 자바스크립트 코드 역시 각각 다르게 실행이 됩니다.
• module 키로 동작 대상 플랫폼이 웹 브라우저인지 NodeJS인지 파악하여 그에 맞는 모듈 방식으로 컴파일하기 위해 설정합니다.
• 키값 종류
  1) 웹 브라우저에서 동작할 때 : amd 값 사용
  - asynchronous module definition의 약자이며, '비동기적 모듈 선언'을 말합니다.
  - commonjs의 단점을 보완하기 위해 탄생한 방식입니다.
  - 비동기적으로 필요한 파일을 다운로드 하는 방식입니다.
  - client(브라우저 환경)에서 외부 모듈을 가져올 때 유리합니다.
  
  2) NodeJS에서 동작할 때 : commonjs 값 사용
  - 모든 모듈이 로컬에 다운로드가 된 이후에 실행하는 방식을 말합니다.
  - server 환경에서 외부 모듈을 가져올 때 유일한 방식입니다.
  - 단점은 모든 모듈을 다운로드할 때까지 페이지 동작을 할 수 없다는 것입니다.

 

 

3. esModuleInterop

• 해당 키를 이용하면, es6모듈 사양에 따라 commonjs 모듈을 가져올 수 있습니다.
• 즉, AMD 방식으로 구현된 내용을 commonjs 방식으로 컴파일이 가능해집니다.

 

 

4. target

• 어떤 버전의 자바스크립트로 트랜스파일 해줄지 정하는 키입니다.
• 보통은 es5를 키값으로 설정하나, 최신 버전의 NodeJS를 사용한다면 es6로 설정할 수 있습니다.

 

 

5. modulResolution

• '모듈 해석'이라는 뜻입니다.
• 각 코드별 import가 어떤 모듈을 가리키는지 컴파일러가 해석하는 과정을 말합니다.
• 2번 module 키의 값에 따라 들어가는 내용이 달라집니다.
  - module의 키값이 commonjs라면 NodeJS에서 동작하는 것을 의미하므로, 'node'로 키값을 설정합니다.
  - module의 키 값이 amd라면 'classic'으로 키값을 설정합니다.

 

 

6. outDir

• 컴파일 후 생성되는 js파일이 생성될 폴더명을 담아주는 키입니다.
• 이전 포스팅에서 컴파일 후 dist폴더 안에 js파일이 생성되는 것을 확인할 수 있었습니다.
• baseUrl 설정값을 기준으로 했을 때 하위 디렉토리를 말합니다.

 

 

7. baseUrl

• outDir처럼 컴파일 후 생성되는 자바스크립트 파일을 저장하는 디렉토리를 설정하는 키입니다.
• 사이트가 존재하는 도메인에 상대적인 기본 경로를 지정합니다.
• 대개 현재 디렉터리를 의미하는 "."로 설정합니다.

 

 

8. sourceMap

• 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능을 합니다.
• 키값이 true으면 tsc한 이후에 .js 파일 이외에도 추가적으로 .js.map 파일이 생성됩니다.
• 소스맵파일은 주로 디버깅할 때 사용이 되는데요.
  원본 코드를 특정한 알고리즘으로 인코딩한 후에 특정 키워드로 맵핑을 시켜놓고
  => 나중에 브라우저에서는 난독화된 코드를 그대로 디코딩하여 복원할 수 있습니다.

 

 

9. downlevelIteration

• generator 라는 타입스크립트 구문을 사용하려면 해당 키의 값이 반드시 true로 설정되어 있어야 합니다.
• 'ES5'또는 'ES3'를 대상으로 할 때 'for-of', 스프레드 및 디스트럭쳐링(구조분해할당)에서 이터러블(반복 가능한 객체)을 완벽하게 지원하기 위해 사용합니다.

 

 

10. noImplicitAny

• noImplicitAny는 any 암묵적으로 타입을 가지는 것을 허락하지 않습니다.
• false로 지정하면 타입을 지정하지 않더라도 문제로 인식하지 않습니다.
• true로 지정하면 타입이 any로 추론되면 에러를 발생합니다.

 

 

11. paths

• 소스 파일의 import문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정하는 키입니다.
• node_modules/*가 키값에 있는 이유는
  import문이 찾아야 하는 소스가 외부패키지이면, node_module 디렉터리에서 찾아야 하기 때문입니다.

 

 

12. include

src/**/*은 src디렉터리 + src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미입니다.