JavaScript 시리즈 전체 목차 | 웹 개발 필수 언어 완벽 가이드
이 글의 핵심
JavaScript 시리즈 전체 목차: 웹 개발 필수 언어 기초부터 실전까지 10개 주제 완벽 마스터.
시리즈 소개
JavaScript는 웹 브라우저에서 동작하는 유일한 표준 스크립트 언어이자, Node.js를 통해 서버와 CLI까지 확장된 범용 언어입니다. 이 시리즈는 ECMAScript 기초부터 비동기 프로그래밍, DOM 조작, 모듈 시스템, 디자인 패턴까지 실전 중심으로 학습할 수 있도록 구성했습니다.
V8 엔진, 이벤트 루프, 프로토타입, 클로저 등 JavaScript 내부 동작 원리와 실무 패턴을 깊이 있게 다룹니다.
📚 전체 목차
🟢 기초 (초급)
#01 JavaScript 시작하기
18분 | 초급 | 튜토리얼
- ECMAScript와 JavaScript, 브라우저 vs Node.js
- V8 엔진, 이벤트 루프, JIT 컴파일
- var, let, const 기본 문법
- 호이스팅, 실행 컨텍스트
- 핵심: JavaScript, ECMAScript, Node.js
#02 변수와 데이터 타입
18분 | 초급 | 튜토리얼
- let, const, var 차이 (블록 스코프 vs 함수 스코프)
- 원시 타입: number, string, boolean, null, undefined, symbol, bigint
- 참조 타입: object, array, function
- 타입 변환, typeof, 동적 타이핑
- 핵심: let, const, 데이터 타입, 호이스팅
#03 함수
분량 미확인 | 초급 | 튜토리얼
- 함수 선언식 vs 표현식 vs 화살표 함수
- 매개변수, 기본값, 나머지 매개변수
- 클로저 (Closure), 스코프 체인
- 콜백 함수, 고차 함수 (map, filter, reduce)
- 핵심: 함수, 클로저, 화살표 함수
#04 배열과 객체
분량 미확인 | 초급 | 튜토리얼
- 배열: push, pop, map, filter, reduce, find
- 객체: 프로퍼티, 메서드, this
- 구조 분해 할당, 스프레드 연산자
- 핵심: Array, Object, 구조 분해
🟡 비동기와 DOM (중급)
#05 비동기 프로그래밍
분량 미확인 | 중급 | 튜토리얼
- 콜백 지옥 (Callback Hell)
- Promise: then, catch, finally
- async/await (ES2017)
- 이벤트 루프, 마이크로태스크, 매크로태스크
- 핵심: Promise, async/await, 이벤트 루프
#06 DOM 조작
24분 | 초급 | 튜토리얼
- DOM (Document Object Model) 구조
- 요소 선택: querySelector, getElementById
- 요소 조작: textContent, innerHTML, style
- 이벤트: addEventListener, 이벤트 위임
- 핵심: DOM, querySelector, addEventListener
🔵 고급 기능 (중급~고급)
#07 클래스
분량 미확인 | 중급 | 튜토리얼
- class 문법 (ES2015)
- 생성자, 메서드, 정적 메서드
- 상속 (extends), super
- 프로토타입 체인 내부 동작
- 핵심: class, 상속, 프로토타입
#08 모듈
분량 미확인 | 중급 | 튜토리얼
- ES Modules: import, export
- CommonJS: require, module.exports (Node.js)
- 모듈 번들러: Webpack, Vite
- 동적 import, Tree Shaking
- 핵심: ES Modules, import, export
#09 에러 처리
분량 미확인 | 중급 | 튜토리얼
- try, catch, finally
- Error 객체, 커스텀 에러
- Promise 에러 처리 (catch)
- async/await 에러 처리
- 핵심: try-catch, Error, Promise 에러
#10 디자인 패턴
분량 미확인 | 고급 | 튜토리얼
- 싱글톤, 팩토리, 빌더 패턴
- 모듈 패턴, 프록시 패턴
- 옵저버 패턴 (이벤트 기반)
- MVC, MVVM 아키텍처
- 핵심: 디자인 패턴, 싱글톤, 옵저버
🎯 학습 경로
1️⃣ JavaScript 입문 (2주 코스)
#01 시작하기 → #02 변수 → #03 함수 → #04 배열/객체
목표: JavaScript 기본 문법 이해
난이도: ⭐☆☆☆☆
결과물: 간단한 계산기, 카운터 앱
2️⃣ 프론트엔드 기초 (3주 코스)
#01~#04 복습 → #06 DOM 조작 → #05 비동기
목표: 동적 웹 페이지 제작
난이도: ⭐⭐☆☆☆
결과물: Todo 리스트, 날씨 앱
3️⃣ 모던 JavaScript (4주 코스)
#05 비동기 → #07 클래스 → #08 모듈 → #09 에러 처리
목표: ES2015+ 문법 완벽 이해
난이도: ⭐⭐⭐☆☆
결과물: REST API 클라이언트
4️⃣ 실전 프로젝트 (6주 코스)
전체 시리즈 (#01~#09) + #10 디자인 패턴
목표: 실전 웹 애플리케이션 제작
난이도: ⭐⭐⭐⭐☆
결과물: SPA (Single Page Application)
💡 시리즈 특징
✅ 실전 중심
- V8 엔진, 이벤트 루프 내부 동작
- 실무 코드 패턴과 모범 사례
- 브라우저와 Node.js 차이점
✅ 모던 JavaScript
- ES2015+ (let/const, 화살표 함수, class)
- async/await 비동기 프로그래밍
- ES Modules (import/export)
✅ 깊이 있는 설명
- 프로토타입 체인, 클로저 원리
- 이벤트 루프, 마이크로태스크
- 호이스팅, 실행 컨텍스트
✅ 프레임워크 대비
- React, Vue, Angular로 가기 전 필수 기초
- 바닐라 JavaScript 실력 강화
- DOM 조작, 이벤트 처리 직접 구현
🔗 관련 시리즈
- TypeScript 시리즈 - 타입 안전성 추가
- HTML/CSS 시리즈 - 웹 페이지 구조와 스타일
- React 시리즈 - 컴포넌트 기반 UI
❓ 자주 묻는 질문
Q1. JavaScript와 ECMAScript의 차이는?
A: ECMAScript는 언어 표준(명세)이고, JavaScript는 그 표준을 구현한 언어입니다. ES2015, ES2020 등은 ECMAScript 버전입니다.
Q2. 브라우저와 Node.js 중 어디서 배워야 하나요?
A: 문법은 동일합니다. 웹 페이지를 만들려면 브라우저 환경(DOM), 서버 개발은 Node.js 환경을 익히세요.
Q3. var는 왜 안 쓰나요?
A: var는 함수 스코프와 호이스팅 문제가 있어 let/const로 대체되었습니다. 레거시 코드 읽기용으로만 알아두세요.
Q4. Promise vs async/await 어떤 걸 쓰나요?
A: async/await가 더 직관적이고 에러 처리가 쉽습니다. Promise는 체이닝이 필요할 때 유용합니다.
Q5. 프레임워크(React, Vue)를 배우기 전에 JavaScript를 완벽히 알아야 하나요?
A: 기초(#01~#06)만 익혀도 프레임워크 학습을 시작할 수 있습니다. 하지만 고급 개념(클로저, 프로토타입)을 알면 프레임워크 이해가 훨씬 깊어집니다.
📖 추천 학습 자료
공식 문서
- MDN Web Docs - 최고의 JavaScript 레퍼런스
- ECMAScript 명세 - 언어 표준 문서
책
- You Don’t Know JS - 무료 오픈소스
- JavaScript: The Good Parts
연습 사이트
- JavaScript.info - 체계적 튜토리얼
- Codewars - 알고리즘 문제
- Frontend Mentor - 실전 프로젝트
시작하기: JavaScript 시작하기 (#01)에서 웹 개발 필수 언어를 배우세요!