🌐 전체 25편 강의 보기 — https://coding-now.com/blog/javascript
한국어 무료 JavaScript 강의 25편 + Node.js 입문 · Coding Now
순수 JavaScript 와 표준 DOM API 만으로 25편에 걸쳐 학습합니다. 별도 빌드 도구, 번들러, 프레임워크는 사용하지 않습니다.
이 강의는 프로그래밍 입문자가 JavaScript 를 처음부터 익히고, 브라우저에서 DOM·이벤트·Fetch 까지 자유롭게 다루며, Node.js 로 간단한 CLI 도구까지 만들 수 있도록 설계된 25편 커리큘럼입니다.
- 한국어 본문 + 영문 코드/명령
- 외부 의존성 최소화 (Chrome 최신, Node.js 20+)
- 매 단원 5~15줄의 검증 가능한 예제 + 과제 정답 제공
let/const, 원시 타입, 함수, 객체/배열 등 기초 문법을 자유롭게 사용- ES2020+ 문법 (옵셔널 체이닝, 널 병합, 디스트럭처링, 스프레드) 활용
- 화살표 함수, 고차 함수, 클로저, 클래스로 함수형 + 객체지향 사고
- Promise, async/await 로 비동기 코드 작성
- DOM 선택·조작·이벤트·폼 입력 처리
- Fetch API 와 JSON, 브라우저 저장소, ES 모듈 활용
- Node.js 환경 이해 + npm 으로 간단한 CLI 도구 제작
- 브라우저: Chrome 최신 버전 (Firefox/Edge/Safari 도 동작)
- Node.js: 20.x LTS 이상 (공식 사이트)
- 에디터: VS Code + JavaScript/ESLint 확장
- OS: 무관 (Windows, macOS, Linux 모두 동일하게 진행)
node --version # v20.x.x 이상
npm --version # 10.x 이상Lecture_JavaScript/
├── README.md
├── 01_기초/ (01~05) 변수·연산자·제어문·함수
├── 02_객체_배열/ (06~09) 객체·배열·문자열·디스트럭처링
├── 03_함수형_ES6/ (10~13) 화살표·고차함수·클로저·클래스
├── 04_비동기/ (14~16) 콜백·Promise·async/await
├── 05_DOM/ (17~20) DOM 선택·조작·이벤트·폼
├── 06_브라우저_API/ (21~23) Fetch·저장소·모듈
└── 07_Node_입문/ (24~25) Node 환경·npm
각 단원 폴더는 README.md(강의 본문) + src/(실행 예제) + homework/(과제 명세) + homework/answer/(정답) 으로 구성됩니다.
| Part | # | 폴더 | 주제 |
|---|---|---|---|
| 01 기초 | 01 | 01_JS_시작하기 | 브라우저·콘솔·<script> 태그·실행 환경·DevTools |
| 02 | 02_변수와_타입 | let/const, 원시 타입·typeof·형변환 |
|
| 03 | 03_연산자와_표현식 | 산술·비교·논리·옵셔널 체이닝·널 병합 | |
| 04 | 04_제어문 | if/switch/for/while/for...of/for...in |
|
| 05 | 05_함수_기초 | 선언·표현식·매개변수·반환·스코프·기본값 | |
| 02 객체·배열 | 06 | 06_객체 | 객체 리터럴·접근·메서드·계산된 속성명 |
| 07 | 07_배열_기초 | 인덱스·push/pop/shift/unshift·반복 |
|
| 08 | 08_문자열 | 템플릿 리터럴·메서드·정규식 입문 | |
| 09 | 09_구조분해와_스프레드 | 디스트럭처링·...rest·...spread·기본값 |
|
| 03 함수형·ES6+ | 10 | 10_화살표함수 | 화살표 vs function·암묵 반환·this 차이 |
| 11 | 11_배열_고차함수 | map·filter·reduce·체이닝 |
|
| 12 | 12_클로저와_스코프 | 렉시컬 스코프·클로저·모듈 패턴 | |
| 13 | 13_클래스 | class·extends·super·static·게터/세터 |
|
| 04 비동기 | 14 | 14_콜백과_타이머 | setTimeout·이벤트 루프·콜백 지옥 |
| 15 | 15_Promise | Promise·then/catch·체이닝·all/race |
|
| 16 | 16_async_await | async 함수·try/catch·병렬/순차 |
|
| 05 DOM | 17 | 17_DOM_선택과_조회 | querySelector·속성·textContent/innerHTML |
| 18 | 18_DOM_조작 | createElement·appendChild·classList·style |
|
| 19 | 19_이벤트_처리 | addEventListener·preventDefault·이벤트 위임 |
|
| 20 | 20_폼과_입력 | input·submit·HTML5 validation·FormData |
|
| 06 브라우저 API | 21 | 21_Fetch와_JSON | fetch·JSON.parse/stringify·에러 처리 |
| 22 | 22_저장소 | localStorage·sessionStorage·쿠키 개요 |
|
| 23 | 23_모듈_ESM | import/export·<script type="module"> |
|
| 07 Node.js 입문 | 24 | 24_Node_환경 | node 실행·process·fs·CommonJS vs ESM |
| 25 | 25_npm_입문 | package.json·scripts·dependencies·CLI 만들기 |
권장: 1주 2~3편, 9~12주 완주.
- 각 단원 폴더의
README.md부터 끝까지 정독 src/의 예제를 직접 입력해서 실행 (브라우저 콘솔 또는node src/01_xxx.js)homework/README.md의 과제를 먼저 풀어 본 뒤homework/answer/의 정답과 비교- "다음 단원" 링크로 진행
각 파트를 마칠 때마다 가볍게 만들어 볼 만한 실습입니다.
| Part | 추천 미니 프로젝트 |
|---|---|
| 01 기초 | 간단한 BMI 계산기 (콘솔), 윤년 판별기 |
| 02 객체·배열 | 학생 성적 관리 (배열+객체), 단어 빈도 카운터 |
| 03 함수형·ES6+ | 할 일 필터(완료/미완료), 평균/총합 계산기 |
| 04 비동기 | 5초 카운트다운 타이머, 가상의 데이터 fetch 시뮬레이션 |
| 05 DOM | Todo 앱, 간단한 계산기 UI, 실시간 시계 |
| 06 브라우저 API | 날씨 위젯(공개 API), 메모 앱(localStorage), 이미지 갤러리 |
| 07 Node.js | 인사 CLI, 파일 한 줄씩 통계 내는 스크립트 |
MIT License — 자유로운 사용·수정·재배포를 환영합니다. 출처(저장소 URL) 표기를 권장합니다.