0Pricing
JavaScript Academy icon

JavaScript Academy

JAVASCRIPTWebFrontendBackendBeginnerScripting

JavaScript Academy에서 JavaScript를 배워 웹 상호작용의 잠재력을 깨워보세요.

🤖 AI 기반📚 59개 코스👥 100,000명 이상의 학습자⭐ 4.9 평점
코스 개요

JavaScript: 웹을 움직이는 언어

JavaScript는 모든 브라우저에서 기본으로 실행되는 유일한 프로그래밍 언어이며, Node.js를 통해 서버에서도 실행됩니다. 버튼 클릭과 폼 검증부터 실시간 데이터 스트림과 오프라인 기능이 있는 웹 앱까지 모든 것을 제어합니다. 이 트랙은 값과 타입부터 이벤트 루프, Web Workers, Service Workers까지 언어에 대한 엄밀하고 완전한 이해를 구축합니다.

학습 내용

변수, 스코프, 제어 흐름, 핵심 데이터 타입부터 시작하여 DOM 조작, 이벤트 위임, HTTP 요청을 위한 Fetch API로 진행됩니다. 트랙 심화 단계에서는 클로저와 모듈 패턴, 함수형 프로그래밍 패턴, 커링과 함수 합성, 비동기 JavaScript(콜백, Promises, 마이크로태스크, async/await)를 다룹니다. 다루는 브라우저 API에는 localStorage, IndexedDB, Canvas API, WebSockets, Web Components, Intersection Observer, Streams API가 포함됩니다. 고급 과정에서는 이벤트 루프를 깊이 있게 다루고, Proxy와 Reflect, Web Workers, Service Workers와 오프라인 캐싱, 반복자와 제너레이터, 성능 및 메모리 관리를 다룹니다.

학습 경로

A1부터 C1까지 68개의 활성 과정이 있습니다. A1 단계는 필수 요소를 다룹니다: 값과 타입, 변수와 스코프, 배열과 객체, 제어 흐름. A2는 템플릿 리터럴, 옵셔널 체이닝, 함수와 this, 에러 처리, Date 객체로 확장됩니다. B1은 브라우저 환경을 소개합니다: DOM 탐색, 이벤트 처리, Fetch API, 디스트럭처링, 고차 배열 메서드, 클래스. B2는 더 광범위합니다: 함수형 패턴, 비동기 패턴, Maps와 Sets, Regex, Web Components, 모듈, 패키징, 테스팅 기초. C1 단계는 이벤트 루프 심화, Proxy와 Reflect, Web Workers와 멀티스레딩, Service Workers와 오프라인 캐싱, 반복자와 제너레이터, Defensive JS로 마무리됩니다.

학습 방식

각 과정은 내장 코드 에디터에서 실시간 피드백을 받으며 완료하는 짧고 집중된 레슨으로 나뉩니다. 막힐 때마다 AI 튜터를 이용할 수 있으며, 모든 개념이 필수 조건이 확실해진 후에만 나타나도록 구성되어 있습니다.

학습 시작 →

학습 방식

🎯
인터랙티브 레슨
실시간 피드백을 받으며 직접 코딩 연습하기
🤖
AI 튜터
막힐 때마다 AI 튜터에게 즉시 도움받기
💻
내장 에디터
브라우저에서 바로 코드 작성 & 실행하기
🏆
수료증
과정을 완료하면 수료증 취득하기
커리큘럼

59개 코스

JavaScript Academy 학습 경로의 모든 코스.

01

JavaScript 입문

A13개 레슨

JavaScript가 무엇인지, 지구상에서 가장 인기 있는 프로그래밍 언어인 이유와 JavaScript로 만들 수 있는 놀라운 것들을 알아봅니다.

02

JavaScript 입문

A11개 레슨PRO

초보자를 위한 JavaScript 입문 강좌와 함께 프로그래밍 여정을 시작해 보세요. 이 종합 강좌에서는 JavaScript 언어와 기본 구조를 소개하고, JavaScript가 세계에서 가장 인기 있는 소프트웨어 기술 중 하나인 이유를 살펴봅니다.…

03

JS 시작하기: 개념과 설정

A13개 레슨PRO

JavaScript를 올바르게 시작합니다. JS가 무엇인지, 엔진이 이를 실행하는 방식, 실행 환경(브라우저와 Node), 첫 스크립트를 설정하고 실행하는 방법을 배웁니다.

04

값과 타입 핵심

A13개 레슨PRO

JS의 값과 타입을 익힙니다. 원시 값과 객체의 차이, typeof , 핵심 원시 타입(number, bigint, string, boolean, null, undefined, symbol)을 다룹니다.

