자바스크립트 기초 #1 시작과 셋업

프로그래밍 언어 자바스크립트 자바스크립트 Node.js Vite
5 분 소요

이 시리즈는 자바스크립트를 처음 배우는 분, 또는 옛날에 배웠지만 다시 정리하고 싶은 분을 위한 7편짜리 입문 강좌입니다.

  • #1 시작과 셋업 ← 이번 글
  • #2 변수와 타입
  • #3 제어 흐름
  • #4 함수
  • #5 객체와 배열
  • #6 문자열과 템플릿 리터럴
  • #7 모듈 — import와 export

이번 글은 자바스크립트가 어디서 어떻게 동작하는지부터 정리하고, Node와 Vite로 모던 개발 환경을 만들어 첫 코드를 실행하는 단계까지 갑니다.

자바스크립트는 어디서 동작하나요? #

처음 배우는 분이 가장 헷갈리는 부분이 여기입니다. 자바스크립트는 한 곳이 아니라 두 곳에서 동작합니다.

  1. 브라우저 — 웹 페이지에 인터랙션을 주는 환경. 크롬/사파리/파이어폭스 같은 브라우저가 자바스크립트 엔진을 내장하고 있습니다.
  2. Node.js — 자바스크립트를 브라우저 밖에서, 서버나 도구 만드는 데 쓸 수 있게 해주는 런타임. 2009년에 등장하면서 자바스크립트의 활용 범위가 크게 넓어졌습니다.

같은 자바스크립트라도 환경에 따라 쓸 수 있는 게 다릅니다.

브라우저에서만 가능 
document.querySelector('h1');  // DOM 접근
window.location.href;           // URL
fetch('/api/users');            // 네트워크 요청
Node에서만 가능 
const fs = require('fs');       // 파일 시스템 접근
fs.readFileSync('data.txt');    // 파일 읽기
process.env.HOME;                // 환경 변수

언어 자체(변수, 함수, 반복, 객체)는 양쪽이 똑같습니다. 그 위에 환경별 API가 더 얹히는 구조입니다. 이 시리즈는 두 환경 모두에서 동작하는 언어 핵심에 집중합니다.

Node 설치하기 #

자바스크립트를 가장 빠르게 손에 익히는 방법은 Node를 설치하는 것입니다. 브라우저는 매번 HTML을 거쳐야 해서 처음 배울 때 마찰이 큽니다.

macOS / Linux #

Volta 를 추천합니다. 한 번 깔면 Node 버전을 자동으로 관리해 줍니다.

Volta 설치 + Node LTS 
curl https://get.volta.sh | bash
volta install node@lts

직접 다운로드도 가능합니다. nodejs.org 에서 LTS 버전을 받으세요.

Windows #

Node 공식 사이트에서 Windows Installer를 받아 설치. 그 외에는 winget install OpenJS.NodeJS.LTS도 가능합니다.

설치 확인 #

설치 확인 
node --version    # v22.x.x 같은 출력
npm --version     # 10.x.x 같은 출력

node와 npm 두 명령이 모두 응답하면 준비 끝.

REPL — 한 줄씩 실행해 보기 #

Node를 설치했으면 터미널에 node만 입력해 보세요. 자바스크립트를 한 줄씩 실행할 수 있는 REPL(Read-Eval-Print-Loop)이 뜹니다.

Node REPL 
> 1 + 1
2
> const greeting = '안녕'
undefined
> greeting + ', 자바스크립트!'
'안녕, 자바스크립트!'
> .exit

학습 초기에는 이 REPL이 가장 가벼운 실험실입니다. 새로운 문법을 봤을 때 여기서 한 번 쳐 보면 빠르게 감이 잡혀요. 종료는 .exit 또는 Ctrl+D.

첫 파일 만들고 실행하기 #

REPL은 한 줄씩 칠 때만 좋고, 여러 줄을 다루기엔 답답합니다. 작업 폴더를 하나 만들고 파일로 작성해 봅시다.

작업 폴더 만들기 
mkdir js-playground
cd js-playground

hello.js 파일을 만들어 다음을 적습니다.

