TypeScript 완전정복 2화: 개발 환경 설치 가이드

TypeScript 완전정복 2화입니다. Node.js, npm, VS Code, TypeScript 컴파일러의 역할을 이해하고, 프로젝트 초기화, TypeScript 설치, 첫 hello.ts 작성, 컴파일, 실행, 자동 컴파일, 자주 발생하는 설치 오류 해결까지 정리했습니다.

1. 오늘의 미션

이번 편을 마치면 다음 작업을 직접 할 수 있습니다.

* Node.js가 왜 필요한지 설명할 수 있습니다.* Node.js와 npm이 정상적으로 설치됐는지 확인할 수 있습니다.* VS Code에서 TypeScript 파일을 만들 수 있습니다.* TypeScript 컴파일러를 설치할 수 있습니다.* `.ts` 파일을 `.js` 파일로 변환할 수 있습니다.* 생성된 JavaScript 파일을 Node.js로 실행할 수 있습니다.* 자주 발생하는 설치 오류를 해결할 수 있습니다.

오늘의 최종 목표는 다음 명령어를 성공적으로 실행하는 것입니다.

npx tsc hello.ts
node hello.js

화면에 아래 문장이 나타나면 미션 성공입니다.

Hello, TypeScript!

2. TypeScript 개발 환경의 등장인물

본격적으로 설치하기 전에 각 도구가 무슨 역할을 하는지 알아보겠습니다.

처음 개발 환경을 준비할 때 가장 혼란스러운 부분은 이것입니다.

“Node.js를 설치했는데 npm은 왜 나오고, TypeScript는 또 왜 설치해야 하죠?”

각자의 역할을 분리해서 보면 어렵지 않습니다.

Node.js

Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있게 해주는 실행 환경입니다.

원래 JavaScript는 웹 브라우저 안에서 주로 실행됐습니다.

console.log("브라우저 안에서 실행 중");

Node.js를 설치하면 터미널에서도 JavaScript 파일을 실행할 수 있습니다.

node app.js

Node.js는 TypeScript 자체를 실행하는 도구는 아닙니다.

TypeScript를 JavaScript로 변환한 뒤, 변환된 JavaScript 파일을 실행하는 역할을 합니다.

npm

npm은 Node.js의 패키지 관리자입니다.

개발에 필요한 도구와 라이브러리를 설치해 줍니다.

예를 들어 TypeScript 컴파일러를 설치할 때 npm을 사용합니다.

npm install typescript

npm을 거대한 개발 도구 상점이라고 생각하면 이해하기 쉽습니다.

우리는 npm 상점에서 TypeScript 컴파일러를 가져오게 됩니다.

Node.js를 설치하면 npm도 일반적으로 함께 설치됩니다.

따라서 npm을 별도로 설치할 필요는 없습니다.

VS Code

VS Code는 코드를 작성하는 편집기입니다.

메모장에서도 TypeScript 코드를 작성할 수 있지만, 꽤 고된 수행이 시작됩니다.

VS Code는 다음과 같은 기능을 제공합니다.

* 코드 자동 완성* 타입 오류 표시* 문법 색상 구분* 파일과 폴더 관리* 내장 터미널* 코드 검색* 확장 프로그램* 코드 정렬

특히 TypeScript 지원 기능이 기본으로 잘 갖춰져 있어 입문자가 사용하기 좋습니다.

TypeScript 컴파일러

TypeScript 컴파일러는 `tsc`라고 부릅니다.

`tsc`는 TypeScript Compiler의 약자입니다.

TypeScript 코드를 검사하고 JavaScript 코드로 변환합니다.

hello.ts
   ↓
  tsc
   ↓
hello.js

`tsc`는 TypeScript 세계의 번역가입니다.

브라우저와 Node.js가 이해하지 못하는 TypeScript 코드를 JavaScript로 번역해 줍니다.

3. 개발 환경 조립도

오늘 만들 개발 환경의 전체 구조는 다음과 같습니다.

VS Code에서 TypeScript 작성
            ↓
TypeScript 컴파일러가 타입 검사
            ↓
JavaScript 파일로 변환
            ↓
Node.js가 JavaScript 실행
            ↓
터미널에 결과 출력

여기서 중요한 부분이 있습니다.

Node.js는 TypeScript를 직접 실행하지 않습니다.

다음 명령어는 기본적으로 동작하지 않습니다.

node hello.ts

Node.js는 `.js` 파일을 실행합니다.

따라서 TypeScript 코드는 먼저 JavaScript로 변환해야 합니다.

npx tsc hello.ts
node hello.js

이 흐름을 기억하면 앞으로 개발 환경을 이해하기가 훨씬 쉬워집니다.

4. 설치 전 점검하기

이미 Node.js나 VS Code가 설치되어 있을 수도 있습니다.

무작정 다시 설치하기 전에 터미널에서 확인해 보겠습니다.

Windows에서 터미널 열기

다음 방법 중 하나를 사용할 수 있습니다.

* 시작 메뉴에서 `PowerShell` 검색* 시작 메뉴에서 `명령 프롬프트` 검색* VS Code가 설치되어 있다면 상단 메뉴에서 `터미널 → 새 터미널`

macOS에서 터미널 열기

다음 방법 중 하나를 사용할 수 있습니다.

