시작하기

JavaScript는 웹 브라우저 안에서 처음 태어난 언어입니다. 지금은 Node.js 같은 런타임 덕분에 서버, 명령줄 도구, 빌드 도구, 데스크톱 앱에서도 널리 쓰입니다. 이 장에서는 코드를 실행하는 두 가지 환경인 브라우저 콘솔과 Node.js를 살펴보고, 첫 스크립트를 실행한 뒤 npm 프로젝트를 만들고 편집기를 준비하는 과정까지 안내합니다.

두 가지 실행 환경

같은 JavaScript 문법을 쓰더라도 어디에서 실행하느냐에 따라 쓸 수 있는 기능이 달라집니다. 언어 자체의 기능(변수, 함수, 배열, Promise 등)은 어디서나 같지만, 화면을 다루는 document는 브라우저에만 있고 파일을 읽는 fs 모듈은 Node.js에만 있습니다.

브라우저 콘솔에서 바로 실행하기

설치 없이 가장 빨리 JavaScript를 실행해 보는 방법은 브라우저의 개발자 도구입니다. Chrome, Edge, Firefox에서 F12 또는 Ctrl+Shift+I(macOS는 Cmd+Option+I)를 누르고 Console 탭을 엽니다. 한 줄씩 입력하고 Enter를 누르면 바로 결과가 나옵니다.

console.log("안녕하세요, JavaScript!");

const scores = [72, 95, 88];
scores.sort((a, b) => a - b);
console.log(scores); // [72, 88, 95]

document.title; // 현재 페이지의 제목(브라우저에서만 동작)

콘솔은 마지막 식의 값을 자동으로 보여 주므로 짧은 실험에 아주 편리합니다. 다만 페이지를 새로 고치면 입력한 내용이 사라지므로, 조금이라도 긴 코드는 파일로 저장해 실행하는 편이 좋습니다.

Node.js 설치하기

Node.js는 브라우저 밖에서 JavaScript를 실행하는 런타임입니다. nodejs.org에서 운영 체제에 맞는 설치 파일을 받을 수 있으며, 특별한 이유가 없다면 장기 지원판인 LTS 버전을 고르는 것이 안전합니다. 여러 버전을 오가야 한다면 nvm, fnm, Volta 같은 버전 관리자를 쓰는 방법도 있습니다.

설치가 끝나면 터미널에서 버전을 확인합니다. Node.js를 설치하면 패키지 관리자인 npm도 함께 설치됩니다.

node --version
npm --version

첫 스크립트 실행하기

편한 폴더에 hello.js 파일을 만들고 다음 내용을 넣습니다. process.argv는 명령줄 인수를 담은 배열로, 세 번째 요소부터가 사용자가 넘긴 값입니다.

// hello.js
const name = process.argv[2] ?? "세계";
const now = new Date().toLocaleTimeString("ko-KR");

console.log(`안녕하세요, ${name}! 지금 시각은 ${now}입니다.`);

터미널에서 node에 파일 이름을 넘겨 실행합니다.

node hello.js
node hello.js 지민

# 파일을 저장할 때마다 다시 실행하기(최근 Node.js에서 지원)
node --watch hello.js

파일 없이 node만 입력하면 REPL(대화형 실행 환경)이 열립니다. 브라우저 콘솔처럼 한 줄씩 실험할 수 있고, .exit를 입력하거나 Ctrl+C를 두 번 누르면 빠져나옵니다.

npm으로 프로젝트 만들기

실제 프로젝트는 대개 package.json 파일에서 시작합니다. 이 파일에는 프로젝트 이름, 의존하는 패키지, 자주 쓰는 명령(스크립트)이 기록됩니다. npm init -y는 질문 없이 기본값으로 이 파일을 만듭니다.

mkdir my-app
cd my-app
npm init -y
npm install --save-dev prettier

만들어진 package.json에 start 스크립트를 하나 직접 추가하면 대략 다음과 같은 모양이 됩니다(npm 버전에 따라 기본 항목은 조금 다를 수 있습니다).

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "devDependencies": {
    "prettier": "^3.0.0"
  }
}

패키지를 설치하면 node_modules 폴더와 package-lock.json 파일이 생깁니다. node_modules는 언제든 다시 만들 수 있으므로 Git에는 올리지 않고 .gitignore에 넣습니다. 반대로 package-lock.json은 모두가 같은 버전을 설치하도록 해 주므로 반드시 커밋합니다.

편집기 준비하기

Visual Studio Code는 JavaScript 지원이 기본으로 들어 있어 자동 완성, 정의로 이동, 이름 바꾸기가 바로 동작합니다. 여기에 다음 확장을 더하면 훨씬 편해집니다.

• ESLint: 실수하기 쉬운 코드와 스타일 문제를 저장 전에 알려 줍니다.
• Prettier: 들여쓰기, 따옴표, 줄바꿈을 일정한 규칙으로 정리합니다.
• Error Lens(선택): 오류 메시지를 코드 줄 옆에 바로 보여 줍니다.

JavaScript 파일 맨 위에 // @ts-check를 적으면 VS Code가 TypeScript 엔진으로 타입 오류를 검사합니다. JSDoc 주석으로 타입을 알려 주면 잘못된 호출을 미리 잡아 줍니다.

// @ts-check

/**
 * @param {number} price
 * @param {number} rate
 */
function withTax(price, rate) {
  return price * (1 + rate);
}

withTax("1000", 0.1); // 편집기가 문자열 인수에 밑줄로 경고합니다

정리

• 브라우저 콘솔은 설치 없이 바로 실험할 수 있는 가장 빠른 방법입니다.
• Node.js를 설치하면 node 파일이름.js로 스크립트를 실행하고, npm으로 패키지를 관리할 수 있습니다.
• 프로젝트는 npm init -y로 만든 package.json에서 시작하며, node_modules는 커밋하지 않고 package-lock.json은 커밋합니다.
• VS Code에 ESLint와 Prettier를 더하고 // @ts-check를 활용하면 초보 단계의 실수를 크게 줄일 수 있습니다.