기초
5단원 · 시작·변수·연산자·제어문·함수
01. JS 시작하기
기초 · 선수: 없음 (프로그래밍 입문자 환영)
JavaScript 는 원래 브라우저에서 동작하는 언어로 시작했지만, 지금은 Node.js 덕분에 서버, CLI, 빌드 도구 등 거의 모든 곳에서 사용됩니다. 같은 코드라도 실행 환경에 따라 사용 가능한 API 가 다릅니다 (예: 브라우저는 `window`, Node 는 `process`).
02. 변수와 타입
기초 · 선수: 01_JS_시작하기
`const` 는 재할당 불가, `let` 은 재할당 가능, `var` 는 함수 스코프와 호이스팅 문제로 현대 코드에서는 사용하지 않습니다. 기본은 `const`, 값이 바뀔 때만 `let` 을 씁니다.
03. 연산자와 표현식
기초 · 선수: 02_변수와_타입
사칙연산 외에도 나머지 `%`, 거듭제곱 `**`, 증감 `++`/`--` 가 있습니다. 할당 연산자 `+=`, `-=` 등은 짧고 자주 쓰입니다.
04. 제어문
기초 · 선수: 03_연산자와_표현식
조건은 truthy/falsy 로 평가됩니다. 분기가 3 개 이상으로 길어지면 `switch` 또는 데이터(객체 매핑)로 바꾸는 것을 고려합니다.
05. 함수 기초
기초 · 선수: 04_제어문
함수 선언문은 호이스팅되어 위에서도 호출할 수 있습니다. 표현식과 화살표 함수는 변수에 할당된 이후부터 사용 가능합니다. 화살표 함수는 짧고 자체 `this` 를 가지지 않아 콜백에 적합합니다.
객체 · 배열
4단원 · 객체·배열·문자열·구조분해/스프레드
06. 객체
중급 · 선수: 05_함수_기초
객체는 키-값 쌍의 모음입니다. 관련 있는 데이터를 하나의 단위로 묶을 때 사용합니다.
07. 배열 기초
중급 · 선수: 06_객체
배열은 순서가 있는 값의 모음이며, 0 부터 시작하는 인덱스로 접근합니다.
08. 문자열
중급 · 선수: 07_배열_기초
백틱(`` ` ``)으로 감싸면 줄바꿈과 `${expr}` 보간을 지원합니다.
09. 구조분해와 스프레드
중급 · 선수: 08_문자열
객체에서 키 이름과 같은 이름의 변수에 값을 한 번에 꺼냅니다.
함수형 · ES6
4단원 · 화살표·고차함수·클로저·클래스
10. 화살표 함수
중급 · 선수: 09_구조분해와_스프레드
본문이 여러 줄이면 중괄호와 `return` 을 명시합니다.
11. 배열 고차함수
중급 · 선수: 10_화살표함수
`forEach` 는 부수효과(로그, DOM 조작 등)에 쓰고 반환값이 없습니다. `map` 은 새 배열을 반환합니다.
12. 클로저와 스코프
중급 · 선수: 11_배열_고차함수
함수의 스코프는 **선언된 위치** 에 의해 정해집니다. 호출 위치가 아닙니다.
13. 클래스
중급 · 선수: 12_클로저와_스코프
`new` 없이 호출하면 TypeError 입니다.
비동기
3단원 · 콜백/타이머·Promise·async/await
14. 콜백과 타이머
중급 · 선수: 13_고차함수
동기 코드는 한 줄씩 차례로 실행되며 한 작업이 끝나야 다음으로 넘어갑니다. 비동기 코드는 "나중에 실행될 일"을 예약하고 즉시 다음 코드로 넘어갑니다.
15. Promise
중급 · 선수: 14_콜백과_타이머
Promise 는 "미래의 어느 시점에 완료될 작업의 결과를 담는 상자"입니다. 세 가지 상태가 있습니다.
16. async / await
중급 · 선수: 15_Promise
`async` 키워드가 붙은 함수는 반환값이 자동으로 Promise 로 감쌉니다.
DOM
4단원 · 선택·조작·이벤트·폼
17. DOM 선택과 조회
중급 · 선수: 16_async_await
브라우저는 HTML 을 파싱해 DOM(Document Object Model) 트리를 만듭니다. 자바스크립트는 이 트리를 읽고 수정해 화면을 바꿉니다.
18. DOM 조작
중급 · 선수: 17_DOM_선택과_조회
`append` 는 여러 노드와 문자열을 한 번에 받을 수 있습니다. `prepend` 는 앞에 붙입니다.
19. 이벤트 처리
중급 · 선수: 18_DOM_조작
같은 함수 참조를 넘겨야 제거가 가능합니다. 익명 함수는 제거할 수 없습니다.
20. 폼과 입력
중급 · 선수: 19_이벤트_처리
브라우저가 자동으로 검증해 줍니다. `form.checkValidity()`, 요소의 `validity` 객체로 자바스크립트에서도 검사할 수 있습니다.
브라우저 API
3단원 · Fetch/JSON·저장소·ES Modules
21. Fetch와 JSON
심화 · 선수: 20_비동기_기초
브라우저(그리고 Node 18+)에 내장된 HTTP 클라이언트입니다. Promise를 반환합니다.
22. 저장소 (localStorage / sessionStorage / 쿠키)
심화 · 선수: 21_Fetch와_JSON
도메인별로 영구 저장됩니다. 명시적으로 지우기 전까지 남습니다.
23. 모듈 (ESM)
심화 · 선수: 22_저장소
한 파일에 모든 코드를 넣으면 충돌과 유지보수가 어렵습니다. 모듈은 파일별로 스코프를 격리하고 필요한 것만 노출합니다.
Node 입문
2단원 · Node 환경·npm 입문