* Spotlight에서 `터미널` 검색* 응용 프로그램의 유틸리티 폴더에서 터미널 실행* VS Code에서 `터미널 → 새 터미널`

터미널을 열었다면 다음 명령어를 입력합니다.

node -v

정상적으로 설치되어 있다면 다음처럼 버전 번호가 표시됩니다.

vXX.XX.X

npm도 확인합니다.

npm -v

다음처럼 숫자가 표시되면 정상입니다.

XX.X.X

정확한 숫자는 설치 시점에 따라 다를 수 있습니다.

중요한 것은 오류 메시지 대신 버전 번호가 출력되는 것입니다.

개발 환경 출국 심사

터미널 심사관이 질문합니다.

Node.js 여권을 보여주세요.

우리는 다음 명령어를 제출합니다.

node -v

버전 번호가 출력되면 통과입니다.

npm 탑승권도 보여주세요.

이번에는 다음 명령어를 제출합니다.

npm -v

두 명령어 모두 숫자를 보여 준다면 이미 첫 번째 관문을 통과한 것입니다.

5. Node.js 설치하기

`node -v`를 입력했을 때 명령어를 찾을 수 없다는 메시지가 나온다면 Node.js를 설치해야 합니다.

Node.js 공식 웹사이트에 접속하면 일반적으로 여러 설치 버전을 볼 수 있습니다.

입문 단계에서는 보통 안정성을 중심으로 제공되는 LTS 버전을 선택하는 것이 좋습니다.

LTS는 Long Term Support의 약자입니다.

오랜 기간 안정적으로 지원되는 버전이라는 뜻입니다.

새 기능을 가장 먼저 체험하는 것보다 안정적인 개발 환경이 중요한 입문자에게 잘 어울립니다.

Windows 설치 과정

Node.js 설치 프로그램을 내려받아 실행합니다.

설치 화면에서는 기본 설정을 유지해도 충분합니다.

일반적인 과정은 다음과 같습니다.

설치 프로그램 실행
   ↓
사용권 계약 동의
   ↓
설치 경로 확인
   ↓
구성 요소 확인
   ↓
설치 진행
   ↓
설치 완료

설치가 끝나면 열려 있던 터미널을 닫고 새로 실행합니다.

그다음 다시 확인합니다.

node -v
npm -v

macOS 설치 과정

macOS에서도 공식 설치 프로그램을 사용할 수 있습니다.

설치 파일을 실행한 뒤 안내에 따라 진행합니다.

설치가 끝났다면 터미널을 새로 열고 다음 명령어를 입력합니다.

node -v
npm -v

Homebrew를 이미 사용하는 개발자라면 Homebrew로 설치할 수도 있지만, 처음 시작한다면 공식 설치 프로그램을 사용하는 방법이 가장 단순합니다.

지금은 설치 도구를 늘리는 것보다 TypeScript 실행에 집중하겠습니다.

6. 오류 구조대: node 명령어를 찾을 수 없습니다

Node.js를 설치했는데 다음과 비슷한 오류가 나타날 수 있습니다.

Windows

'node'은(는) 내부 또는 외부 명령,
실행할 수 있는 프로그램 또는 배치 파일이 아닙니다.

또는 PowerShell에서 다음과 같은 메시지가 나타날 수 있습니다.

node : 'node' 용어가 cmdlet 이름으로 인식되지 않습니다.

macOS

command not found: node

이 오류는 컴퓨터가 `node` 프로그램의 위치를 찾지 못한다는 의미입니다.

다음 순서로 확인합니다.

첫 번째 해결 방법

터미널을 완전히 닫고 새로 실행합니다.

설치 전에 열어 둔 터미널은 새 환경 정보를 반영하지 못할 수 있습니다.

두 번째 해결 방법

컴퓨터를 재시작합니다.

평범해 보이지만 환경 변수 반영 문제를 해결하는 데 효과적입니다.

세 번째 해결 방법

Node.js가 실제로 설치되었는지 확인합니다.

설치 프로그램을 다시 실행하고 설치 완료 여부를 확인합니다.

네 번째 해결 방법

Windows에서는 Node.js 설치 경로가 환경 변수 `PATH`에 등록됐는지 확인해야 할 수 있습니다.

일반적인 설치 경로는 다음과 비슷합니다.

C:\Program Files\nodejs\

다만 초보자라면 환경 변수를 직접 수정하기 전에 공식 설치 프로그램으로 다시 설치하는 편이 안전합니다.

7. VS Code 설치하기

Node.js가 준비됐다면 코드를 작성할 편집기를 설치합니다.

VS Code는 Visual Studio Code의 줄임말입니다.

이름에 Visual Studio가 들어가지만 Visual Studio와는 별개의 프로그램입니다.

입문자가 자주 혼동하는 부분입니다.

Visual Studio
Visual Studio Code

두 프로그램은 이름이 비슷한 친척처럼 보이지만 용도와 크기가 다릅니다.

이번 연재에서는 Visual Studio Code, 즉 VS Code를 사용합니다.

VS Code 설치 과정

운영체제에 맞는 설치 프로그램을 실행합니다.

Windows 설치 과정에서 다음 옵션이 보인다면 선택해 두면 편리합니다.

