pkglog
EN

JavaScript 시리즈 목차: 기초 문법부터 비동기, DOM, 클래스, 모듈, 디자인 패턴까지 10편

작성 · · 7분 읽기 · 수정 초급 가이드

이 글의 핵심

React나 Vue를 배우기 전에 JavaScript를 어디까지 알아야 하는지 고민하는 분을 위한 목차입니다. 각 편의 난이도와 선행 관계를 정리해 필요한 글부터 고를 수 있게 하고, ECMAScript와의 관계, var를 쓰지 않는 이유, Promise와 async/await 선택 같은 자주 묻는 질문에도 짧게 답합니다.

시리즈 소개

JavaScript는 웹 브라우저에서 동작하는 유일한 표준 스크립트 언어이자, Node.js를 통해 서버와 CLI까지 확장된 범용 언어입니다. 이 시리즈는 ECMAScript 기초부터 비동기 프로그래밍, DOM 조작, 모듈 시스템, 디자인 패턴까지 실전 중심으로 학습할 수 있도록 구성했습니다.

V8 엔진, 이벤트 루프, 프로토타입, 클로저 등 JavaScript 내부 동작 원리와 실무 패턴을 깊이 있게 다룹니다.

전체 목차

기초 (초급)

#01 JavaScript 시작하기

18분 | 초급 | 튜토리얼

  • ECMAScript와 JavaScript, 브라우저 vs Node.js
  • V8 엔진, 이벤트 루프, JIT 컴파일
  • var, let, const 기본 문법
  • 호이스팅, 실행 컨텍스트

#02 변수와 데이터 타입

18분 | 초급 | 튜토리얼

  • let, const, var 차이 (블록 스코프 vs 함수 스코프)
  • 원시 타입: number, string, boolean, null, undefined, symbol, bigint
  • 참조 타입: object, array, function
  • 타입 변환, typeof, 동적 타이핑

#03 함수

초급 | 튜토리얼

  • 함수 선언식 vs 표현식 vs 화살표 함수
  • 매개변수, 기본값, 나머지 매개변수
  • 클로저 (Closure), 스코프 체인
  • 콜백 함수, 고차 함수 (map, filter, reduce)

#04 배열과 객체

초급 | 튜토리얼

  • 배열: push, pop, map, filter, reduce, find
  • 객체: 프로퍼티, 메서드, this
  • 구조 분해 할당, 스프레드 연산자

비동기와 DOM (중급)

#05 비동기 프로그래밍

중급 | 튜토리얼

  • 콜백 지옥 (Callback Hell)
  • Promise: then, catch, finally
  • async/await (ES2017)
  • 이벤트 루프, 마이크로태스크, 매크로태스크

#06 DOM 조작

24분 | 초급 | 튜토리얼

  • DOM (Document Object Model) 구조
  • 요소 선택: querySelector, getElementById
  • 요소 조작: textContent, innerHTML, style
  • 이벤트: addEventListener, 이벤트 위임

고급 기능 (중급~고급)

#07 클래스

중급 | 튜토리얼

  • class 문법 (ES2015)
  • 생성자, 메서드, 정적 메서드
  • 상속 (extends), super
  • 프로토타입 체인 내부 동작

#08 모듈

중급 | 튜토리얼

  • ES Modules: import, export
  • CommonJS: require, module.exports (Node.js)
  • 모듈 번들러: Webpack, Vite
  • 동적 import, Tree Shaking

#09 에러 처리

중급 | 튜토리얼

  • try, catch, finally
  • Error 객체, 커스텀 에러
  • Promise 에러 처리 (catch)
  • async/await 에러 처리

#10 디자인 패턴

고급 | 튜토리얼

  • 싱글톤, 팩토리, 빌더 패턴
  • 모듈 패턴, 프록시 패턴
  • 옵저버 패턴 (이벤트 기반)
  • MVC, MVVM 아키텍처

학습 경로

JavaScript 입문 (2주 코스)

#01 시작하기 → #02 변수 → #03 함수 → #04 배열/객체

목표: JavaScript 기본 문법 이해
난이도: ⭐☆☆☆☆
결과물: 간단한 계산기, 카운터 앱

프론트엔드 기초 (3주 코스)

#01~#04 복습 → #06 DOM 조작 → #05 비동기

목표: 동적 웹 페이지 제작
난이도: ⭐⭐☆☆☆
결과물: Todo 리스트, 날씨 앱

