Ch 01. Node.js와 VS Code 설치

Node.js 22 LTS 설치

Node.js 공식 사이트(https://nodejs.org)에서 LTS 버전을 내려받습니다. 이 책을 작성하는 시점의 LTS는 22.x입니다.

macOS / Linux — nvm 사용 권장.

시스템에 직접 설치하는 것보다 nvm(Node Version Manager)을 사용하면 여러 버전을 쉽게 전환할 수 있습니다.

# nvm 설치curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash# 터미널 재시작 후 nvm 확인nvm --version# Node.js 22 LTS 설치nvm install 22# 22를 기본으로 설정nvm alias default 22# 현재 사용 버전 확인node --version# v22.x.x

Windows — 공식 설치 파일 또는 winget.

# winget 사용 (Windows 10/11)
winget install OpenJS.NodeJS.LTS

# 또는 공식 사이트에서 .msi 설치 파일 내려받아 실행

설치 후 버전을 확인합니다.

node --version   # v22.x.xnpm --version    # 10.x.x

npm은 Node.js와 함께 설치됩니다. npm은 패키지 설치와 스크립트 실행에 사용합니다.

VS Code 설치

VS Code(https://code.visualstudio.com)를 내려받아 설치합니다. TypeScript 언어 서비스가 기본 내장되어 있어 별도 설정 없이 타입 힌트와 자동완성이 동작합니다.

필수 확장 설치

VS Code 좌측 확장 아이콘(Ctrl+Shift+X / Cmd+Shift+X)을 클릭하고 아래 확장을 설치합니다.

TypeScript 개발 필수.

확장	설명
`ms-vscode.vscode-typescript-next`	최신 TypeScript 언어 서비스
`dbaeumer.vscode-eslint`	ESLint 연동
`esbenp.prettier-vscode`	Prettier 코드 포매터
`usernamehw.errorlens`	인라인 오류 표시

선택 설치.

확장	설명
`PKief.material-icon-theme`	파일 아이콘 테마
`GitHub.copilot`	AI 코드 완성
`bradlc.vscode-tailwindcss`	Tailwind CSS 지원 (프론트엔드 작업 시)

명령줄로 한 번에 설치할 수도 있습니다.

code --install-extension ms-vscode.vscode-typescript-nextcode --install-extension dbaeumer.vscode-eslintcode --install-extension esbenp.prettier-vscodecode --install-extension usernamehw.errorlens

TypeScript 전역 설치

전역 설치하면 어느 디렉토리에서든 tsc 명령어를 사용할 수 있습니다.

npm install -g typescript tsx# 버전 확인tsc --version   # Version 5.8.xtsx --version   # 4.x.x

프로젝트에서는 전역 설치 대신 프로젝트 의존성으로 설치하는 것이 더 안전합니다. 팀원마다 버전이 다를 수 있기 때문입니다.

# 프로젝트 의존성으로 설치npm install -D typescript tsx

전역 설치 여부와 상관없이, 프로젝트에 로컬로 설치된 TypeScript가 있다면 그 버전을 사용합니다.

설치 확인

다음 명령어로 모든 설치를 한 번에 확인합니다.

node --version      # v22.x.xnpm --version       # 10.x.xtsc --version       # Version 5.8.xtsx --version       # 4.x.xcode --version      # 1.9x.x

모두 버전이 출력되면 준비 완료입니다. 다음 챕터에서 첫 TypeScript 프로젝트를 만듭니다.