* PATH에 추가* 지원되는 파일 형식의 편집기로 등록* 탐색기 파일 메뉴에 Code로 열기 추가* 탐색기 디렉터리 메뉴에 Code로 열기 추가

설치가 끝나면 VS Code를 실행합니다.

처음 실행하면 약간 넓고 빈 화면이 나타납니다.

아직 프로젝트를 열지 않았기 때문입니다.

빈 우주처럼 보여도 정상입니다.

곧 TypeScript 기지가 들어설 예정입니다.

8. 작업 폴더 만들기

코드 파일을 아무 곳에 흩어 놓으면 나중에 찾기가 어렵습니다.

프로젝트 전용 폴더를 하나 만들겠습니다.

폴더 이름은 다음과 같이 정해 보겠습니다.

typescript-study

폴더 위치는 어디든 괜찮습니다.

예를 들어 바탕화면이나 문서 폴더 아래에 만들 수 있습니다.

폴더 구조는 아직 단순합니다.

typescript-study/

VS Code에서 다음 순서로 폴더를 엽니다.

파일
  ↓
폴더 열기
  ↓
typescript-study 선택

왼쪽 탐색기 영역에 폴더 이름이 보이면 성공입니다.

9. VS Code 터미널 열기

VS Code에는 터미널이 내장되어 있습니다.

따라서 코드를 작성하다가 별도의 터미널 프로그램으로 이동할 필요가 없습니다.

상단 메뉴에서 다음 항목을 선택합니다.

터미널 → 새 터미널

화면 아래쪽에 터미널이 나타납니다.

현재 경로가 `typescript-study` 폴더인지 확인합니다.

터미널 끝부분에 프로젝트 폴더 이름이 보인다면 정상입니다.

현재 폴더의 파일을 확인하려면 다음 명령어를 사용할 수 있습니다.

Windows PowerShell:

dir

macOS 또는 Linux:

ls

폴더가 비어 있다면 아직 아무 파일도 표시되지 않습니다.

깨끗한 출발입니다.

10. npm 프로젝트 초기화하기

이제 현재 폴더를 Node.js 프로젝트로 초기화하겠습니다.

터미널에서 다음 명령어를 실행합니다.

npm init -y

잠시 후 프로젝트 폴더에 새로운 파일이 만들어집니다.

package.json

현재 구조는 다음과 같습니다.

typescript-study/
└── package.json

package.json은 무엇일까?

`package.json`은 프로젝트의 신분증이자 장비 목록입니다.

프로젝트 이름, 버전, 설치한 패키지, 실행 명령어 등의 정보를 관리합니다.

파일을 열어 보면 다음과 비슷한 내용이 들어 있습니다.