모던 JavaScript (4주 코스)

#05 비동기 → #07 클래스 → #08 모듈 → #09 에러 처리

목표: ES2015 이후 주요 문법 이해 난이도: ⭐⭐⭐☆☆
결과물: REST API 클라이언트

실전 프로젝트 (6주 코스)

전체 시리즈 (#01~#09) + #10 디자인 패턴

목표: 실전 웹 애플리케이션 제작
난이도: ⭐⭐⭐⭐☆
결과물: SPA (Single Page Application)

이 순서로 배치한 이유

함수(#03)를 비동기(#05)보다 앞에 둔 것은, 콜백·Promise·async/await가 모두 “함수를 값으로 넘기고, 나중에 호출되는 함수가 바깥 변수를 기억한다”는 클로저 개념 위에서 동작하기 때문입니다. 클로저를 모르고 비동기를 보면 for (var i = 0; i < 3; i++) setTimeout(() => console.log(i))가 왜 3 3 3을 찍는지 설명할 수 없습니다. var는 함수 스코프라 세 콜백이 같은 i 하나를 공유하고, let은 반복마다 새 바인딩을 만들어 0 1 2가 나옵니다. #02의 스코프 이야기가 #05에서 다시 등장하는 이유입니다.

DOM(#06)을 비동기와 같은 묶음에 넣은 것도 의도적입니다. 브라우저에서 이벤트 핸들러는 이벤트 루프가 나중에 호출하는 콜백이고, fetch로 받아 온 데이터를 화면에 그리는 일은 DOM 조작과 비동기가 만나는 지점입니다. 두 편을 함께 보면 “왜 화면이 멈추는가(긴 동기 작업이 이벤트 루프를 막음)“를 한 그림으로 이해할 수 있습니다.

공부하다가 자주 막히는 지점

처음 JavaScript를 배울 때 가장 많이 헷갈리는 것은 this입니다. 같은 메서드라도 obj.method()로 부르면 this가 obj지만, setTimeout(obj.method, 0)이나 이벤트 핸들러로 넘기면 호출 방식이 바뀌어 this가 undefined(strict mode)나 다른 객체가 됩니다. 화살표 함수는 자기 this를 갖지 않고 바깥 스코프의 this를 그대로 쓰므로, 클래스 메서드를 콜백으로 넘길 때 화살표 함수나 bind를 쓰는 이유가 여기 있습니다. #03과 #07이 이 부분을 다룹니다.

두 번째는 동등 비교와 타입 변환입니다. ==는 비교 전에 타입을 변환해 0 == ''와 null == undefined가 true가 되므로, 특별한 이유가 없다면 ===만 쓰는 것이 관례입니다. 세 번째는 비동기 에러입니다. async 함수 안에서 await 없이 Promise를 호출하면 그 Promise의 에러는 try/catch에 잡히지 않고 Unhandled promise rejection으로 새어 나갑니다. Node.js 15부터는 처리되지 않은 rejection이 기본적으로 프로세스를 종료시키므로, #05와 #09를 함께 읽어 두는 편이 좋습니다.

관련 시리즈

자주 묻는 질문

JavaScript와 ECMAScript의 차이는?

ECMAScript는 언어 표준(명세)이고, JavaScript는 그 표준을 구현한 언어입니다. ES2015, ES2020 등은 ECMAScript 버전입니다.

Promise vs async/await 어떤 걸 쓰나요?

둘은 대체 관계가 아닙니다. async/await는 Promise 위의 문법이라, 순차 흐름은 async/await로 쓰고 여러 요청을 동시에 보낼 때는 await Promise.all([...])처럼 Promise API를 함께 씁니다. 반복문 안에서 요청마다 await하면 요청이 하나씩 순서대로 나가 느려지므로, 서로 독립적인 요청이라면 Promise.all로 묶는 것이 좋습니다.

프레임워크(React, Vue)를 배우기 전에 JavaScript를 완벽히 알아야 하나요?

기초(#01~#06)만 익혀도 프레임워크 학습을 시작할 수 있습니다. 하지만 고급 개념(클로저, 프로토타입)을 알면 프레임워크 이해가 훨씬 깊어집니다.

추천 학습 자료

공식 문서

책

연습 사이트

시작하기: JavaScript 시작하기 (#01)에서 웹 개발 필수 언어를 배우세요!

같이 보면 좋은 글