JavaScript 실전 가이드
JavaScript 기초부터 비동기, DOM, 클래스, 모듈까지
📜 JavaScript 기초
JavaScript 시작하기 - 변수, 함수, 배열, 객체
-
JavaScript 시작하기: 개발 환경, 기본 문법, 브라우저에서 실행하기
JavaScript와 ECMAScript의 관계, 브라우저와 Node.js 실행 환경의 차이, V8 엔진과 이벤트 루프·가비지 컬렉션의 기본 구조를 살펴본 뒤 변수·타입·연산자와 var·let·const 선택 기준으로 첫 코드를 작성합니다.
-
JavaScript 변수와 데이터 타입: let, const, var와 원시 타입
let·const·var 선언 차이와 블록·함수·전역 스코프, 원시 타입과 참조 타입, typeof와 암묵적 타입 변환, var·let·함수 호이스팅과 TDZ를 변수 스왑·안전한 숫자 변환 같은 예제로 설명합니다.
-
JavaScript 함수: 선언식, 화살표 함수, 콜백, 클로저
함수 선언문·함수 표현식·화살표 함수의 차이, 기본값·나머지·구조 분해 매개변수, 고차 함수와 클로저로 만드는 프라이빗 변수, this 바인딩과 bind·call·apply, 콜백과 IIFE까지 예제로 정리합니다.
-
JavaScript 배열과 객체: 자주 쓰는 Array·Object 메서드
push·splice·find·map·filter·sort 같은 배열 메서드와 Object.keys·entries·assign 정적 메서드, 배열·객체 구조 분해, spread와 rest 연산자, reduce 심화와 메서드 체이닝을 데이터 변환 예제로 익힙니다.
🌐 웹 개발
비동기, DOM, 클래스, 모듈
-
JavaScript 비동기 프로그래밍: 콜백, Promise, async/await
콜백 지옥이 생기는 이유에서 시작해 Promise 생성과 체이닝, Promise.all 등 정적 메서드, async/await 병렬 실행과 에러 처리를 다루고, 재시도·타임아웃·순차 처리 예제와 마이크로태스크 순서를 설명합니다.
-
JavaScript DOM 조작 | 웹 페이지 동적으로 제어하기
getElementById와 querySelector로 요소를 선택하고, innerHTML과 textContent의 보안 차이, 속성·스타일 조작, 요소 생성·삭제, 캡처링·버블링과 이벤트 위임을 To-Do 리스트·탭·모달 예제로 구현합니다.
-
JavaScript 클래스: ES6 class 문법, 상속, private 필드
ES6 class 정의와 getter·setter, static 메서드를 이용한 팩토리, extends와 super 상속, # 접두사 private 필드를 게임 캐릭터·쇼핑몰 예제로 익히고, super() 누락이나 new 없이 호출하는 실수를 짚습니다.
-
JavaScript 모듈: ES Modules와 CommonJS의 차이
ES Modules의 named·default export와 import, CommonJS의 module.exports·require 차이, 브라우저 type="module"과 동적 import, Node.js package.json 설정, Webpack·Vite 번들러 선택을 예제로 설명합니다.
🚀 고급 패턴
에러 처리, 디자인 패턴
-
JavaScript 에러 처리 | try-catch, Error 객체, 커스텀 에러
try-catch-finally 흐름과 TypeError·RangeError 같은 내장 Error 타입, Error를 상속한 커스텀 에러 클래스, Promise와 async/await의 비동기 에러 처리, 에러 래퍼·재시도·로깅 패턴을 API 클라이언트 예제로 설명합니다.
-
JavaScript 디자인 패턴 | 싱글톤, 팩토리, 옵저버 패턴
JavaScript에서 싱글톤·팩토리·모듈·옵저버·프록시·전략 패턴을 구현하고, ES6 모듈과 클래스, Proxy 객체로 현대적으로 바꾸는 방법을 이벤트 시스템·캐싱 프록시·상태 관리 예제로 설명합니다.