hello.js 
const name = '커티스';
console.log(`안녕하세요, ${name}님!`);

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(`합계: ${sum}`);

실행:

파일 실행 
node hello.js
출력 
안녕하세요, 커티스님!
합계: 15

이게 자바스크립트로 작은 도구나 스크립트를 만들 때의 기본 흐름입니다. 파일 작성 → node 파일명 실행.

브라우저에서 실행해 보기 #

웹 개발을 하려면 결국 브라우저에서도 돌릴 수 있어야 합니다. 가장 가벼운 방법은 HTML 파일을 만들어 <script> 태그로 끼우는 겁니다.

index.html 
<html lang="ko">
  <head><title>JS 첫걸음</title></head>
  <body>
    <h1 id="message"></h1>
    <script>
      const el = document.getElementById('message');
      el.textContent = '브라우저에서 안녕!';
    </script>
  </body>
</html>

이 파일을 더블클릭으로 열거나 VS Code의 Live Server 확장으로 실행하면 됩니다.

다만 매번 HTML 파일을 손으로 다루는 건 번거로워요. 그래서 모던 환경에는 Vite 같은 개발 서버 도구를 씁니다.

모던 개발 환경 — Vite #

Vite는 자바스크립트 프로젝트의 개발 서버, 빌드, 모듈 시스템을 한꺼번에 처리해 주는 도구입니다. 리액트 시리즈와 타입스크립트 시리즈에서 이미 등장했습니다. 바닐라 자바스크립트 프로젝트도 Vite로 시작할 수 있습니다.

Vite 바닐라 JS 프로젝트 
npm create vite@latest my-vanilla -- --template vanilla
cd my-vanilla
npm install
npm run dev

http://localhost:5173을 브라우저로 열면 기본 페이지가 떠 있을 겁니다. src/main.js가 진입점입니다. 이걸 수정하고 저장하면 브라우저가 즉시 갱신됩니다(HMR — Hot Module Replacement).

이 시리즈에서는 단순한 예제는 node로, DOM이 필요한 예제는 Vite로 돌리겠습니다.

코드 편집기 #

VS Code 가 가장 흔한 선택입니다. 처음에는 다른 확장 없이도 충분합니다. 익숙해지면 다음 두 개 정도가 도움이 됩니다.

  • Prettier — 저장 시 자동 포맷팅
  • ESLint — 코드 스타일/문법 경고

이 시리즈에서는 둘 다 강요하지 않습니다. 익숙해질 때까지는 도구를 최소화하는 게 학습에 더 좋습니다.

자바스크립트의 두 얼굴 — 표준은 ECMAScript #

옛날 자료를 보면 “ES5”, “ES2015”, “ES6” 같은 용어가 자주 등장합니다. 자바스크립트의 공식 사양 이름이 ECMAScript 라서 그래요. 1년에 한 번씩 새 버전이 나옵니다.

  • ES2015 (= ES6) — let/const, 화살표 함수, 클래스, 모듈 등 큰 변경. 현대 자바스크립트의 기준선.
  • ES2017 — async/await
  • ES2020 — 옵셔널 체이닝 (?.), nullish 병합 (??)
  • ES2022 — 클래스 private 필드 (#), top-level await
  • ES2024 — 매년 업데이트 중

이 시리즈는 모두 ES2015 이후의 모던 자바스크립트 기준으로 진행합니다. var 같은 옛 문법은 거의 다루지 않습니다.

마무리 #

이번 글에서 정리한 내용:

  • 자바스크립트는 브라우저와 Node 두 곳에서 동작
  • Node 설치 (Volta 추천) → REPL 또는 node 파일명으로 실행
  • 브라우저는 <script> 또는 Vite 개발 서버로 돌리기
  • 편집기는 VS Code가 무난, 처음에는 확장 최소화
  • 시리즈는 모던 자바스크립트(ES2015+) 기준

다음 글(#2 변수와 타입)에서는 변수 선언(let/const)과 자바스크립트의 기본 타입들, 그리고 타입 변환에서 자주 겪는 함정을 정리합니다.

X