🔥Limited Offer: Get 50% OFFon AI & Full Stack Courses🔥
←Lectures
⚡

JAVASCRIPT + NODE.JS · 25 lessons

Pure JavaScript + standard DOM API — no bundlers, no frameworks.

25-lesson track: basics, objects/arrays, functional ES6, async, DOM, browser APIs, and Node + npm. Each lesson bundles a README, runnable example code, a homework spec and the answer.

Open source repo
🌱

Part 1: Basics

5 lessons

🌱
Lesson 01

JS 시작하기

브라우저·콘솔·`<script>` 태그·실행 환경·DevTools

브라우저콘솔<script> 태그실행 환경DevTools
→
🌱
Lesson 02

변수와 타입

`let`/`const`, 원시 타입·`typeof`·형변환

let/const원시 타입typeof형변환
→
🌱
Lesson 03

연산자와 표현식

산술·비교·논리·옵셔널 체이닝·널 병합

산술비교논리옵셔널 체이닝널 병합
→
🌱
Lesson 04

제어문

`if`/`switch`/`for`/`while`/`for...of`/`for...in`

if/switchfor/whilefor...offor...in
→
🌱
Lesson 05

함수 기초

선언·표현식·매개변수·반환·스코프·기본값

선언/표현식매개변수반환스코프기본값
→
📦

Part 2: Objects & Arrays

4 lessons

📦
Lesson 06

객체

객체 리터럴·접근·메서드·계산된 속성명

객체 리터럴접근메서드계산된 속성명
→
📦
Lesson 07

배열 기초

인덱스·`push`/`pop`/`shift`/`unshift`·반복

인덱스push/pop/shift/unshift반복
→
📦
Lesson 08

문자열

템플릿 리터럴·메서드·정규식 입문

템플릿 리터럴메서드정규식 입문
→
📦
Lesson 09

구조분해와 스프레드

디스트럭처링·`...rest`·`...spread`·기본값

디스트럭처링...rest...spread기본값
→
⚡

Part 3: Functional & ES6+

4 lessons

⚡
Lesson 10

화살표 함수

화살표 vs `function`·암묵 반환·`this` 차이

화살표 vs function암묵 반환this 차이
→
⚡
Lesson 11

배열 고차함수

`map`·`filter`·`reduce`·체이닝

mapfilterreduce체이닝
→
⚡
Lesson 12

클로저와 스코프

렉시컬 스코프·클로저·모듈 패턴

렉시컬 스코프클로저모듈 패턴
→
⚡
Lesson 13

클래스

`class`·`extends`·`super`·`static`·게터/세터

classextendssuperstatic게터/세터
→
⏳

Part 4: Async

3 lessons

⏳
Lesson 14

콜백과 타이머

`setTimeout`·이벤트 루프·콜백 지옥

setTimeout이벤트 루프콜백 지옥
→
⏳
Lesson 15

Promise

`Promise`·`then`/`catch`·체이닝·`all`/`race`

Promisethen/catch체이닝all/race
→
⏳
Lesson 16

async/await

`async` 함수·`try/catch`·병렬/순차

async 함수try/catch병렬/순차
→
🖥

Part 5: DOM

4 lessons

🖥
Lesson 17

DOM 선택과 조회

`querySelector`·속성·`textContent`/`innerHTML`

querySelector속성textContent/innerHTML
→
🖥
Lesson 18

DOM 조작

`createElement`·`appendChild`·`classList`·`style`

createElementappendChildclassListstyle
→
🖥
Lesson 19

이벤트 처리

`addEventListener`·`preventDefault`·이벤트 위임

addEventListenerpreventDefault이벤트 위임
→
🖥
Lesson 20

폼과 입력

`input`·`submit`·HTML5 validation·`FormData`

inputsubmitHTML5 validationFormData
→
🌐

Part 6: Browser API

3 lessons

🌐
Lesson 21

Fetch와 JSON

`fetch`·`JSON.parse`/`stringify`·에러 처리

fetchJSON.parse/stringify에러 처리
→
🌐
Lesson 22

저장소

`localStorage`·`sessionStorage`·쿠키 개요

localStoragesessionStorage쿠키 개요
→
🌐
Lesson 23

모듈 ESM

`import`/`export`·`<script type="module">`

import/export<script type=module>
→
📦

Part 7: Node.js 입문

2 lessons

📦
Lesson 24

Node 환경

`node` 실행·`process`·`fs`·CommonJS vs ESM

node 실행processfsCommonJS vs ESM
→
📦
Lesson 25

npm 입문

`package.json`·scripts·dependencies·CLI 만들기

package.jsonscriptsdependenciesCLI 만들기
→
🛠

Mini Projects (Workbook)

Build one at the end of each part to cement learning

🛠
Part 1

BMI Calculator / Leap Year Checker

ConsoleMathConditionals
🛠
Part 2

Student Grade Manager / Word Frequency Counter

ArraysObjectsLoops
🛠
Part 3

Todo Filter / Average Calculator

Higher-order functionsClosure
🛠
Part 4

5-sec Countdown / Mock Data Fetch

setTimeoutPromiseasync/await
🛠
Part 5

Todo App / Calculator UI / Live Clock

DOMEventsForms
🛠
Part 6

Weather Widget / Memo App / Image Gallery

FetchlocalStorageModules
🛠
Part 7

Greeting CLI / File Stats Script

Node.jsfsnpmpackage.json
Call NowEnroll Now