05

변수와 스코프

A13개 레슨PRO

변수 선언( let , const , 레거시 var ), 블록 스코프와 함수 스코프의 차이, 더 안전한 코드를 위한 시간적 사각 지대를 이해합니다.

06

제어 흐름 기초

A13개 레슨PRO

핵심 제어 흐름을 배웁니다. 명확하고 초보자 친화적인 패턴으로 if/else , else if , switch 를 사용합니다.

07

배열과 객체(입문)

A12개 레슨PRO

배열과 객체를 다룹니다. 생성, 조회, 수정, 삭제를 수행하고 for…of/forEach로 순회하며 속성에 안전하게 접근합니다.

08

옵셔널 체이닝과 널 병합

A24개 레슨PRO

옵셔널 체이닝과 널 병합을 사용해 간결하고 null에 안전한 JavaScript를 작성합니다.

09

템플릿 리터럴과 태그된 템플릿

A24개 레슨PRO

동적 문자열을 만들고 강력한 태그된 템플릿 함수를 생성합니다.

10

Date 객체와 서식 지정

A24개 레슨PRO

JavaScript에서 날짜와 시간을 다루고 사용자에게 맞는 형식으로 표시합니다.

11

콘솔, 디버깅과 DevTools

A24개 레슨PRO

콘솔 메서드, 중단점, 브라우저 DevTools를 사용해 JavaScript의 문제를 진단하고 수정합니다.

12

함수와 This(입문)

A23개 레슨PRO

함수 선언과 표현식의 차이, 화살표 함수의 기초, 깔끔하고 초보자 친화적인 코드에 각 형식을 활용할 시점을 배웁니다.

13

문자열, 숫자와 날짜

A23개 레슨PRO

문자열, 숫자, 날짜를 다룹니다. 템플릿 리터럴, 자주 쓰는 문자열 메서드, 안전한 반올림, 기본적인 Date 사용법을 배웁니다.

14

오류 처리 기초

A22개 레슨PRO

try/catch/finally 로 오류를 안전하게 처리하고, 의미 있는 메시지를 throw 하며, 명확한 제어 흐름을 위한 작은 사용자 지정 오류를 만듭니다.

15

DOM 선택과 순회

B14개 레슨PRO

최신 DOM 선택 및 순회 API를 사용해 웹 페이지의 요소를 찾고 탐색합니다.

16

DOM 요소 조작

B14개 레슨PRO

JavaScript로 페이지 요소와 그 콘텐츠를 동적으로 생성, 수정, 삭제합니다.

17

이벤트 처리

B14개 레슨PRO

이벤트 리스너, 이벤트 객체, 이벤트 제어를 사용해 사용자 상호 작용에 응답합니다.

18

폼과 입력 처리

B14개 레슨PRO

JavaScript로 HTML 폼의 사용자 입력을 읽고 검증하며 이에 응답합니다.

19

형 변환과 동등성 규칙

B14개 레슨PRO

JavaScript의 형 변환 규칙과 참 같은 값의 개념, 그리고 ==와 ===의 차이를 익힙니다.

20

이벤트 위임과 전파

B14개 레슨PRO

캡처 단계와 버블 단계, 이벤트 위임을 사용해 대규모 환경에서도 이벤트를 효율적으로 처리합니다.

21

Fetch API와 HTTP 요청

B14개 레슨PRO

Fetch API와 프로미스, 적절한 오류 처리를 사용해 서버와 통신합니다.

22

웹 저장소: localStorage와 sessionStorage

B14개 레슨PRO

Web Storage API로 브라우저에 데이터를 저장하고 그 한계를 이해합니다.

23

FormData와 파일 처리

B14개 레슨PRO

브라우저에서 업로드와 다운로드를 위해 파일, 블롭, 멀티파트 폼 데이터를 다룹니다.

24

구조 분해와 Rest/Spread

B12개 레슨PRO

더 깔끔한 할당, 기본값, 이름 변경, 값 교환 같은 간단한 패턴을 위해 배열과 객체 구조 분해를 익힙니다.

25

고차 함수와 배열 메서드

B12개 레슨PRO

고차 배열 메서드로 명확하고 초보자 친화적인 코드를 작성합니다. map 과 filter 부터 시작해 두 메서드를 안전하게 결합하는 방법을 배웁니다.

26

객체와 프로토타입(입문)

B12개 레슨PRO

프로토타입 체인, 자체 속성과 상속된 속성의 차이, 간단한 프로토타입을 위한 Object.create, 기본 속성 설명자를 이해합니다.

27

타이머와 스케줄링

B13개 레슨PRO

