안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.
이번 포스팅에서는 타입스크립트 초기 세팅할 때 추가한 tsconfig.json에 있는 key의 의미에 대해 공유하겠습니다.
사실, 저는 package.json이나, tsconfig.json을 100% 이해하고 있지 않습니다.
그러나 그런 상태로 개발을 하다보니 가끔 막힐 때가 있더라구요..
그래서 타입스크립트 공부를 할 때는 '제대로 짚고 넘어가자!'라는 마음이 생겼어요.
이전 포스팅에서 타입스크립트 초기 세팅에 대해 다뤘었는데요.
초기 세팅할 때 tsconfig.json을 작성해주었습니다.
[타입스크립트 TypeScript] 프로젝트 초기 설정 / 프로젝트 초기 세팅 / 프로젝트 만들기 / 'npm --y' 의
안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 타입스크립트로 개발을 할 때 프로젝트 초기 세팅하는 방법에 대해 공유하겠습니다. 1. VSCode를 열고 프로젝트
anerim.tistory.com
지금부터, 타입스크립트 초기 세팅 시 작성한 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의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미입니다.