강의

멘토링

로드맵

[전자책] 만원으로 배우는 자바스크립트 — 문법부터 실전 UI까지

안녕하세요 4년차 프론트엔드 개발자 감자입니다. 제가 처음 자바스크립트를 배울 때를 떠올려보면 유튜브나 책을 따라 칠 때는 다 이해한 것 같았는데, 막상 빈 에디터를 켜면 머리가 새하얘지는 경험을 한 적이 많았습니다. 처음엔 그저 구글링해서 찾은 코드를 복사하고 붙여넣기 바빴습니다. 그러다 보니 에러가 터지면 어디서부터 손을 대야 할지 몰라 밤을 새우며 며칠을 좌절하기도 했죠. 그때 뼈저리게 깨달았습니다. 남의 코드를 100번 복사하는 것보다, 내가 직접 원리를 알고 1줄을 짜보는 것이 진짜 실력이다. 라는 것을요. 많은 입문자분들이 자바스크립트의 높은 장벽 앞에서 이렇게 고민합니다. 🚨 "HTML/CSS로 화면은 예쁘게 만들었는데, 움직이게 하려니 막막해요." 🚨 "변수, 함수 문법은 다 외웠는데 이걸 실전에서 어떻게 조합하는지 모르겠어요." 🚨 "이벤트 버블링, DOM 조작 같은 용어만 들어도 머리가 아파요." 그래서 이 강의를 준비했습니다. 제가 수많은 삽질 끝에 터득한 '가장 확실한 지름길'만 정리해 드립니다. 저는 자료를 준비하며 어려운 개발 용어를 늘어놓지 않았습니다. 두꺼운 전공 서적에 나오는, 당장 쓰지도 않을 문법은 과감히 버렸습니다. 대신, 실무에서 숨 쉬듯 사용하는 핵심 원리들을 '컨베이어 벨트', '물감 팔레트' 같은 일상적인 비유를 통해 여러분의 머릿속에 직관적으로 꽂아드립니다. 이 강의에서는 단순히 이론만 배우지 않습니다. 이론을 배우는 즉시 아코디언, 탭 메뉴, 다크 모드 토글 등 프론트엔드 실무에서 무조건 마주하는 4가지 핵심 UI를 저와 함께 밑바닥부터 직접 만들어 봅니다. 강의를 완강하고 나면, 여러분은 더 이상 남의 코드를 긁어와 기도하며 실행 버튼을 누르는 사람이 아닐 것입니다. 화면을 어떻게 구성할지 스스로 설계하고, 내 의도대로 자바스크립트 코드를 짜내려 가는 진짜 프론트엔드 개발자로 거듭나게 될 것입니다. 저의 모든 실무 노하우를 담았습니다. 빈 에디터 앞에서 더 이상 멈추지 마세요. 이제 시작할 시간입니다.

15명 이 수강하고 있어요.

난이도 초급

수강기한 무제한

프론트엔드
프론트엔드
자바스크립트
자바스크립트
바닐라JS
바닐라JS
웹개발
웹개발
dom
dom
프론트엔드
프론트엔드
자바스크립트
자바스크립트
바닐라JS
바닐라JS
웹개발
웹개발
dom
dom
Krafton
네오플

네오플

에 관심있는 사람들도 듣는 중!

Krafton
네오플

네오플

에 관심있는 사람들도 듣는 중!

수강 후 이런걸 얻을 수 있어요

  • 자바스크립트의 핵심 동작 원리 이해 (변수, 함수, 제어문)

  • DOM 조작과 이벤트 처리의 완벽한 이해

  • HTML/CSS로 만든 정적인 화면에 생명을 불어넣는 방법

  • 아코디언, 탭 메뉴, 다크 모드 등 실무 UI 컴포넌트 직접 구현

  • 남의 코드를 '복붙'하는 것을 넘어, 내 의도대로 코드를 짜는 능력

📌 이런 분께 추천합니다

  • HTML/CSS는 할 줄 알지만 JS 앞에서 멈춰버린 분

  • 강의 영상 대신 읽으면서 내 속도로 학습하고 싶은 분

  • 코드를 복붙은 할 수 있는데 왜 되는지 모르겠는 분

  • 에러가 터졌을 때 어디서부터 손을 대야 할지 모르는 분


🚨 혹시 이런 경험 있으신가요?

"유튜브 강의를 따라 칠 때는 다 이해한 것 같았는데, 빈 에디터를 켜면 아무것도 못 하겠어요."

