notes

03장. 자바스크립트 개발 환경과 실행 방법

2025-08-01수정 2026-09-268 min read

모던 JS Deep Dive — 자바스크립트 개발 환경과 실행 방법 핵심 정리.

Kim mr.

프론트엔드 · 기술 블로그

참고: 이웅모 《모던 자바스크립트 Deep Dive》 03장 · [MDN What is JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript)

브라우저 콘솔에 1+1을 치며 “여기가 실행 환경이구나”를 처음 느꼈다. 이 장은 거창한 문법 전에 어디서 돌릴지 — 브라우저, Node, 에디터 — 를 손으로 익히는 장이다.

flowchart LR
  CODE[JS 코드] --> BR[브라우저 엔진]
  CODE --> ND[Node.js]
  BR --> DEV[DevTools 콘솔/디버거]
  ND --> REPL[REPL / 파일 실행]
  VS[VS Code] --> BOTH[둘 다 연결]

3.1 자바스크립트 실행 환경

JS는 호스트 환경이 제공한다. 브라우저(렌더링+DOM+이벤트), Node(파일·네트워크·서버). 같은 언어, 다른 API.

3.2 웹 브라우저

개발자 도구

Elements / Console / Sources / Network. 콘솔은 REPL이자 로그 창.

콘솔

console.log / warn / error / table. 표현식 평가 가능.

브라우저에서 실행

<script>, type="module", 인라인 vs 외부. defer/async는 로딩 장(나중)과 연결.

디버깅

Sources에서 브레이크포인트, step over/into, 스코프 창. debugger; 문.

function add(a, b) {
  // debugger;
  return a + b;
}
console.log(add(1, 2));

3.3 Node.js

npm과 함께

패키지 생태계의 입구. node -v, npm -v.

설치

LTS 권장. nvm/fnm으로 버전 관리.

REPL

node 단독 실행 → 대화형. 파일은 node app.js.

node -e "console.log(1+1)"

3.4 VS Code

터미널 통합, 확장(ESLint, Prettier), Code Runner / 디버그 구성. Live Server로 정적 HTML+JS 미리보기.

예제 — 같은 코드를 두 환경에서

// hello.js
console.log('hello', typeof window, typeof process);

브라우저 스크립트 vs node hello.js — window/process 유무가 갈린다.

헷갈리던 장면 / 함정

브라우저 API를 Node에서 그대로 호출
콘솔 결과가 “문이 아니라 표현식 완료값”인 줄 모름
sourcemap 없이 번들만 디버깅
script 위치/타입 실수로 로드 안 됨

표

질문 → 자답

Q. 어디에 먼저 익히나? A. 목표에 따라. 프론트면 브라우저+DevTools, 백/툴이면 Node. 둘 다 결국 만난다.

Q. REPL만으로 충분? A. 짧은 실험 OK. 프로젝트는 파일+모듈+린트.

웹 보강 메모

MDN First steps, Node 공식 문서 Getting Started. 디버그 구성을 레포에 커밋해 팀 온보딩을 줄였다.

실무로 바로

재현은 최소 HTML+스크립트 또는 node 한 파일
로그에 환경 힌트(import.meta, process.env.NODE_ENV)
VS Code launch.json으로 브레이크포인트 습관화

여기서 잠깐 💁‍♂️

4장은 변수 — 실행 환경 위에 이름을 붙이기.

연습·복습 체크리스트

[ ] 이 장 핵심 표를 백지에 다시 그리기
[ ] 함정 예제를 콘솔에서 재현
[ ] MDN 관련 페이지 북마크
[ ] 실무 코드에서 같은 패턴 검색·리팩터 후보 표시
[ ] 앞뒤 장과 한 줄로 연결해 보기

일기 보강

처음엔 용어가 추상적으로 들렸다. 책을 덮고 한 줄 정의를 내 말로 다시 쓰고, 예제를 최소 세 개 쳐 보니 문제 유형이 보이기 시작했다. “외운 문장”이 아니라 “다시 설명 가능한 문장”이 남을 때까지 표를 줄였다 늘렸다. 원문 복붙 없이 왜 이렇게 동작하나만 남겼다.