{
  "name": "typescript-study",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

처음에는 낯선 항목이 많지만 지금 모든 내용을 외울 필요는 없습니다.

현재는 다음 한 문장만 기억하면 됩니다.

`package.json`은 이 폴더를 하나의 개발 프로젝트로 관리하기 위한 파일입니다.

npm init -y의 의미

다음 명령어를 나누어 보겠습니다.

npm init -y

`npm init`은 새로운 npm 프로젝트를 초기화합니다.

`-y`는 여러 질문에 기본값으로 자동 응답한다는 뜻입니다.

`-y`를 빼고 실행하면 npm이 프로젝트 이름, 버전, 설명 등을 하나씩 물어봅니다.

입문 단계에서는 기본값으로 빠르게 시작하겠습니다.

11. TypeScript 설치하기

이제 드디어 TypeScript 컴파일러를 설치합니다.

프로젝트 터미널에서 다음 명령어를 실행합니다.

npm install --save-dev typescript

짧게 작성할 수도 있습니다.

npm install -D typescript

두 명령어는 같은 목적을 가집니다.

설치가 완료되면 폴더에 새로운 변화가 생깁니다.

typescript-study/
├── node_modules/
├── package-lock.json
└── package.json

`package.json`에도 TypeScript 정보가 추가됩니다.

{
  "devDependencies": {
    "typescript": "^버전번호"
  }
}

실제 버전 번호는 설치 시점에 따라 다릅니다.

12. node_modules 정글 탐험

TypeScript를 하나 설치했는데 `node_modules` 폴더가 생겼습니다.

폴더를 열어 보면 수많은 파일이 보일 수 있습니다.

처음 본 입문자의 반응은 대개 비슷합니다.

“저는 TypeScript 하나만 설치했는데 왜 숲이 생겼죠?”

`node_modules`는 프로젝트에서 사용하는 패키지 파일이 저장되는 장소입니다.

라이브러리는 종종 다른 라이브러리를 필요로 합니다.

이런 연결 관계 때문에 설치된 패키지가 많아 보일 수 있습니다.

직접 수정할 필요는 없습니다.

`node_modules`는 개발 도구들이 사는 창고라고 생각하면 됩니다.

가끔 창고가 거대해지지만, 문을 열고 모든 상자를 검사할 필요는 없습니다.

13. package-lock.json은 무엇일까?

TypeScript를 설치하면 `package-lock.json`도 생성됩니다.

이 파일은 프로젝트에 설치된 패키지의 정확한 버전과 의존 관계를 기록합니다.

`package.json`이 다음처럼 대략적인 범위를 표현할 수 있다면,

{
  "typescript": "^버전번호"
}

`package-lock.json`은 실제 설치된 세부 버전을 더 정확하게 기록합니다.

팀원들이 같은 프로젝트를 설치할 때 가능한 한 동일한 패키지 구성을 재현하도록 돕습니다.

이 파일도 직접 수정할 필요는 거의 없습니다.

14. 왜 전역 설치보다 프로젝트 설치를 사용할까?

TypeScript 설치 방법을 검색하면 다음 명령어도 자주 보입니다.

npm install -g typescript

`-g`는 전역 설치를 의미합니다.

컴퓨터 전체에서 `tsc` 명령어를 사용할 수 있게 합니다.

편리하지만 프로젝트마다 필요한 TypeScript 버전이 다를 수 있다는 문제가 있습니다.

예를 들어 다음과 같은 상황이 생길 수 있습니다.

프로젝트 A: TypeScript 버전 5.x 필요
프로젝트 B: 다른 TypeScript 버전 사용
컴퓨터 전역: 또 다른 버전 설치

버전이 서로 어긋나면 예상하지 못한 문제가 생길 수 있습니다.

따라서 이 연재에서는 TypeScript를 프로젝트 내부에 설치합니다.

npm install -D typescript

그리고 `npx`를 이용해 실행합니다.

npx tsc

`npx`는 현재 프로젝트에 설치된 명령어를 찾아 실행해 줍니다.

npx는 무엇인가?

다음 명령어를 살펴보겠습니다.

npx tsc

여기서 `tsc`는 TypeScript 컴파일러입니다.

`npx`는 현재 프로젝트의 `node_modules` 안에서 `tsc`를 찾아 실행합니다.

간단히 말하면 다음과 같습니다.

“npx야, 이 프로젝트 창고 안에 있는 tsc를 찾아서 실행해 줘.”

이 방식을 사용하면 프로젝트마다 알맞은 TypeScript 버전을 사용할 수 있습니다.

15. TypeScript 설치 확인하기

TypeScript가 정상적으로 설치됐는지 확인해 보겠습니다.

npx tsc -v

정상적으로 설치됐다면 다음처럼 버전 번호가 표시됩니다.

Version X.X.X

버전 번호가 나타나면 TypeScript 컴파일러 준비가 완료된 것입니다.

오늘의 장비 현황을 확인해 보겠습니다.

Node.js             준비 완료
npm                 준비 완료
VS Code             준비 완료
TypeScript 컴파일러 준비 완료

이제 코드를 작성할 차례입니다.

16. 첫 번째 TypeScript 파일 만들기

VS Code 왼쪽 탐색기에서 새 파일을 만듭니다.

파일 이름은 다음과 같이 작성합니다.

hello.ts

현재 프로젝트 구조는 다음과 같습니다.

typescript-study/
├── node_modules/
├── hello.ts
├── package-lock.json
└── package.json

`hello.ts` 파일에 다음 코드를 작성합니다.

const message: string = "Hello, TypeScript!";

console.log(message);

저장 단축키를 사용해 파일을 저장합니다.

Windows:

Ctrl + S

macOS:

Command + S

코드 해부실

작성한 코드를 한 줄씩 살펴보겠습니다.

const message: string = "Hello, TypeScript!";

`const`는 값을 다시 대입하지 않을 변수를 선언합니다.

`message`는 변수 이름입니다.

`: string`은 이 변수에 문자열이 들어간다는 타입 정보입니다.

`"Hello, TypeScript!"`는 변수에 저장할 실제 문자열입니다.

다음 줄은 변수의 값을 출력합니다.

console.log(message);

아직 이 코드를 실행한 것은 아닙니다.

현재는 TypeScript 파일을 작성한 상태입니다.

17. 첫 번째 타입 오류 만나기

정상 코드를 바로 실행하기 전에 TypeScript가 정말 타입을 검사하는지 시험해 보겠습니다.

코드를 다음처럼 바꿉니다.

let score: number = 100;

score = "만점";

`"만점"` 부분에 빨간 밑줄이 표시될 수 있습니다.

마우스를 올려 보면 다음과 비슷한 오류가 나타납니다.

Type 'string' is not assignable to type 'number'.

번역하면 다음과 같습니다.

“숫자만 들어갈 수 있는 변수에 문자열을 넣었습니다.”

아직 컴파일 명령어도 실행하지 않았는데 VS Code가 오류를 알려줍니다.

VS Code가 TypeScript 언어 기능을 기본으로 지원하기 때문입니다.

이것이 TypeScript 개발 환경을 사용하는 첫 번째 즐거움입니다.

코드를 실행한 뒤 사고 현장을 조사하는 대신, 작성하는 순간 경고등이 켜집니다.

실험이 끝났다면 다시 정상 코드로 되돌립니다.

const message: string = "Hello, TypeScript!";

console.log(message);

18. TypeScript 파일 컴파일하기

이제 TypeScript 코드를 JavaScript로 변환하겠습니다.

터미널에서 다음 명령어를 실행합니다.

npx tsc hello.ts

명령어를 실행한 뒤 왼쪽 탐색기를 확인합니다.

새로운 파일이 생겼습니다.

hello.js

프로젝트 구조는 다음과 같이 변했습니다.

typescript-study/
├── node_modules/
├── hello.js
├── hello.ts
├── package-lock.json
└── package.json

`hello.js`를 열어 보겠습니다.

var message = "Hello, TypeScript!";

console.log(message);

TypeScript에 있던 타입 정보가 사라졌습니다.

: string

타입은 개발 단계에서 검사에 사용되고, JavaScript 파일로 변환될 때 제거됩니다.

19. 첫 번째 JavaScript 실행하기

생성된 JavaScript 파일을 Node.js로 실행합니다.

node hello.js

터미널에 다음 결과가 나타납니다.

Hello, TypeScript!

축하합니다.

첫 번째 TypeScript 프로그램이 JavaScript로 변환되어 실행됐습니다.

전체 과정은 다음과 같습니다.

hello.ts 작성
    ↓
npx tsc hello.ts
    ↓
hello.js 생성
    ↓
node hello.js
    ↓
결과 출력

오늘 우리가 만든 것은 짧은 한 줄짜리 프로그램이지만, 이 과정은 규모가 큰 TypeScript 프로젝트에서도 기본적으로 동일합니다.

20. 첫 컴파일 의식

개발자 마을의 전통에 따라 첫 컴파일 과정을 다시 낭독해 보겠습니다.

나는 hello.ts를 작성했다.

npx tsc hello.ts

컴파일러가 타입을 검사했다.

hello.js가 탄생했다.

node hello.js

Node.js가 코드를 실행했다.

Hello, TypeScript!

이제 `.ts` 파일이 단순한 낯선 확장자가 아니라는 사실을 알게 됐습니다.

21. 일부러 컴파일 오류 만들기

TypeScript 컴파일러가 오류를 어떻게 알려주는지 확인해 보겠습니다.

`hello.ts`를 다음처럼 수정합니다.

const message: string = 100;

console.log(message);

컴파일을 실행합니다.

npx tsc hello.ts

다음과 비슷한 오류가 나타납니다.

Type 'number' is not assignable to type 'string'.

오류 메시지에는 일반적으로 다음 정보가 포함됩니다.

* 문제가 발생한 파일* 줄 번호* 문자 위치* 오류 코드* 오류 원인

예시는 다음과 비슷합니다.

hello.ts(1,7): error TS2322:
Type 'number' is not assignable to type 'string'.

이 메시지를 해석해 보겠습니다.

hello.ts

문제가 발생한 파일입니다.

(1,7)

첫 번째 줄의 일곱 번째 문자 부근에서 문제가 발견됐다는 의미입니다.

TS2322

TypeScript 오류 코드입니다.

Type 'number' is not assignable to type 'string'.

숫자를 문자열 타입에 넣을 수 없다는 의미입니다.

컴파일러의 한마디

컴파일러 오류 메시지가 차갑게 느껴질 수 있습니다.

Type 'number' is not assignable to type 'string'.

사람의 언어로 바꾸면 다음과 같습니다.

“message는 문자열 담당인데 숫자 100이 출근했습니다. 부서 배정이 잘못됐습니다.”

오류를 해결하려면 값을 문자열로 변경합니다.

const message: string = "100";

또는 타입을 숫자로 변경합니다.

const message: number = 100;

어느 쪽이 맞는지는 개발자가 의도한 데이터에 따라 결정합니다.

22. 파일이 자동으로 변환되게 만들기

코드를 수정할 때마다 다음 명령어를 반복 입력하는 것은 번거롭습니다.

npx tsc hello.ts

TypeScript 컴파일러에는 파일 변경을 감시하는 기능이 있습니다.

다음 명령어를 실행합니다.

npx tsc hello.ts --watch

또는 짧게 작성합니다.

npx tsc hello.ts -w

터미널에 감시 모드가 시작됐다는 메시지가 표시됩니다.

이 상태에서 `hello.ts`를 수정하고 저장하면 `hello.js`도 자동으로 다시 생성됩니다.

예를 들어 TypeScript 코드를 다음처럼 변경합니다.

const message: string = "TypeScript 감시 모드 작동 중!";

console.log(message);

파일을 저장하면 컴파일러가 자동으로 변경을 감지합니다.

감시 모드를 종료하려면 터미널에서 다음 키를 누릅니다.

Ctrl + C

macOS에서도 터미널 프로세스를 종료할 때 일반적으로 같은 키를 사용합니다.

23. 저장했는데 실행 결과가 바뀌지 않는 이유

입문자가 자주 만나는 상황입니다.

`hello.ts` 내용을 수정했습니다.

const message: string = "내용을 바꿨습니다!";

console.log(message);

그런데 다음 명령어를 실행했더니 이전 문장이 출력됩니다.

node hello.js

이유는 간단합니다.

`hello.ts`만 수정하고 다시 컴파일하지 않았기 때문입니다.

현재 `hello.js`에는 이전 코드가 남아 있습니다.

다시 컴파일합니다.

npx tsc hello.ts

그다음 실행합니다.

node hello.js

이제 변경된 결과가 나타납니다.

내용을 바꿨습니다!

기억해야 할 순서는 다음과 같습니다.

TypeScript 수정
    ↓
저장
    ↓
컴파일
    ↓
JavaScript 실행

감시 모드를 사용하면 컴파일 단계가 자동으로 처리됩니다.

24. VS Code에서 추천하는 기본 설정

VS Code를 설치했다고 해서 확장 프로그램을 잔뜩 설치할 필요는 없습니다.

TypeScript 문법 검사와 자동 완성은 기본적으로 제공됩니다.

입문 단계에서는 도구를 과하게 늘리지 않는 것이 좋습니다.

다만 다음 설정은 유용합니다.

자동 저장

상단 메뉴에서 다음 항목을 선택할 수 있습니다.

파일 → 자동 저장

자동 저장을 사용하면 파일 저장을 깜빡하는 일을 줄일 수 있습니다.

다만 코드를 작성하는 중간에도 저장되므로 감시 모드에서 컴파일이 자주 실행될 수 있습니다.

처음에는 수동 저장을 사용해도 충분합니다.

글꼴 크기 조절

코드가 너무 작다면 다음 메뉴에서 조절할 수 있습니다.

파일 → 기본 설정 → 설정

macOS에서는 메뉴 이름이 조금 다르게 보일 수 있습니다.

설정 검색창에 다음 단어를 입력합니다.

font size

편안하게 읽을 수 있는 크기로 조절합니다.

미니맵 끄기

오른쪽에 코드 전체를 작게 보여주는 미니맵이 불편하다면 설정에서 끌 수 있습니다.

minimap

입문 단계에서는 화면을 단순하게 유지하는 것도 좋은 선택입니다.

25. 확장 프로그램은 무엇을 설치해야 할까?

TypeScript 개발을 시작하기 위해 필수로 설치해야 하는 VS Code 확장 프로그램은 없습니다.

TypeScript 기능은 VS Code에 기본 포함되어 있습니다.

코드를 예쁘게 정리하고 싶다면 이후에 포맷터 도구를 추가할 수 있습니다.

하지만 지금부터 확장 프로그램을 열 개씩 설치하면 문제가 생겼을 때 원인을 찾기 어려워집니다.

초보자에게 추천하는 순서는 다음과 같습니다.

기본 기능으로 시작
   ↓
불편한 점 발견
   ↓
필요한 확장 프로그램 검색
   ↓
한 번에 하나씩 설치

도구 상자를 가득 채우는 것보다, 각 도구가 왜 필요한지 아는 편이 중요합니다.

26. 오류 박물관

이제 개발 환경 설치 중 자주 발생하는 오류를 살펴보겠습니다.

전시 작품 1: npm 명령어를 찾을 수 없음

npm: command not found

또는 다음과 비슷한 메시지가 표시됩니다.

'npm'은(는) 내부 또는 외부 명령이 아닙니다.

원인

* Node.js가 설치되지 않았습니다.* 설치 후 터미널을 다시 열지 않았습니다.* 환경 변수에 설치 경로가 반영되지 않았습니다.

해결

Node.js 설치를 확인하고 터미널을 새로 실행합니다.

node -v
npm -v

전시 작품 2: tsc 명령어를 찾을 수 없음

다음 명령어를 실행했습니다.

tsc hello.ts

그런데 `tsc`를 찾을 수 없다는 메시지가 나옵니다.

원인

TypeScript를 프로젝트 내부에 설치했기 때문에 전역 `tsc` 명령어로 바로 실행할 수 없을 수 있습니다.

해결

`npx`를 사용합니다.

npx tsc hello.ts

전시 작품 3: hello.ts 파일을 찾을 수 없음

File 'hello.ts' not found.

원인

터미널의 현재 위치가 `hello.ts` 파일이 있는 폴더가 아닙니다.

해결

VS Code에서 프로젝트 폴더를 제대로 열었는지 확인합니다.

현재 파일 목록도 확인합니다.

Windows PowerShell:

dir

macOS 또는 Linux:

ls

목록에 `hello.ts`가 보여야 합니다.

전시 작품 4: 수정한 코드가 반영되지 않음

원인

`hello.ts`를 수정한 뒤 다시 컴파일하지 않았습니다.

해결

npx tsc hello.ts
node hello.js

또는 감시 모드를 사용합니다.

npx tsc hello.ts --watch

전시 작품 5: 파일 이름이 hello.ts.txt로 저장됨

Windows에서 파일 확장자가 숨겨져 있으면 다음과 같이 저장될 수 있습니다.

hello.ts.txt

겉으로는 `hello.ts`처럼 보여도 실제 확장자는 `.txt`일 수 있습니다.

해결

VS Code 탐색기에서 직접 새 파일을 만들고 이름을 입력합니다.

hello.ts

메모장에서 파일을 만들기보다 VS Code에서 만드는 것이 안전합니다.

27. 프로젝트 폴더를 정리해 보자

현재 프로젝트는 다음과 비슷합니다.

typescript-study/
├── node_modules/
├── hello.js
├── hello.ts
├── package-lock.json
└── package.json

각 파일과 폴더의 역할을 정리하면 다음과 같습니다.

이름	역할
`hello.ts`	우리가 작성한 TypeScript 코드
`hello.js`	컴파일된 JavaScript 코드
`package.json`	프로젝트 정보와 패키지 목록
`package-lock.json`	설치된 패키지의 상세 버전 기록
`node_modules`	설치된 패키지가 저장되는 폴더

앞으로 프로젝트 규모가 커지면 TypeScript 파일과 JavaScript 파일을 서로 다른 폴더에 분리하게 됩니다.

예를 들어 다음과 같은 구조를 사용할 수 있습니다.

typescript-study/
├── src/
│   └── hello.ts
├── dist/
│   └── hello.js
├── package.json
└── node_modules/

이 구조는 다음 회차에서 `tsconfig.json`을 다루며 본격적으로 만들어 보겠습니다.

28. 글로벌 설치와 로컬 설치 비교

TypeScript 설치 방식을 다시 정리해 보겠습니다.

전역 설치

npm install -g typescript

특징:

* 컴퓨터 전체에서 `tsc` 사용 가능* 간단한 연습에는 편리* 프로젝트별 버전 차이가 생길 수 있음

실행:

tsc hello.ts

프로젝트 내부 설치

npm install -D typescript

특징:

* 현재 프로젝트에만 설치* 프로젝트마다 다른 버전 사용 가능* 팀 개발과 버전 관리에 유리

실행:

npx tsc hello.ts

이번 연재에서는 프로젝트 내부 설치 방식을 사용합니다.

npm install -D typescript

이 방법이 실제 프로젝트 구조를 이해하는 데 더 도움이 됩니다.

29. TypeScript 설치 없이 맛보기

당장 컴퓨터에 프로그램을 설치하기 어려운 환경이라면 TypeScript Playground 같은 웹 기반 실행 환경을 사용할 수도 있습니다.

웹 브라우저에서 TypeScript 코드를 작성하면 JavaScript 변환 결과와 타입 오류를 바로 확인할 수 있습니다.

예를 들어 다음 코드를 입력해 볼 수 있습니다.

const language: string = "TypeScript";

console.log(language);

Playground는 다음 상황에서 유용합니다.

* TypeScript 문법을 빠르게 테스트할 때* 짧은 코드를 공유할 때* 설치 환경 없이 학습할 때* 특정 타입이 어떻게 추론되는지 확인할 때

하지만 실제 프로젝트의 폴더 구조, npm 패키지, 컴파일 설정을 배우려면 로컬 개발 환경도 필요합니다.

Playground는 체험장이고, 오늘 만든 VS Code 프로젝트는 본격적인 작업실입니다.

30. 초보자 함정 지도

개발 환경을 설치할 때 자주 빠지는 함정을 미리 표시해 두겠습니다.

함정 1. Node.js가 TypeScript를 직접 실행한다고 생각하기

Node.js는 기본적으로 JavaScript를 실행합니다.

node hello.js

TypeScript는 먼저 컴파일합니다.

npx tsc hello.ts

함정 2. TypeScript 파일을 수정하고 JavaScript만 실행하기

TypeScript를 수정했다면 JavaScript를 다시 생성해야 합니다.

npx tsc hello.ts
node hello.js

함정 3. 터미널 위치를 확인하지 않기

명령어는 현재 터미널이 위치한 폴더를 기준으로 동작합니다.

`hello.ts`가 없는 폴더에서 컴파일하면 파일을 찾지 못합니다.

함정 4. 모든 것을 전역 설치하기

처음에는 편해 보이지만 프로젝트마다 버전이 달라질 수 있습니다.

가능하면 프로젝트 내부에 설치하고 `npx`로 실행합니다.

함정 5. 확장 프로그램을 너무 많이 설치하기

기본 기능으로도 TypeScript 학습은 충분합니다.

필요한 기능이 생길 때 하나씩 추가합니다.

함정 6. 오류 메시지를 읽지 않고 명령어만 반복하기

오류 메시지는 컴퓨터의 항의문이 아니라 문제 위치를 알려주는 지도입니다.

파일 이름, 줄 번호, 오류 내용을 천천히 읽어 봅니다.

31. 환경 점검 체크리스트

다음 항목을 하나씩 확인해 보세요.

□ node -v 명령어에서 버전이 출력된다.
□ npm -v 명령어에서 버전이 출력된다.
□ VS Code가 설치되어 있다.
□ 프로젝트 폴더를 VS Code로 열었다.
□ npm init -y를 실행했다.
□ package.json 파일이 생성됐다.
□ npm install -D typescript를 실행했다.
□ npx tsc -v에서 버전이 출력된다.
□ hello.ts 파일을 만들었다.
□ npx tsc hello.ts를 실행했다.
□ hello.js 파일이 생성됐다.
□ node hello.js로 결과를 확인했다.

모든 항목을 확인했다면 개발 환경 설치는 완료입니다.

32. 오늘의 실전 미션

이제 배운 내용을 이용해 작은 프로그램을 작성해 보겠습니다.

`profile.ts` 파일을 만듭니다.

const userName: string = "타입초보";
const age: number = 25;
const isLearning: boolean = true;

console.log("이름:", userName);
console.log("나이:", age);
console.log("TypeScript 학습 중:", isLearning);

컴파일합니다.

npx tsc profile.ts

실행합니다.

node profile.js

결과는 다음과 같습니다.

이름: 타입초보
나이: 25
TypeScript 학습 중: true

이번에는 일부러 오류를 만들어 보세요.

const age: number = "스물다섯";

컴파일러가 어떤 메시지를 보여 주는지 직접 확인합니다.

오류를 다시 수정한 뒤 컴파일과 실행까지 완료해 봅니다.

33. 보너스 미션: 나만의 환영 메시지

다음 조건을 만족하는 `welcome.ts` 파일을 만들어 보세요.

* 이름은 문자열 타입* 학습 회차는 숫자 타입* 학습 중인지 여부는 불리언 타입* 세 값을 터미널에 출력

예시는 다음과 같습니다.

const studentName: string = "김타입";
const chapter: number = 2;
const isReady: boolean = true;

console.log("학습자:", studentName);
console.log("현재 회차:", chapter);
console.log("준비 완료:", isReady);

컴파일:

npx tsc welcome.ts

실행:

node welcome.js

직접 값도 바꿔 보세요.

const studentName: string = "나의 이름";
const chapter: number = 2;
const isReady: boolean = true;

이 순간부터 예제 코드는 남의 코드가 아니라 자신의 코드가 됩니다.

34. 타입 탐정사무소

다음 프로젝트에서 무엇이 잘못됐는지 찾아보세요.

`game.ts` 파일:

const playerName: string = "TypeKnight";
const level: number = 1;

console.log(playerName);
console.log(level);

사용자가 다음 명령어를 실행했습니다.

node game.ts

문제는 무엇일까요?

정답은 TypeScript 파일을 Node.js로 바로 실행하려 했다는 것입니다.

먼저 컴파일해야 합니다.

npx tsc game.ts

그러면 `game.js`가 생성됩니다.

이제 JavaScript 파일을 실행합니다.

node game.js

35. 미니 퀴즈

문제 1

Node.js의 주요 역할은 무엇일까요?

1. TypeScript 코드를 작성한다.2. JavaScript를 브라우저 밖에서 실행한다.3. 코드의 색상을 변경한다.4. 모든 타입 오류를 자동 수정한다.

정답은 2번입니다.

문제 2

TypeScript 컴파일러를 프로젝트 내부에 설치하는 명령어는 무엇일까요?

정답:

npm install -D typescript

문제 3

프로젝트 내부에 설치된 TypeScript 컴파일러의 버전을 확인하는 명령어는 무엇일까요?

정답:

npx tsc -v

문제 4

`hello.ts`를 JavaScript로 변환하는 명령어는 무엇일까요?

정답:

npx tsc hello.ts

문제 5

생성된 `hello.js`를 실행하는 명령어는 무엇일까요?

정답:

node hello.js

문제 6

다음 명령어의 역할은 무엇일까요?

npx tsc hello.ts --watch

정답:

`hello.ts`의 변경을 감시하고 파일이 저장될 때마다 자동으로 다시 컴파일합니다.

36. 오늘의 핵심 정리

* Node.js는 JavaScript를 브라우저 밖에서 실행하는 환경입니다.* npm은 개발에 필요한 패키지를 설치하고 관리합니다.* VS Code는 TypeScript 코드를 작성하고 오류를 확인하는 편집기입니다.* TypeScript 컴파일러인 `tsc`는 `.ts` 파일을 `.js` 파일로 변환합니다.* 프로젝트를 시작할 때 `npm init -y`로 `package.json`을 만들 수 있습니다.* TypeScript는 `npm install -D typescript`로 프로젝트에 설치할 수 있습니다.* 프로젝트 내부의 TypeScript 컴파일러는 `npx tsc`로 실행합니다.* TypeScript 코드는 먼저 컴파일한 뒤 Node.js로 실행합니다.* `--watch` 옵션을 사용하면 코드 변경 시 자동으로 다시 컴파일할 수 있습니다.* 오류가 발생하면 명령어를 반복하기보다 파일명, 줄 번호, 오류 내용을 먼저 읽어야 합니다.

오늘 사용한 핵심 명령어를 한곳에 모으면 다음과 같습니다.

node -v
npm -v
npm init -y
npm install -D typescript
npx tsc -v
npx tsc hello.ts
node hello.js
npx tsc hello.ts --watch

이 명령어들은 앞으로 TypeScript 학습에서 반복해서 만나게 됩니다.

37. 다음 편 예고

지금은 TypeScript 파일 하나를 직접 지정해 컴파일하고 있습니다.

npx tsc hello.ts

파일이 열 개, 백 개로 늘어나면 어떻게 해야 할까요?

매번 파일 이름을 하나씩 입력할 수는 없습니다.

JavaScript 파일을 별도의 폴더에 저장하고 싶을 수도 있습니다.

src 폴더에는 TypeScript
dist 폴더에는 JavaScript

최신 JavaScript 문법으로 변환할지, 오래된 브라우저에서도 실행할 수 있는 문법으로 변환할지도 결정해야 합니다.

이 모든 설정을 관리하는 파일이 있습니다.

tsconfig.json

다음 편에서는 TypeScript 프로젝트의 조종석을 직접 만들어 보겠습니다.

다음 이야기

[TypeScript 완전정복 #3] TypeScript 코드가 실행되는 과정 | 컴파일과 트랜스파일 완벽 이해하기

TypeScript 파일은 어떻게 JavaScript 파일로 변신할까요?

타입 정보는 왜 사라질까요?

그리고 컴파일 오류와 실행 오류는 무엇이 다를까요?

다음 편에서는 `.ts` 파일이 무대 뒤에서 어떤 변신 과정을 거치는지 추적해 보겠습니다.

목차