TypeScript - tsconfig.json: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! ? 오늘 우리는 TypeScript와 그의 충실한 동반자 tsconfig.json 파일의 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 작성한 적이 없다면 걱정하지 마세요 - 저는 당신의 친절한 안내자가 되어, 단계별로 이를 함께 공략할 것입니다.

TypeScript - tsconfig.json

tsconfig.json이란?

들어가기 전에, tsconfig.json이 실제로 무엇인지 이야기해보겠습니다. TypeScript 프로젝트를 짓는 것을 상상해보세요. tsconfig.json 파일은 당신의 집(TypeScript 프로젝트)의 설계도입니다. 이 파일은 TypeScript에게 프로젝트를 어떻게 짓고 싶은지, 어떤 기능을 사용하고 싶은지, 규칙을 얼마나 엄격하게 지키고 싶은지를 알려줍니다.

tsconfig.json 파일의 기본 구조

이제 tsconfig.json 파일의 기본 구조를 살펴보겠습니다. 이 파일은 JSON 포맷으로 작성되었으며, 인간과 컴퓨터 모두가 쉽게 이해할 수 있는 방식으로 데이터를 조직합니다.

여기 간단한 예제가 있습니다:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

이를 구성해보겠습니다:

전체 파일은 중괄호 {}로 둘러싸여 있습니다.
내부에는 compilerOptions, include, exclude와 같은 다양한 섹션이 있습니다.
각 섹션은 특정 설정을 포함하고 있습니다.

CompilerOptions

compilerOptions 섹션은 마법이 일어나는 곳입니다. 이 섹션은 TypeScript 컴파일러에게 코드를 어떻게 준비해야 하는지 알려줍니다. 몇 가지 일반적인 옵션을 살펴보겠습니다:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}

이 각각의 옵션을 설명해보겠습니다:

target: TypeScript가 어떤 버전의 JavaScript로 컴파일해야 하는지 알려줍니다. "es5"는 브라우저에서 널리 지원됩니다.
module: 사용할 모듈 시스템을 지정합니다. "commonjs"는 Node.js 프로젝트에서 흔히 사용됩니다.
strict: true로 설정하면 strict type-checking 옵션을 활성화합니다.
outDir: TypeScript가 컴파일된 JavaScript 파일을 넣을 곳입니다.
rootDir: TypeScript가 소스 파일을 찾아야 할 곳입니다.
sourceMap: true로 설정하면 디버깅에 유용한 소스 맵 파일을 생성합니다.

Include와 Exclude

include와 exclude 섹션은 TypeScript가 어떤 파일을 컴파일하고 무시해야 하는지 알려줍니다:

{
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

include: TypeScript가 src 폴더와 그 하위 폴더의 모든 파일을 컴파일하도록 합니다.
exclude: TypeScript가 node_modules 폴더와 .spec.ts로 끝나는 파일을 무시하도록 합니다. (일반적으로 테스트 파일에 사용됩니다.)

일반 시나리오와 구성

이제 기본 사항을 이해했으므로, 일반적으로 마주치게 되는 시나리오와 tsconfig.json을 어떻게 구성할 수 있는지 살펴보겠습니다.

시나리오 1: React 프로젝트

React 프로젝트를 작업 중이라면 다음과 같은 구성을 사용할 수 있습니다:

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

이 구성은 React 개발을 최적화합니다. JSX를 사용할 수 있도록 하고, strict type-checking을 활성화하며, 일반적인 React 프로젝트 구조에 맞게 모듈 해결을 설정합니다.

시나리오 2: Node.js 백엔드 프로젝트

Node.js 백엔드 프로젝트의 경우 다음과 같은 구성을 사용할 수 있습니다:

{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

이 구성은 Node.js 백엔드 프로젝트에 적합합니다. JavaScript의 더 새로운 버전(ES2018)으로 컴파일하고, CommonJS 모듈을 사용하며, 입력과 출력 디렉토리를 설정합니다.

유용한 tsconfig.json 옵션

다음은 사용하고 싶을 수 있는 몇 가지 유용한 tsconfig.json 옵션의 표입니다:

옵션	설명
`noImplicitAny`	암시적인 'any' 유형의 표현식과 선언에 대해 오류를 발생시킵니다
`strictNullChecks`	엄격한 null 검사를 활성화합니다
`strictFunctionTypes`	함수 유형에 대해 엄격한 검사를 활성화합니다
`strictBindCallApply`	함수의 'bind', 'call', 'apply' 메서드에 대해 엄격하게 검사합니다
`noUnusedLocals`	사용되지 않은 지역 변수에 대해 오류를 보고합니다
`noUnusedParameters`	사용되지 않은 매개변수에 대해 오류를 보고합니다
`noImplicitReturns`	모든 코드 경로에서 함수가 값을 반환하지 않을 때 오류를 보고합니다
`noFallthroughCasesInSwitch`	switch 문의 fallthrough 케이스에 대해 오류를 보고합니다

기억하시기 바랍니다, TypeScript 공식 문서(tsconfig 공식 문서)에 가면 옵션과 그 설명에 대한 완전한 목록을 찾을 수 있습니다.

결론

이제 tsconfig.json의 땅을 거쳐 여정을 마쳤습니다. 기본 구조에서 일반 시나리오와 유용한 옵션까지, tsconfig.json은 TypeScript 프로젝트의 스위스 아ーノ이가 되었습니다. 매우 다재다능하며, 특정 필요에 맞게 맞춤화할 수 있습니다.

TypeScript 여정을 계속하면서, 다양한 구성을 실험해보지 마세요. 각 프로젝트는 약간 다른 설정을 요구할 수 있으며, 그것은 괜찮습니다! tsconfig.json을 더 많이 사용할수록, 그 힘에 대해 더 익숙해질 것입니다.

계속 코딩하고, 배우고, 가장 중요한 것은 즐기세요! 다음 번에 다시 만날 때까지, 당신의 타입이 강하고 오류가 적기를 바랍니다. 행복한 TypeScript를! ??‍??‍?

Credits: Image by storyset

이전 튜토리얼:

TypeScript - 박스링과 언박스링

다음 튜토리얼:

JavaScript에서 TypeScript로