"변수, 함수 문법은 외웠는데 실전에서 어떻게 조합하는지 모르겠어요."

"이벤트 버블링, DOM 조작... 용어만 들어도 머리가 아파요."

이런 답답함, 저도 겪었습니다. JS를 처음 배울 때 구글링해서 찾은 코드를 복사하고 붙여넣기 바빴고, 에러가 터지면 어디서부터 손을 대야 할지 몰라 밤을 새우며 좌절하기도 했어요.

그때 뼈저리게 깨달았습니다.

"남의 코드를 100번 복사하는 것보다, 원리를 알고 1줄을 직접 짜는 것이 진짜 실력이다."

이 강의는 그 경험에서 시작했습니다.

📖 이 강의는 어떻게 진행되나요?

이 강의는 전자책 형식으로 제공됩니다. 영상 없이 읽으면서 학습할 수 있어요.

HTML과 CSS는 완성된 상태로 제공하고, JS 코드만 한 줄씩 함께 써 내려갑니다. 코드를 추가할 때마다 "왜 이 코드를 쓰는지"를 먼저 설명하고, 실행 결과를 확인하는 방식으로 진행됩니다.

단순히 따라 치는 게 아니라 원리를 이해하고 나서 코드를 작성하기 때문에, 강의가 끝난 뒤에도 새로운 상황에 응용할 수 있습니다.

또한 각 챕터마다 직접 클릭하고 조작해볼 수 있는 라이브 데모가 포함되어 있어요. 읽다가 바로 결과를 눈으로 확인할 수 있어서 이해가 훨씬 빠릅니다.

🗂️ 커리큘럼

Part 1. JS 기초 문법 — 언어의 뼈대를 잡는다

  • Chapter 1. 자바스크립트란 무엇인가 — 브라우저에서 JS가 하는 일, 콘솔 사용법

  • Chapter 2. 변수와 데이터 타입 — let/const, 원시 타입, typeof, 타입 변환

  • Chapter 3. 연산자 — 산술/할당/비교/논리 연산자, 단축 평가, 옵셔널 체이닝

  • Chapter 4. 조건문과 반복문 — if/else, switch, for/while/for...of, break/continue

  • Chapter 5. 함수 기초 — 선언식/표현식/화살표 함수, 스코프, 매개변수 패턴

Part 2. DOM과 이벤트 — 브라우저를 내 마음대로 조작한다

  • Chapter 6. DOM이란 무엇인가 — DOM 트리 구조, document 객체의 역할

  • Chapter 7. DOM 선택과 조작 — querySelector, textContent/innerHTML, classList

  • Chapter 8. 이벤트 시스템 — addEventListener, 이벤트 객체, 버블링, 이벤트 위임

Part 3. 실전 예제 — 배운 것을 직접 만든다

  • Chapter 9. 아코디언 — classList.toggle과 이벤트 위임 패턴

  • Chapter 10. 탭 메뉴 — 인덱스로 탭과 패널을 연결하는 패턴

  • Chapter 11. 다크 모드 토글 — CSS 변수, body 클래스 전환, localStorage

  • Chapter 12. 글자 수 제한 카운터 — input 이벤트, 실시간 상태 반영

🛠️ 실전 예제는 이렇게 진행됩니다

모든 실전 예제는 HTML, CSS, JS 파일을 분리해서 제공합니다.

HTML/CSS — 완성된 상태로 제공합니다. 구조와 디자인을 먼저 확인하고 시작해요.

JS — 단계별로 한 줄씩 추가하며 직접 만들어갑니다. 각 단계마다 "왜 이 코드가 필요한지"를 설명하고, 그 다음 줄로 넘어가요.

기능 추가 — 기본 기능이 완성되면 추가 기능까지 붙여봅니다. 예를 들어 아코디언은 "전체 펼치기/닫기 버튼"을, 탭은 "키보드 방향키 이동"을 추가해요.

라이브 데모 — 각 챕터마다 직접 클릭하고 조작해볼 수 있는 데모가 포함되어 있어요. 코드를 읽다가 바로 결과를 눈으로 확인할 수 있습니다.

✅ 수강 후 얻을 수 있는 것

지식 측면

  • JS 기본 문법 전체 — 변수, 타입, 연산자, 조건문, 반복문, 함수를 이해하고 직접 쓸 수 있어요.

  • 브라우저가 HTML을 DOM으로 변환하는 원리를 이해해요.

  • querySelector, classList, addEventListener 등 실무에서 매일 쓰는 DOM API를 자유롭게 활용할 수 있어요.

  • 이벤트 버블링과 이벤트 위임 패턴을 이해하고 적용할 수 있어요.