타이머를 안전하게 사용합니다. setTimeout , setInterval , 시간 오차를 고려한 스케줄링으로 더 원활한 앱을 만듭니다.

28

JSON과 직렬화

B13개 레슨PRO

JSON을 안전하게 다룹니다. JSON.stringify / JSON.parse , 선택적인 replacer / reviver , 초보자를 위한 간단한 안전 수칙을 배웁니다.

29

클래스와 상속

B13개 레슨PRO

현대적인 클래스를 안전하게 사용합니다. 공개 필드, 비공개 # 필드 , static 멤버를 다루며, 간단하고 초보자 친화적인 예제를 살펴봅니다.

30

심벌과 활용 방법

B24개 레슨PRO

심벌과 잘 알려진 심벌을 사용해 고유 식별자를 만들고 객체 동작을 사용자 지정합니다.

31

함수형 프로그래밍 패턴

B24개 레슨PRO

순수 함수, 불변성, 선언형 데이터 변환을 사용해 더 깔끔한 JavaScript를 작성합니다.

32

클로저와 모듈 패턴

B24개 레슨PRO

클로저를 사용해 상태를 캡슐화하고 모듈화된 비공개 JavaScript를 구성합니다.

33

커링과 함수 합성

B24개 레슨PRO

함수를 커링하고 서로 합성해 유연하고 재사용 가능한 로직을 구성합니다.

34

불변성과 객체 동결

B24개 레슨PRO

Object.freeze와 불변 업데이트 패턴을 사용해 원치 않는 데이터 변경을 방지합니다.

35

콜백, 프로미스와 마이크로태스크

B23개 레슨PRO

이벤트 루프를 단계별로 이해합니다. 동기 코드, 작업 큐(setTimeout), 마이크로태스크 큐(Promise/queueMicrotask), 간단한 실행 순서 규칙을 다룹니다.

36

async/await 실전

B23개 레슨PRO

async/await 를 작성하고 사용합니다. 비동기 함수를 만들고, try/catch로 오류를 처리하며, 순차 실행과 병렬 실행 중 적절한 방식을 선택합니다.

37

맵, 집합과 약한 컬렉션

B23개 레슨PRO

더 명확한 데이터 처리를 위해 Map 과 Set 을 배웁니다. 키→값 조회, 고유성 보장, 일상적으로 유용한 간단한 패턴을 다룹니다.

38

정규 표현식과 텍스트 처리

B23개 레슨PRO

초보자 친화적인 정규 표현식을 배웁니다. 패턴을 만들고 문자열을 테스트하며, 앵커를 사용하고, 간단한 텍스트 작업에 유용한 플래그를 적용합니다.

39

웹 컴포넌트와 사용자 지정 요소

B24개 레슨PRO

사용자 지정 요소와 shadow DOM으로 재사용 가능하고 캡슐화된 UI 컴포넌트를 만듭니다.

40

Intersection Observer API

B24개 레슨PRO

지연 로딩, 무한 스크롤, 애니메이션을 위해 요소가 뷰포트에 들어오는 시점을 감지합니다.

41

IndexedDB 클라이언트 저장소

B24개 레슨PRO

트랜잭션을 지원하는 IndexedDB 데이터베이스로 크고 구조화된 데이터를 브라우저에 저장합니다.

42

Canvas API

B24개 레슨PRO

HTML canvas와 2D 컨텍스트를 사용해 그래픽, 도형, 이미지를 프로그래밍 방식으로 그립니다.

43

브라우저의 WebSockets

B24개 레슨PRO

WebSockets로 브라우저와 서버 사이에 실시간 양방향 통신을 구축합니다.

44

드래그 앤 드롭 API

B24개 레슨PRO

네이티브 HTML 드래그 앤 드롭 API를 사용해 직관적인 드래그 앤 드롭 상호 작용을 구현합니다.

45

Intl을 사용한 국제화

B24개 레슨PRO

내장 Intl API로 모든 로캘에 맞게 숫자, 날짜, 통화, 텍스트의 형식을 지정합니다.

46

모듈: ESM과 CommonJS

B23개 레슨PRO

JavaScript 모듈을 이해합니다. ESM의 가져오기와 내보내기, 기본 내보내기와 이름 있는 내보내기의 차이, CommonJS 상호 운용성을 간단히 살펴봅니다. 초보자도 따라올 수 있도록 작은 단계로 진행합니다.

47

패키징과 스크립트

B23개 레슨PRO

package.json 의 기초를 배웁니다. 스크립트, 의존성과 devDependencies의 차이, 간단한 시맨틱 버전 범위를 다룹니다. 초보자 친화적이고 실용적인 내용으로 구성되어 있습니다.

48

테스트와 품질(가벼운 방식)

