0Pricing
TypeScript Academy · 강의

TypeScript를 JavaScript로 컴파일하기

TypeScript 컴파일러와 그 출력 결과를 이해합니다.

TypeScript를 JavaScript로 컴파일하기은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

TypeScript는 Node.js나 브라우저에서 직접 실행할 수 없습니다. 먼저 JavaScript로 컴파일해야 합니다. 이 단원에서는 TypeScript 컴파일러의 작동 방식을 알아봅니다.

TypeScript 컴파일러 설치하기

프로젝트에 개발 의존성으로 TypeScript를 설치하십시오. 설치가 끝나면 로컬 스크립트에서 `tsc` 명령을 사용할 수 있습니다.
npm install --save-dev typescript
npx tsc --version

첫 번째 tsc 컴파일

`tsc hello.ts`를 실행하여 단일 파일을 컴파일하십시오. 모든 타입이 제거된 `hello.js`가 같은 디렉터리에 생성됩니다.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: 프로젝트 설정

실제 프로젝트에는 `tsconfig.json`이 필요합니다. `tsc --init`을 실행하여 생성하십시오. 이 파일에서 대상, 모듈 형식, 엄격성, 출력 디렉터리 등을 제어합니다.
npx tsc --init
// Creates tsconfig.json with defaults and comments

주요 tsconfig 옵션

가장 중요한 tsconfig 필드는 target(ES 버전 출력), module(모듈 시스템), outDir(출력 폴더), strict(모든 엄격한 검사 활성화)입니다.
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

tsc --watch를 사용한 감시 모드

`tsc --watch`를 실행하면 TypeScript 파일을 저장할 때마다 자동으로 다시 컴파일됩니다. 이를 통해 개발 작업 흐름이 빨라집니다.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: 파일을 생성하지 않고 타입 검사하기

`noEmit` 플래그는 출력 파일을 작성하지 않고 타입 검사기만 실행합니다. 실제 컴파일에 Vite나 esbuild 같은 번들러를 사용하는 CI 파이프라인에서 유용합니다.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

더 빠른 대안: ts-node와 tsx

개발 중에는 별도의 컴파일 단계 없이 `ts-node` 또는 더 빠른 `tsx` 도구를 사용하여 TypeScript를 직접 실행할 수 있습니다.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

디버깅을 위한 소스 맵

`sourceMap: true`를 활성화하면 브라우저 개발자 도구와 Node.js 디버거가 컴파일된 JS의 줄을 원본 TypeScript 소스에 매핑할 수 있습니다.
{ "compilerOptions": { "sourceMap": true } }

선언 파일(.d.ts)

`declaration: true`를 사용하면 컴파일러가 `.d.ts` 파일도 생성합니다. 이를 통해 다른 TypeScript 프로젝트에서 전체 타입 정보와 함께 라이브러리를 사용할 수 있습니다.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

컴파일러 오류가 기본적으로 출력을 차단하지 않음

기본적으로 TypeScript에 타입 오류가 있어도 `tsc`는 JavaScript를 출력하고 0이 아닌 코드로 종료합니다. 오류가 발생했을 때 출력을 중지하려면 `noEmitOnError: true`를 사용하십시오.
{ "compilerOptions": { "noEmitOnError": true } }

빠른 확인

`tsc --noEmit`을 실행하면 어떤 작업이 수행될까요?

복습

TypeScript 컴파일러는 .ts 파일을 JavaScript로 변환합니다. tsconfig.json으로 설정하고, 개발에는 --watch를 사용하며, 타입 검사만 수행하려면 --noEmit을 사용하고, TypeScript를 직접 실행하려면 ts-node/tsx를 사용하십시오.

자주 묻는 질문

“TypeScript를 JavaScript로 컴파일하기” 강의는 무료인가요?

네 — “TypeScript를 JavaScript로 컴파일하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“TypeScript를 JavaScript로 컴파일하기”에서 뭘 배우나요?

TypeScript 컴파일러와 그 출력 결과를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“TypeScript를 JavaScript로 컴파일하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. JavaScript의 문제점: 런타임 버그
  2. TypeScript가 JavaScript에 추가하는 것
  3. TypeScript를 JavaScript로 컴파일하기
  4. 프로젝트에서 TypeScript를 사용할 시점
← TypeScript Academy(으)로 돌아가기