카테고리 없음

TypeScript 개발 환경 설정하기 – VSCode, tsconfig 설정 가이드 (2강)

mystory55776 2025. 5. 14. 20:37

TypeScript 개발 환경을 설정해야 하는 이유

TypeScript는 자바스크립트를 기반으로 하지만, 정적 타입과 컴파일 기능 등으로 인해 개발 환경을 어느 정도 구성해주어야 효율적으로 사용할 수 있습니다. 특히 VSCode(Visual Studio Code)는 TypeScript와 가장 궁합이 잘 맞는 에디터로, 타입 지원과 자동 완성 기능이 강력하게 동작합니다.

이 글에서는 TypeScript 개발 환경을 설정하는 방법을 단계별로 설명하고, 핵심 설정 파일인 tsconfig.json의 주요 옵션도 함께 살펴보겠습니다.

1. VSCode 설치와 추천 확장 기능

TypeScript 개발을 시작하려면 먼저 VSCode를 설치해야 합니다. 설치 후에는 다음과 같은 확장 기능을 추가하면 개발 생산성을 크게 높일 수 있습니다.

  • ESLint: 코드 스타일을 통일하고 오류를 사전에 방지할 수 있습니다.
  • Prettier: 코드 포매팅을 자동으로 맞춰줍니다.
  • TypeScript Hero: 자동 임포트와 타입 정보 탐색을 편리하게 해줍니다.

VSCode는 기본적으로 TypeScript를 내장하고 있기 때문에 별도로 플러그인을 설치하지 않아도 타입 검사 및 컴파일 기능을 제공합니다.

2. Node.js와 TypeScript 설치

TypeScript는 Node.js 환경에서 작동하기 때문에, 먼저 Node.js를 설치해야 합니다. 설치 후 터미널에서 다음 명령어를 입력해 TypeScript를 전역 설치할 수 있습니다. 

npm install -g typescript

설치가 완료되면 tsc --version 명령어로 설치 여부를 확인할 수 있습니다.

3. TypeScript 프로젝트 초기화

TypeScript 프로젝트를 시작하려면 원하는 폴더에서 아래 명령어를 실행하여 초기화합니다. 

tsc --init

이 명령은 tsconfig.json이라는 설정 파일을 생성합니다. 이 파일은 TypeScript 컴파일러에게 어떤 규칙으로 코드를 변환할지 알려주는 역할을 합니다.

4. tsconfig.json 주요 설정 옵션 설명

tsconfig.json에는 수많은 설정 항목이 있지만, 초보자라면 아래 항목들만 제대로 이해해도 충분합니다.

  • "target": 출력될 자바스크립트의 버전을 설정합니다. 예: "ES6"
  • "module": 모듈 시스템을 지정합니다. 예: "commonjs", "esnext"
  • "strict": 엄격한 타입 검사 여부를 설정합니다. true로 설정하는 것을 권장합니다.
  • "outDir": 컴파일된 자바스크립트 파일의 출력 폴더를 지정합니다.
  • "rootDir": 소스 파일이 위치한 루트 디렉토리를 설정합니다.

예시 설정: 

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

이 설정대로라면, src 폴더 내의 TypeScript 파일을 dist 폴더에 자바스크립트로 변환하게 됩니다.

5. 컴파일 및 실행 방법

코드 작성이 끝났다면, 터미널에서 아래 명령어로 컴파일을 실행할 수 있습니다. 

tsc

tsconfig.json에 정의된 설정에 따라 모든 .ts 파일이 컴파일되어 .js로 변환됩니다. 변환된 자바스크립트 파일은 Node.js 또는 브라우저에서 실행할 수 있습니다.

마무리: TypeScript를 위한 안정적인 개발 환경 완성

이번 강의에서는 TypeScript 개발을 위한 환경 설정 방법을 배웠습니다. VSCode의 설치부터, Node.js 환경 구성, 그리고 핵심 설정 파일인 tsconfig.json의 기본 옵션까지 살펴보았습니다.

이제 여러분은 TypeScript 코드를 안정적으로 작성하고, 컴파일하여 실행할 수 있는 준비가 완료된 셈입니다. 다음 강의에서는 변수 선언, 타입 지정 등 TypeScript의 기초 문법을 본격적으로 시작해보겠습니다.

계속해서 학습해 나가며, 실무에서 자신 있게 TypeScript를 사용할 수 있는 실력을 쌓아보세요!