실전 능력 측면

  • 아코디언, 탭 메뉴, 다크 모드 토글, 글자 수 카운터 — 실무에서 바로 쓸 수 있는 UI 컴포넌트 4개를 직접 만들 수 있어요.

  • HTML/CSS/JS 파일을 분리해서 구조적으로 작성하는 습관이 생겨요.

  • JS는 클래스만 토글하고, 시각적 변화는 CSS가 담당하는 역할 분리 패턴을 체득해요.

  • localStorage로 사용자 설정을 저장하고, 시스템 다크 모드를 감지하는 법을 알아요.

사고 방식 측면

  • 코드를 보고 "왜 이렇게 짰는지" 설명할 수 있게 돼요.

  • 새로운 UI를 만들 때 어떤 순서로 접근할지 감이 생겨요.

  • 더 이상 남의 코드를 긁어오지 않아도 됩니다.

💬 Q&A 안내

강의를 보다가 막히는 부분이 있으면 언제든지 질문 남겨주세요.

영업일 기준 2~3일 이내에 답변드리겠습니다. 혼자 며칠씩 고민하다 포기하지 마세요. 막히는 곳에서 같이 해결해드립니다.

단, 아래 경우는 답변이 어려울 수 있어요.

  • 강의 범위를 벗어난 심화 내용

  • 개인 프로젝트 전체 코드 리뷰 요청

⚠️ 수강 전 확인해주세요

이런 선수 지식이 필요해요

  • HTML 기본 태그 (div, button, input 등)를 읽을 수 있어야 해요.

  • CSS에서 classid로 스타일을 주는 개념을 알고 있어야 해요.

이런 건 몰라도 괜찮아요

  • JS를 전혀 몰라도 됩니다. 처음부터 같이 시작해요.

  • 프로그래밍 경험이 없어도 괜찮아요.

  • 개발 환경 설정 없이 브라우저 하나만 있으면 바로 시작할 수 있어요.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • HTML/CSS는 할 줄 아는데 JS 앞에서 멈춰버린 분

  • 강의 영상 보는 게 답답한 분

  • 검색으로 코드를 긁어다 쓰는데 왜 되는지 모르는 분

선수 지식,
필요할까요?

  • HTML과 CSS에 대한 아주 기초적인 지식이 필요합니다. (태그, 클래스, id의 개념 정도만 아셔도 충분합니다!)

  • 이전 프로그래밍 경험이 없어도 괜찮습니다. 처음부터 차근차근 알려드립니다.

안녕하세요
포테토쌤입니다.

커리어인증

76

수강생

3

수강평

2

답변

5.0

강의 평점

5

강의

안녕하세요, 4년차 프론트엔드 개발자 포테토쌤입니다.

현재는 글로벌 모빌리티 서비스를 개발하고 있어요. 다국어 서비스를 만들며 실무 경험을 쌓아왔고, 전 세계 개발자들이 사용하는 오픈소스 라이브러리 react-hook-form의 글로벌 Top 30 기여자이기도 합니다.

하지만 저도 처음부터 이랬던 건 아니에요.

JS를 처음 배울 때, 유튜브 강의를 따라 칠 때는 다 이해한 것 같았는데 막상 빈 에디터를 켜면 머리가 새하얘지는 경험을 수도 없이 했습니다. 처음엔 그저 구글링해서 찾은 코드를 복사하고 붙여넣기 바빴고, 에러가 터지면 어디서부터 손을 대야 할지 몰라 밤을 새우며 며칠을 좌절하기도 했어요.

그 과정에서 정말 많이 해맸습니다. DOM이 뭔지도 모른 채 코드를 짰고, 이벤트가 왜 두 번 실행되는지 몰라 몇 시간을 날리기도 했죠. 그때의 제가 가장 필요했던 건 방대한 문법 암기가 아니었어요. "이 코드가 왜 동작하는지"를 설명해주는 누군가였습니다.

4년간 실무를 거치면서 쌓아온 것들, 그리고 제가 초보 시절 가장 헤맸던 부분들을 정리해서 이 강의를 만들었습니다. 저처럼 돌아가지 않으셔도 됩니다. 제가 먼저 겪어봤으니까요.

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

포테토쌤님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!