JavaScript 배우기 - 코딩 강좌
JavaScript 배우기 - 코딩 강좌 — 주머니 속에 실제 콘솔을 담은 JavaScript 강좌
JavaScript 배우기 - 코딩 강좌는 첫 번째 변수부터 event loop까지 다루는 59개의 짧은 강좌와 200개의 레슨으로 구성된 무료 iOS 및 Android JavaScript 강좌예요. JavaScript가 휴대폰 자체에서 실행되기 때문에 내장 JS 편집기와 콘솔이 즉시 답을 보여 주고, 출력 예측, 버그 찾기, 이번 주의 kata 같은 매일의 연습으로 코딩 감각을 꾸준히 익힐 수 있어요.
- 가격
- 무료, Pro 업그레이드
- 플랫폼
- iOS 및 Android
- 언어
- 22
- 연령 등급
- 4+
- 버전
- 82.6.1
- 필요 사항
- iOS 15.1 이상
- App Store
- 5.0 ★ (1)
엔진이 휴대폰에서 실행되므로 답이 바로 표시돼요.
JS Lab은 기기에서 JavaScript를 실행해요. 콘솔에 한 줄을 입력하고 결과를 즉시 확인하거나, 앱에서 snippet을 실행해 출력 예측 카드의 실제 결과를 보여 주도록 할 수 있어요. 코드가 아마 어떻게 작동할지 설명하는 대신 실제 출력 결과를 확인할 수 있죠.
어떤 앱인가요
JavaScript 배우기 - 코딩 강좌는 JavaScript를 단계별로 가르치는 무료 iOS 및 Android 앱이에요. A1부터 C1까지 수준별로 구성된 59개 강좌와 200개 레슨에서 값과 scope, 함수와 this, DOM, Fetch API, promises와 async/await, closures, classes, generators, event loop까지 배울 수 있어요. 여기에 휴대폰에서 실행되는 JS 편집기, JavaScript 콘솔, 매일의 연습을 더했고, 개념이나 오류 메시지가 이해되지 않을 때 도움을 받을 수 있는 AI Mentor도 제공해요.
앱 내부 살펴보기
화면은 어떻게 보이나요
강좌
JavaScript 코스에서 배우는 내용
앱 자체 코스 목록에서 제공하는 59개 코스와 200개 레슨으로, 첫 번째 변수부터 브라우저와 async 코드, 고급 언어 기능까지 다룹니다.
JavaScript 시작하기
개념과 설정으로 JS를 시작한 뒤 값과 타입, 변수와 스코프, 제어 흐름을 배우고 배열과 객체를 처음 살펴봅니다.
일상에서 쓰는 JavaScript
템플릿 리터럴, optional chaining과 nullish coalescing, 구조 분해, rest와 spread, 고차 배열 메서드, JSON, 오류 처리를 배웁니다.
DOM과 이벤트
DOM 선택과 탐색, 요소 조작, 이벤트 처리, 이벤트 위임과 전파, 폼과 입력을 다룹니다.
네트워크 및 스토리지와 통신하기
Fetch API, localStorage와 sessionStorage를 활용한 웹 스토리지, FormData와 파일 처리, 클라이언트 스토리지인 IndexedDB를 배웁니다.
비동기 JavaScript
콜백, 프로미스와 마이크로태스크, 실전에서의 async/await, 타이머와 스케줄링, 이벤트 루프 심층 분석을 다룹니다.
함수, 클로저와 클래스
함수와 this, 클로저와 모듈 패턴, 커링과 합성, 클래스와 상속, 고급 this 바인딩을 배웁니다.
고급 언어 기능
이터레이터와 제너레이터, Maps와 Sets, Proxy와 Reflect, 심볼, 정규 표현식, 불변성을 다룹니다.
모듈, 워커와 성능
ES 모듈과 CommonJS의 차이, Node와 브라우저의 차이, Web Workers, service workers, 성능과 메모리, 테스트를 배웁니다.
어떻게 작동하나요
JavaScript 세션은 이렇게 진행돼요
세션은 짧은 레슨과 직접 실행해 볼 내용을 결합한 뒤, 간단한 확인 문제로 마무리돼요. 설명과 연습을 한 번에 함께 진행할 수 있죠.
짧은 레슨 읽기
몇 분 동안 레슨을 따라가 보세요. 이해하기 쉬운 설명과 질문, 작은 코드 과제로 구성되어 있어요. 첫 번째 강좌는 무료이며, 연결 상태가 좋지 않아도 레슨을 계속 이용할 수 있어요.
JS Lab에서 코드 실행하기
콘솔에 입력하고, 매일 제공되는 카드의 출력 결과를 예측한 뒤, 엔진이 실제 답을 보여 주는지 확인해 보세요. 또는 테스트 케이스 표를 기준으로 고장 난 프로그램을 수정할 수도 있어요.
확인하고 더 깊이 알아보기
퀴즈나 코딩 미션으로 마무리하고, async 코드가 헷갈릴 때는 event loop를 단계별로 살펴보세요. 이해되지 않는 부분이 있으면 AI Mentor에게 질문할 수도 있어요.
무엇이 들어 있나요
앱에 포함된 내용
59
강좌, A1부터 C1까지
값과 타입부터 DOM events, fetch, promises와 async/await, closures, Proxy와 Reflect, regex, performance까지 다루는 200개의 레슨이에요.
기기에서 실행
JS 편집기와 콘솔
내장 편집기에서 JavaScript를 작성하고 실행하고, 콘솔에서 한 줄짜리 코드를 시험해 보고, 나중에 다시 열 수 있도록 프로그램을 저장하세요. 편집기의 AI Tools는 프로그램을 검토하고 적용할 수 있는 수정안을 제안해요.
매일
JS Lab 연습
출력 결과 예측, 테스트 케이스를 활용한 버그 찾기, 무료로 제공되는 이번 주의 kata, event loop stepper, DOM arena, 5개의 시간 제한 면접 질문, 그리고 자신의 실수로 만든 복습 카드 덱을 이용할 수 있어요.
60
코딩 미션
Hello World와 template literals부터 FizzBuzz, closures, Merge Sort, Quicksort, 그래프의 BFS 또는 DFS까지, 3개 레벨로 구성된 짧은 연습 문제예요.
20
가이드 프로젝트
Order Totals, Word Frequency Counter, Async Data Pipeline, Mini Event Bus 같은 프로그램을 한 단계씩 만들어 보세요. 각 단계는 실행할 때마다 확인돼요.
AI
AI Mentor
개념이나 오류 때문에 막혔을 때 자연어로 질문하세요. 무료 사용자는 매일 몇 가지 질문을 이용할 수 있고, Pro에서는 일일 제한이 사라져요.
배경
읽기만 해서는 JavaScript를 배우기 어려운 이유는 무엇이고, 무엇을 연습해야 할까요?
JavaScript는 읽기는 쉽지만 예측하기는 어려운 방식으로 작동해요. 변수에 함수가 들어갈 수 있고, this는 함수가 호출되는 방식에 따라 달라지며, 코드가 작성된 순서대로 항상 실행되는 것도 아니에요. 설명을 읽는 것도 도움이 되지만, 코드를 직접 실행하고 출력 결과가 예상과 다르다는 것을 확인해야 이런 의외의 동작이 확실히 기억에 남아요. 그래서 JavaScript 학습은 가까이에 콘솔을 두고, snippet을 실행하기 전에 무엇을 출력할지 꾸준히 예측하는 습관과 함께할 때 가장 효과적이에요.
Scope와 closures변수가 존재하는 위치
함수는 자신이 작성된 위치 주변의 변수를 기억해요. 그 위치의 실행이 끝난 뒤에도 마찬가지예요. 이 한 가지 개념만으로도 private state, module pattern, 그리고 여러 고전적인 면접 질문을 설명할 수 있어요.
this의 값가장 흔한 난관
대부분의 언어와 달리 this가 가리키는 대상은 함수가 정의된 위치가 아니라 함수가 호출되는 방식에 따라 달라져요. Arrow functions, call, apply, bind는 각각 결과를 바꾸며, 이들을 혼동하는 것은 버그의 흔한 원인이에요.
event loopasync 코드가 사람을 당황하게 만드는 이유
JavaScript는 한 번에 한 가지 작업을 처리한 다음, 대기 중인 작업이 담긴 queue로 돌아가요. promise callback은 0 milliseconds로 설정한 timer보다 먼저 실행돼요. 그래서 call stack, microtasks, tasks를 머릿속에 그려 보기 전에는 출력 순서가 잘못된 것처럼 보일 때가 있어요.
Browser와 Node하나의 언어, 두 개의 터전
두 환경의 핵심 언어는 같지만, browser에는 DOM, events, fetch가 추가되고 Node에는 files와 processes가 추가돼요. 어떤 기능이 어느 환경에 속하는지 알면 혼란스러운 오류 메시지를 크게 줄일 수 있어요.
나에게 잘 맞는지
누구에게 적합하고, 누구에게는 적합하지 않은지
다음과 같은 분께 잘 맞아요
- 프로그래밍을 해본 적이 없고 첫 번째 변수부터 JavaScript를 설명받고 싶은 분
- 코드 한 줄을 실행하고 출력 결과를 직접 확인할 때 더 잘 배우는 분
- 긴 학습 세션보다 몇 분 안에 끝낼 수 있는 매일의 연습을 원하는 분
- JavaScript 면접을 준비하며 답변이 포함된 질문과 시간 제한이 있는 연습을 원하는 분
- 패턴을 그대로 복사하는 데 그치지 않고 async 코드와 이벤트 루프를 이해하고 싶은 분
다음과 같은 경우에는 적합하지 않아요
- 여러 파일로 구성된 완성형 웹 프로젝트를 만들어야 하는 분 — 이 작업에는 여전히 노트북과 실제 에디터가 가장 적합합니다.
- 모든 기능이 무료이기를 기대하는 분 — 첫 번째 코스, 프로젝트 하나, 미션 두 개는 무료이며 나머지는 Pro에서 잠금 해제됩니다.
- 무료 앱의 광고가 싫은 분 — 무료 버전에는 광고가 표시되고 Pro에서는 광고가 제거됩니다.
- 이미 매일 JavaScript를 작성하며 코스보다 참고 자료를 원하는 분
질문
자주 묻는 질문
휴대폰으로 따라 할 수 있는 좋은 JavaScript 코스가 있나요?
JavaScript 배우기 - 코딩 강좌는 휴대폰에 맞춰 제작된 JavaScript 코스예요. 59개의 짧은 코스와 200개의 레슨, 기기에서 코드를 실행하는 내장 JS 에디터와 콘솔, 매일 제공되는 연습 카드가 포함되어 있습니다. 레슨은 간단한 설명과 질문, 짧은 코드 과제를 함께 제공하므로, 학습을 마칠 때마다 실제로 실행해 본 결과가 남아요.
이 앱으로 휴대폰에서 JavaScript 코드를 실행할 수 있나요?
네. JS Lab은 휴대폰 자체에서 JavaScript를 실행하므로 콘솔에 결과가 바로 표시되고, 에디터에서는 완성된 프로그램을 실행할 수 있어요. 프로그램을 저장해 두었다가 나중에 다시 열 수 있으며, 에디터의 AI Tools가 프로그램을 검토하고 적용할 수정 사항을 제안해 줍니다.
완전 초보자가 JavaScript 코딩을 가장 빠르게 배우는 방법은 무엇인가요?
직접 실행해 보는 코드로 짧고 꾸준히 연습하는 것이 좋아요. JavaScript 배우기 - 코딩 강좌는 값과 변수부터 시작하고, 매일 학습 목표와 연속 학습 기록을 제공해 꾸준히 학습하도록 도와주며, 직접 시도해 볼 수 있는 콘솔을 제공합니다. 매일 제공되는 출력 결과 예측 카드는 코드를 실행하기 전에 결과를 추론하는 습관을 길러 줍니다.
JS Lab이 무엇인가요?
JS Lab은 JavaScript 배우기 - 코딩 강좌에서 매일 연습할 수 있는 공간이에요. 콘솔, 출력 결과 예측 카드, 테스트 케이스로 확인하는 버그 찾기, 주간 카타, 이벤트 루프 스테퍼, DOM 아레나, 시간 제한이 있는 면접 질문 5개, 직접 저지른 실수로 만든 복습 덱이 포함되어 있습니다.
이 앱에서 async/await와 이벤트 루프를 설명해 주나요?
네. 콜백, 프로미스와 마이크로태스크, 실전에서의 async/await, 이벤트 루프 심층 분석을 다루는 코스가 있어요. 또한 이벤트 루프 도구를 사용하면 호출 스택, 마이크로태스크, 태스크를 한 번에 하나씩 따라가며 출력 결과가 왜 그런 순서로 나타나는지 확인할 수 있습니다.
JavaScript 배우기 - 코딩 강좌가 JavaScript 면접 준비에 도움이 되나요?
답변이 포함된 JavaScript 면접 질문 50개와 JS Lab에서 시간 제한이 있는 질문 5개를 제공하는 Interview 모드가 있어요. 면접에서 자주 다루는 클로저, this, 프로미스, 이벤트 루프에는 각각 전용 코스가 마련되어 있습니다.
JavaScript 배우기 - 코딩 강좌는 무료인가요?
무료로 다운로드할 수 있어요. 첫 번째 코스, 첫 번째 guided project, 코딩 미션 두 개, JS Lab 일일 연습, 일일 AI Mentor 이용량은 무료이며 무료 버전에는 광고가 표시됩니다. Pro에서는 모든 코스, 프로젝트, 미션, 무제한 AI Mentor, 인증서 시험이 잠금 해제되고 광고가 제거됩니다.
인증서가 있나요?
네. JavaScript 배우기 - 코딩 강좌의 최종 시험에 합격하면 수료 인증서를 받을 수 있어요. 이 인증서는 여러분이 수행한 학습 내용을 기록하지만 공인 자격은 아니므로, 설명할 수 있는 프로젝트와 함께 제시하는 것이 가장 좋습니다.
언어뿐 아니라 브라우저도 가르치나요?
네. 언어 자체를 넘어 DOM 선택과 조작, 이벤트와 이벤트 위임, 폼, Fetch API, localStorage, IndexedDB, Canvas, WebSockets, Web Workers를 다루는 코스가 있어요. 또한 Node와 브라우저를 비교하는 별도의 코스에서 각 기능이 어디에 속하는지 배울 수 있습니다.
어떤 플랫폼과 언어를 지원하나요?
JavaScript 배우기 - 코딩 강좌는 App Store를 통해 iPhone과 iPad에서, Google Play를 통해 Android에서 22개 언어로 이용할 수 있어요. App Store에서 4+ 등급을 받았어요.
시작하기
오늘 JavaScript 첫 줄을 작성해 보세요
iOS와 Android에서 22개 언어로 무료로 시작할 수 있어요.
CoddyKit의 다른 앱
iOS 및 Android에서 이용할 수 있어요.