본문으로 건너뛰기

모던 자바스크립트 바이블

Part 1: 자바스크립트 기초와 모던 문법​

1장: 프로그래밍과 자바스크립트 시작하기​

  • 자바스크립트란 무엇인가?
  • 개발 환경 설정 (VS Code, Node.js)
  • 브라우저 개발자 도구 활용
  • Hello, World! 첫 번째 프로그램
  • 실습: CodePen과 온라인 에디터 활용법

2장: 값, 타입, 연산자​

  • 원시 타입 (number, string, boolean, undefined, null)
  • BigInt와 Symbol (ES2020+)
  • 연산자와 표현식
  • 타입 변환과 엄격한 비교 (===)
  • 새로운 연산자: Nullish coalescing (??) 와 논리 할당 연산자
  • 실습: 타입 체커 함수 만들기
  • 실습: 다양한 연산자 활용 예제

3장: 모던 변수 선언과 스코프​

  • let, const 사용법 (var는 왜 피해야 하는가)
  • 블록 스코프와 함수 스코프
  • 호이스팅의 이해
  • 템플릿 리터럴과 문자열 처리
  • 실습: 스코프 실험실 - 다양한 스코프 상황 체험
  • 실습: 템플릿 리터럴로 동적 메시지 생성기

4장: 제어 구조와 반복문​

  • 조건문 (if, switch)
  • 반복문 (for, while, do-while)
  • for...of와 for...in 루프
  • break, continue의 활용
  • 실습: 숫자 맞추기 게임
  • 실습: 구구단 출력기 (다양한 반복문 버전)

5장: 모던 함수​

  • 함수 선언과 함수 표현식
  • 화살표 함수 (Arrow Functions)
  • 매개변수 기본값
  • 나머지 매개변수와 전개 구문 (Rest/Spread)
  • 실습: 함수 팩토리 만들기
  • 실습: 가변 인수를 받는 유틸리티 함수들

6장: 객체와 배열​

  • 객체 생성과 속성 접근
  • Optional chaining (?.) 연산자 활용
  • 배열의 생성과 조작
  • 구조 분해 할당 (Destructuring)
  • 객체 단축 표기법
  • 최신 배열 메서드: Array.from(), Array.at(), Array.toSorted() 등
  • 실습: 학생 성적 관리 시스템 (객체와 배열 종합)
  • 실습: 중첩 객체 안전하게 접근하기

7장: 기초 다지기​

  • 종합 실습: 간단한 도서 관리 앱
  • 코드 리뷰와 리팩토링 연습
  • 일반적인 실수와 해결법
  • 온라인 코딩 테스트 플랫폼 활용법
  • 기초 DOM 조작 맛보기

Part 2: 함수와 에러 처리​

8장: 고차 함수와 배열 메서드​

  • map, filter, reduce 마스터하기
  • forEach, find, some, every
  • findLast(), findLastIndex() 등 최신 배열 메서드
  • 함수형 프로그래밍 기초
  • 메서드 체이닝
  • 실습: 데이터 변환 파이프라인 구축
  • 실습: 쇼핑몰 상품 필터링 시스템

9장: 에러 처리와 디버깅​

  • try...catch...finally
  • 커스텀 에러 만들기
  • 디버깅 기법과 도구
  • 코드 품질과 린터 활용
  • 실습: 안전한 JSON 파서 만들기
  • 실습: 디버깅 시나리오 해결하기

Part 3: 비동기와 모듈​

10장: 비동기 프로그래밍​

  • 콜백과 콜백 지옥
  • Promise의 이해와 활용
  • async/await 문법
  • 에러 처리와 Promise.all, Promise.race
  • 최신 Promise 메서드: Promise.allSettled(), Promise.any()
  • 실습: 순차/병렬 API 호출 시스템
  • 실습: 타임아웃이 있는 데이터 로더

11장: 모듈 시스템​

  • ES6 모듈 (import/export)
  • 동적 import()와 코드 스플리팅
  • 모듈 번들러 개념
  • npm과 패키지 관리
  • 모던 프로젝트 구조
  • 실습: 모듈화된 유틸리티 라이브러리 구축
  • 실습: 패키지 매니저로 외부 라이브러리 활용

Part 4: 브라우저와 웹 API​

12장: DOM 조작과 이벤트​

  • DOM 트리 이해하기
  • 요소 선택과 조작
  • 이벤트 리스너와 이벤트 위임
  • 모던 이벤트 처리 패턴
  • Web Components 기초 개념
  • 실습: 동적 테이블 생성기
  • 실습: 드래그 앤 드롭 파일 업로더

13장: 웹 API와 데이터 통신​

  • Fetch API 사용법
  • JSON 데이터 처리
  • 로컬 스토리지와 세션 스토리지
  • RESTful API 기초
  • 최신 웹 API: Intersection Observer, Resize Observer
  • 실습: 무한 스크롤 구현
  • 실습: 오프라인 지원 메모 앱

14장: 객체 지향 프로그래밍​

  • 생성자 함수와 프로토타입
  • ES6 클래스 문법
  • 상속과 super 키워드
  • 정적 메서드와 프라이빗 필드 (#private)
  • 실습: 은행 계좌 클래스 시스템
  • 실습: 게임 캐릭터 상속 구조 만들기

15장: 현대적 웹 개발 도구​

  • 개발자 도구 심화 활용
  • 번들러와 빌드 도구 (Vite, Webpack 기초)
  • 코드 포매터와 린터 (Prettier, ESLint)
  • Git과 버전 관리
  • 실습: 개발 환경 구축 실전
  • 실습: 코드 품질 자동화 설정

Part 5: 생태계와 미래​

16장: 현대 자바스크립트 생태계​

  • TypeScript 소개
  • 프레임워크 개요 (React, Vue, Svelte)
  • 테스팅 기초 (Jest, Vitest)
  • 성능 최적화 기법
  • 최신 런타임: Deno, Bun 소개
  • 실습: 간단한 TypeScript 프로젝트
  • 실습: 단위 테스트 작성해보기

Part 6: 실전 프로젝트​

17장: 프로젝트 1 - 할 일 관리 앱​

  • 요구사항 분석과 설계
  • DOM 조작으로 동적 UI 구현
  • 로컬 스토리지를 활용한 데이터 저장
  • 반응형 디자인 적용
  • 추가 기능: 드래그 앤 드롭, 우선순위, 태그 시스템
  • 성능 최적화와 접근성 개선

18장: 프로젝트 2 - 날씨 앱​

  • API 연동과 비동기 처리
  • 에러 처리와 로딩 상태 관리
  • ES6+ 문법 활용
  • 코드 리팩토링과 최적화
  • 추가 기능: 지도 연동, 알림, PWA 기초
  • 성능 측정과 개선

부록​

A: 개발 환경 설정 가이드​

  • Windows/macOS/Linux 환경별 설정
  • 추천 VS Code 확장 프로그램
  • 브라우저별 개발자 도구
  • 온라인 개발 환경: CodeSandbox, StackBlitz, Replit

B: 자바스크립트 레퍼런스​

  • 내장 객체와 메서드
  • 자주 사용하는 패턴
  • 디버깅 체크리스트
  • 최신 문법 치트시트
  • 브라우저 호환성 체크리스트

C: 추가 학습 자료​

  • 공식 문서와 레퍼런스
  • 유용한 온라인 자료
  • 커뮤니티와 블로그
  • 실습 플랫폼: LeetCode, Codewars, HackerRank
  • 프로젝트 아이디어 모음