B23개 레슨PRO

가벼운 테스트 관점을 익힙니다. 작은 단정문, 준비–실행–검증, 실패→성공→리팩터링 흐름, 무거운 도구 없이 적용하는 실용적인 팁을 다룹니다.

49

미니 프로젝트(언어만 사용)

B23개 레슨PRO

프레임워크 없이 실행 가능한 작은 JS 미니 프로젝트를 만듭니다. 표현식 평가기 로 시작해 로그 분석기와 프로미스 풀을 만들어 봅니다.

50

Node와 브라우저의 차이

B23개 레슨PRO

브라우저와 Node의 주요 차이를 파악합니다. 전역 객체, fetch 사용 가능 여부, 파일 및 네트워크 API 접근을 다루며, 간단한 점검과 안전한 패턴을 배웁니다.

51

이벤트 루프 심층 이해

C14개 레슨PRO

호출 스택, 작업 큐, 마이크로태스크를 사용해 JavaScript가 작업을 예약하는 방식을 이해합니다.

52

Proxy와 Reflect

C14개 레슨PRO

Proxy와 Reflect API로 객체의 기본 연산을 가로채고 사용자 지정합니다.

53

웹 워커와 멀티스레딩

C14개 레슨PRO

웹 워커를 사용해 무거운 연산을 주 스레드 밖에서 실행하고 반응성이 뛰어난 인터페이스를 구현합니다.

54

서비스 워커와 오프라인 캐싱

C14개 레슨PRO

서비스 워커와 Cache API로 웹 앱을 빠르고 오프라인에서도 사용할 수 있게 만듭니다.

55

Streams API

C14개 레슨PRO

읽기 가능 스트림, 쓰기 가능 스트림, 변환 스트림으로 데이터를 점진적으로 처리해 효율성을 높입니다.

56

반복자와 생성기

C13개 레슨PRO

JavaScript의 반복 프로토콜을 이해합니다. 데이터를 반복 가능 하게 만드는 요소, 반복자 의 작동 방식, for...of , 전개 구문, Array.from의 사용법을 배웁니다.

57

고급 this와 바인딩

C13개 레슨PRO

this 를 깊이 이해합니다. 어휘적 this와 동적 this의 차이, 화살표 함수, 실용적인 바인딩 패턴을 간단하고 초보자 친화적인 단계로 배웁니다.

58

성능과 메모리

C13개 레슨PRO

간단하지만 효과가 큰 성능 습관을 배웁니다. 기본적인 Big-O 사고방식, 자주 실행되는 경로와 드물게 실행되는 경로, 초보자를 위한 작은 자료 구조 최적화를 다룹니다.

59

방어적 JS

C13개 레슨PRO

초보자를 위한 방어적 JavaScript를 배웁니다. 입력을 검증하고, 필요한 곳에서는 출력을 이스케이프하며, 기본적으로 안전한 작은 패턴을 유지합니다.

자주 묻는 질문

자주 묻는 질문

JavaScript Academy 강의는 무료인가요?

네, JavaScript Academy 강의를 무료로 시작하고 인터랙티브 레슨을 모두 무료로 완료할 수 있습니다. 선택적 PRO 구독을 통해 고급 AI 도구와 공유 가능한 수료증을 잠금 해제할 수 있습니다.

JAVASCRIPT을(를) 배우기 위해 사전 경험이 필요한가요?

아니요. 강의는 기초부터 시작하여 점차 더 심화된 주제로 나아가므로 JAVASCRIPT 경험이 없어도 시작할 수 있습니다.

CoddyKit에서 JAVASCRIPT은(는) 어떻게 배우나요?

직접 해보면서 배웁니다. 짧은 인터랙티브 레슨은 명확한 설명과 실시간으로 실행되는 실습 코딩 연습을 함께 제공하며, 24시간 AI 튜터가 막힐 때마다 맞춤형 도움을 줍니다.

JavaScript Academy을(를) 완료하면 수료증을 받나요?

네, PRO 학습자는 시험을 응시하고 JavaScript Academy 강의의 검증 코드가 포함된 공유 가능한 수료증을 취득할 수 있습니다.

휴대폰에서 JAVASCRIPT을(를) 배울 수 있나요?

네, CoddyKit은 웹과 iOS, Android 네이티브 앱으로 이용 가능하므로 어느 기기에서나 JAVASCRIPT을(를) 배우고 진행 상황이 모든 기기에서 동기화됩니다.

JavaScript Academy을(를) 지금 시작하기

AI 기반 강의로 프로그래밍을 배우는 수천 명의 학습자들과 함께하세요.

무료로 시작하기 →모든 강의 보기