개발 환경 설정

Node.js 설치: 가장 먼저 Node.js 공식 웹사이트에 방문하여 여러분의 운영체제에 맞는 설치 파일을 다운로드하고 설치해주세요.

• Node.js 공식 웹사이트

설치 페이지에는 보통 두 가지 버전이 있습니다.

• LTS (Long Term Support) 버전: 장기적인 안정성을 보장하는 버전입니다. 특별한 이유가 없다면 LTS 버전을 설치하는 것을 권장합니다.
• Current 버전: 최신 기능을 포함하지만, 안정성이 덜 검증된 버전입니다.

설치 과정은 대부분 다음(Next) 버튼만 누르면 되는 간단한 절차로 이루어져 있습니다.

설치 확인: 설치가 완료되면, 터미널(또는 명령 프롬프트)을 열고 다음 명령어를 입력하여 Node.js와 함께 설치되는 패키지 관리 도구인 npm (Node Package Manager)이 제대로 설치되었는지 확인합니다.

node -v
npm -v

각각 Node.js와 npm의 버전 정보가 출력된다면 성공적으로 설치된 것입니다.

yarn (선택 사항): npm 외에도 yarn이라는 패키지 관리 도구를 사용할 수도 있습니다. yarn은 npm과 유사한 기능을 제공하며, 경우에 따라 더 빠르거나 편리한 이점을 가질 수 있습니다. 필수는 아니지만, 많은 개발자들이 선호하므로 함께 설치해두는 것도 좋습니다.

npm install -g yarn
yarn -v

-g 옵션은 해당 패키지를 전역(Global)으로 설치한다는 의미입니다. 이렇게 설치하면 어떤 프로젝트 폴더에서든 yarn 명령어를 사용할 수 있습니다.

VS Code 설치: Visual Studio Code 공식 웹사이트에 방문하여 여러분의 운영체제에 맞는 설치 파일을 다운로드하고 설치해주세요.

기본 설정 확인: VS Code를 설치하고 실행하면, 별다른 설정 없이도 .ts 파일을 열면 타입스크립트 구문에 대한 문법 강조(Syntax Highlighting)와 기본적인 타입 검사 기능이 활성화되는 것을 확인할 수 있습니다.

새 프로젝트 폴더 생성: 원하는 위치에 새로운 폴더를 만들고, VS Code로 해당 폴더를 엽니다.

mkdir my-ts-project
cd my-ts-project
code . # 현재 폴더를 VS Code로 엽니다.

타입스크립트 설정 파일 (tsconfig.json) 생성: 타입스크립트 프로젝트의 루트 폴더에서 다음 명령어를 실행하여 tsconfig.json 파일을 생성합니다. 이 파일은 타입스크립트 컴파일러가 코드를 어떻게 컴파일할지에 대한 설정을 담고 있습니다.

tsc --init

이 명령어를 실행하면 tsconfig.json 파일이 생성되며, 내부에는 다양한 설정들이 주석 처리된 상태로 포함되어 있습니다. 지금은 이 설정들을 자세히 알 필요는 없으며, 기본값으로 두어도 충분합니다.

첫 타입스크립트 파일 작성: my-ts-project 폴더 안에 index.ts라는 파일을 생성하고 다음 코드를 작성해보세요.

function greet(name: string): string {
  return `Hello, ${name}! Welcome to TypeScript!`;
}

let userName: string = "TypeScript Learner";
console.log(greet(userName));

// 의도적으로 오류를 만들어봅시다.
// let age: number = "twenty"; // 오류: 'string' 형식은 'number' 형식에 할당될 수 없습니다.

코드를 저장하면, VS Code가 age 변수에 문자열을 할당하려 할 때 즉시 오류를 표시하는 것을 확인할 수 있습니다. 이것이 바로 타입스크립트의 강력한 타입 검사 기능입니다! 주석 처리된 age 변수 라인은 잠시 오류가 발생하는 것을 확인하기 위한 것이니, 학습 후에는 주석을 유지하거나 제거하셔도 좋습니다.

타입스크립트 코드 컴파일 및 실행: 이제 index.ts 파일을 자바스크립트로 컴파일해봅시다. 터미널에서 다음 명령어를 실행합니다.

tsc

이 명령어를 실행하면 tsconfig.json 파일의 설정에 따라 index.ts 파일이 index.js 파일로 컴파일됩니다. my-ts-project 폴더 안에 index.js 파일이 새로 생성된 것을 확인해보세요.

function greet(name) {
  return `Hello, ${name}! Welcome to TypeScript!`;
}
let userName = "TypeScript Learner";
console.log(greet(userName));
// let age = "twenty"; // 타입스크립트의 타입 정보는 사라지고 자바스크립트로 변환됩니다.

컴파일된 index.js 파일은 순수한 자바스크립트 코드이며, 타입스크립트에서 명시했던 타입 정보들은 사라진 것을 볼 수 있습니다. 타입 정보는 컴파일 시점에만 사용되고 런타임에는 필요 없기 때문입니다.

이제 이 자바스크립트 파일을 Node.js를 이용해 실행해봅시다.

node index.js

터미널에 Hello, TypeScript Learner! Welcome to TypeScript!라는 메시지가 출력된다면 모든 설정이 완벽하게 완료된 것입니다.