DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]

Name: DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]
Price: 24750 KRW
Rating: 5 (7 reviews)

이 강의는 브라우저가 HTML을 받아 DOM을 만들고, CSSOM과 결합해 화면에 픽셀을 그려내는 Critical Rendering Path(CRP) 과정을 처음부터 끝까지 다룹니다. 단순한 DOM 조작을 넘어, CSS와 JS가 성능에 어떤 영향을 주는지, 이미지·폰트 최적화, Lazy Loading, Intersection Observer, 가상 리스트, 그리고 DevTools 실습까지 이어지며 실제 웹 성능을 눈에 띄게 개선할 수 있는 실전 전략을 배울 수 있습니다.

(5.0) 수강평 7개

수강생 93명

난이도 초급

수강기한 무제한

nhcodingstudio

실습 중심

웹개발

프론트엔드

dom

이론 실습 모두

실습 중심

웹개발

프론트엔드

dom

이론 실습 모두

먼저 경험한 수강생들의 후기

5.0

YU NA Joe

63% 수강 후 작성

dev tools를 이용하여 원인을 찾을 수 잇는 방법 과 분석이 좋았습니다.

5.0

leo pug

30% 수강 후 작성

사랑해요

5.0

호우

30% 수강 후 작성

잘 듣고 있습니다!

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

브라우저가 DOM에서 픽셀까지 화면을 그리는 전 과정을 이해할 수 있습니다.
CSS와 JS 로딩이 성능에 미치는 영향을 알고 최적화 전략을 적용할 수 있습니다.
CRP(Critical Rendering Path)를 분석해 핵심 성능 지표를 개선할 수 있습니다.
DevTools로 실제 렌더링 병목을 추적하고 해결할 수 있습니다.
수천 개의 데이터를 Virtual List로 빠르게 렌더링할 수 있습니다.
이미지·폰트·iframe을 Lazy Loading으로 최적화할 수 있습니다.
Intersection Observer로 노출 감지, 무한 스크롤 등을 구현할 수 있습니다.
CRP, DOMContentLoaded 같은 면접 단골 개념을 자신 있게 설명할 수 있습니다.
SPA 프레임워크에도 적용 가능한 성능 최적화 원리를 배울 수 있습니다.
웹 성능 문제를 근본적으로 해결하는 역량을 기를 수 있습니다.
실무에서 자주 발생하는 느린 UI 문제를 원인부터 해결까지 직접 다룰 수 있습니다.
브라우저 렌더링 과정을 코드로 직접 구현해 원리를 체득할 수 있습니다.
will-change, GPU 가속 등 최신 CSS 최적화 기법을 실습할 수 있습니다.
스크립트 로딩 전략(async, defer, preload)을 상황별로 선택할 수 있습니다.
성능 최적화 미션을 통해 배운 내용을 자기 것으로 만들 수 있습니다.

이런 현상은 왜 발생할까요?
그리고 브라우저는 어떤 과정을 거쳐 HTML과 CSS를 화면 픽셀로 바꾸는 걸까요?

이 강의는 바로 그 비밀, 브라우저 렌더링 파이프라인(CRP, Critical Rendering Path)을 기초부터 실무 최적화까지 완전히 파헤칩니다.

DOM, CSSOM, Render Tree, Layout, Paint, Composite이라는 렌더링의 모든 단계를 직접 코드로 구현하고, DevTools로 실시간 추적하며 눈으로 확인하는 과정 속에서, 브라우저가 화면을 만드는 원리를 체계적으로 익히게 됩니다. 단순히 “렌더링이 이렇게 일어난다”는 이론에 그치지 않고, 실제 느려진 페이지를 분석·최적화하는 실무 역량까지 기를 수 있도록 설계되었습니다.

특히 Performance 탭, Paint Flashing, FPS 모니터링 같은 시각적 진단 도구를 활용해 병목을 발견하고, CLS(Layout Shift), Recalculate Style, Composite Layers 등 구글이 중요하게 보는 성능 지표까지 학습합니다. 학습 마지막에는 수천 개의 DOM을 최적화하는 Virtual List 구현을 직접 실습하며, 프레임워크 없이도 대규모 UI를 효율적으로 다루는 능력을 갖추게 됩니다.

이 강의를 마치면 브라우저가 DOM을 어떻게 해석하고, 어느 순간 성능이 무너지는지, 그리고 이를 어떻게 개선할 수 있는지 눈으로 보고 손으로 개선할 수 있는 감각이 생깁니다. React, Vue 같은 프레임워크로 가기 전에, 그 기저에서 동작하는 CRP를 이해한다면 퍼포먼스 최적화와 디버깅은 훨씬 더 쉬워집니다.

📌 이 강의의 특징

100% 시각적 학습
브라우저 렌더링 파이프라인을 코드와 DevTools로 직접 눈으로 확인합니다.
이론과 실습의 균형 잡힌 학습
핵심 개념은 명확히 설명하고, 곧바로 실습 코드와 DevTools 분석으로 검증하며 균형감 있게 학습합니다.
실무형 미션 훈련
CLS 최적화, 대시보드 렌더링 진단, 장바구니/결제 페이지 최적화 등 현업 문제를 그대로 재현한 프로젝트 미션을 해결합니다.
웹 핵심 성능 지표 완전 정복
CLS, LCP, FCP 같은 Core Web Vitals를 직접 측정하고 개선하는 실습으로, 검색 노출과 UX 모두 강화할 수 있습니다.
렌더링 성능 분석 능력 강화
Paint Flashing, FPS 모니터링, Layers 시각화 등 DevTools 성능 도구를 자유롭게 다루게 됩니다.
성능 최적화 전략 체득
불필요한 Layout/Paint 최소화, GPU 합성 활용, Critical CSS 분리, async/defer 로딩까지 체계적으로 훈련합니다.
프레임워크 이전 필수 지식
React/Vue 같은 라이브러리의 성능 최적화를 이해하기 위해 반드시 알아야 하는 CRP의 내부 메커니즘을 깊이 다룹니다.
실전 UX 개선 경험
안정적인 레이아웃, 빠른 첫 렌더링(LCP 개선), 60fps 애니메이션 유지 같은 실제 UX 지표 개선을 직접 경험합니다.
현업과 직결된 프로젝트 감각
단순 코드 연습을 넘어, 서비스 운영 환경에서 발생하는 성능 병목을 진단·해결할 수 있는 실무 감각을 키웁니다.

🧩 이런 실무형 미션을 다룹니다

이번 [DOM 완전 정복 Part 3] 강의에서는 단순한 코드 예제가 아니라, 실제 서비스 개발에서 마주치는 문제 상황을 그대로 가져온 실무형 미션을 해결해가며 학습합니다.

✅ Mission #1 – 제목 스타일 교정 미션
실습 목표: 디자이너 시안과 어긋난 UI 문제를 추적하고 수정하는 능력을 기릅니다.
내용 요약: DevTools Elements/Styles 패널을 이용해 제목의 잘못된 CSS 속성을 분석하고, 시안과 동일한 결과물이 나오도록 스타일을 교정합니다.

🎨 Mission #2 – 프로모션 가격표 리디자인 미션
실습 목표: 산만한 레이아웃 문제를 분석하고 UI를 개선합니다.
내용 요약: DevTools로 불필요한 스타일 충돌을 추적한 뒤, 코드 리팩터링을 통해 가격표 섹션을 깔끔하게 정리하고 시각적 계층 구조를 개선합니다.

📏 Mission #3 – CLS 최적화 미션
실습 목표: 레이아웃 셰프트 문제를 수치로 측정하고 안정적인 UI를 구현합니다.
내용 요약: Performance 탭에서 Layout Shift 이벤트를 추적하고 CLS 점수를 계산한 뒤, 이미지 크기 지정·폰트 로딩 전략 등을 적용해 흔들림 없는 페이지를 완성합니다.

📊 Mission #4 – 대시보드 렌더링 병목 진단 미션
실습 목표: KPI 카드·표·미니차트가 많은 대시보드 성능을 점검합니다.
내용 요약: Paint Flashing과 Layers 탭을 활용해 잦은 리렌더링 구간을 찾아내고, GPU 합성(transform/opacity) 기반 최적화로 프레임 안정성을 확보합니다.

🧾 Mission #5 – 예약/영수증 UX 최적화 미션
실습 목표: 실제 예약 및 결제 영수증 시나리오를 최적화합니다.
내용 요약: 최적화 전후를 Performance 탭으로 비교하고, 불필요한 Recalculate Style과 Paint를 줄여 예약/결제 플로우가 매끄럽게 작동하도록 개선합니다.

🛒 Mission #6 – 장바구니 & 결제 페이지 성능 개선 미션
실습 목표: 이커머스 핵심 플로우에서 안정적인 성능을 유지합니다.
내용 요약: 장바구니 상품 추가/삭제 시 Layout 비용을 최소화하고, 결제 단계에서 리소스 로딩을 최적화해 사용자 경험을 끊김 없이 유지합니다.

⚙ Mission #7 – 브라우저 생명주기 관리 미션
실습 목표: 브라우저 초기화와 세션 로깅을 올바르게 제어합니다.
내용 요약: DOMContentLoaded, load, beforeunload 등 이벤트 타이밍을 분석하고, UX 데이터 보호 및 로그 안정성을 보장하는 구조를 설계합니다.

🎯 Mission #8 – Critical CSS 최적화 미션
실습 목표: 초기 렌더링을 차단하는 CSS 문제를 해결합니다.
내용 요약: 핵심 Above-the-Fold 영역만 Critical CSS로 남기고, 나머지는 지연 로딩 방식으로 분리하여 페이지 로딩 속도를 크게 개선합니다.

⚡ Mission #9 – JS async/defer 최적화 미션
실습 목표: 렌더링을 차단하는 스크립트를 최적화합니다.
내용 요약: script 태그의 실행 시점을 async, defer 속성으로 조정해 블로킹 없이 페이지가 빠르게 렌더링되도록 개선합니다.

🚀 Mission #10 – Preload & Prefetch 전략 미션
실습 목표: LCP를 앞당기고 초기 체감 속도를 높입니다.
내용 요약: preload, preconnect, prefetch를 활용해 핵심 이미지·폰트·리소스를 먼저 불러와 성능을 극대화합니다.

🎬 Mission #11 – 미디어 랜딩 페이지 최적화 미션
실습 목표: 대규모 이미지·영상이 많은 페이지의 초기 성능을 개선합니다.
내용 요약: Video 지연 로드, 이미지 Lazy Loading을 적용해 LCP/FCP를 단축하고 체감 성능을 향상시킵니다.

📱 Mission #12 – 신상품 피드 성능 최적화 미션
실습 목표: 대규모 데이터 피드에서도 성능을 유지합니다.
내용 요약: Virtual List와 Infinite Scroll을 구현하고, 미디어/스크립트 Lazy Loading을 결합해 빠른 UX를 제공합니다.

선수 지식 및 유의사항

HTML/CSS 기본 구조와 자바스크립트 기초 문법을 알고 계시면 원활하게 따라오실 수 있습니다.
특히 addEventListener, if/else, forEach, 객체 접근 방식 정도는 알고 있는 것이 좋습니다.
Mac/Windows 환경 모두 수강 가능하며, 별도의 설치 없이 웹 브라우저만 있으면 실습할 수 있습니다.
최신 크롬 브라우저 사용을 권장합니다.
(선택) Part 1: [DOM 완전 정복 Part 1] – 구조 탐색과 조작의 모든 것
(선택) Part 2: [DOM 완전 정복 Part 2] – 이벤트부터 SPA까지, 상호작용 웹의 필수 엔진

이런 분들께
추천드려요

학습 대상은
누구일까요?

빠른 웹사이트를 만들고 싶은 프론트엔드 입문자
느린 페이지 때문에 사용자 이탈을 줄이고 싶은 스타트업 개발자
포트폴리오에 “성능 최적화 프로젝트”를 추가하고 싶은 취업 준비생
이미지, 폰트, 영상 때문에 로딩 속도가 느려 고민인 디자이너 겸 개발자
React, Vue 같은 프레임워크에서 리스트가 많아 성능이 떨어져 본 적 있는 개발자
“async, defer” 같은 속성이 헷갈렸던 자바스크립트 학습자
실제 서비스에서 Core Web Vitals 점수를 개선해야 하는 웹 퍼블리셔
개발자 도구로 성능 분석은 해봤지만 어디를 고쳐야 할지 막막했던 분
SPA 기반 프로젝트에서 스크롤, 렌더링 최적화에 관심 있는 프론트엔드 주니어
“왜 내 웹은 느릴까?”라는 의문을 끝까지 파고들고 싶은 열정적인 학습자

선수 지식,
필요할까요?

HTML/CSS 기초 태그와 DOM 구조에 대한 기본 이해
JavaScript 기본 문법
querySelector 및 DOM 요소 선택/조작 경험
(선택) [DOM 완전 정복 Part 1] – 구조 탐색과 조작의 모든 것
(선택) [DOM 완전 정복 Part 2] – 이벤트부터 SPA까지, 상호작용 웹의 필수 엔진

안녕하세요
nhcodingstudio입니다.

1,138

명

수강생

개

수강평

개

답변

4.8

점

강의 평점

개

강의

안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.

현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.

Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

커리큘럼

전체

42개 ∙ (2시간 15분)

해당 강의에서 제공:

수업자료

미션

섹션 1. Section #1: 브라우저 렌더링 파이프라인 – CRP를 코드로 구현하며 이해하기

11개 ∙ (56분)

1. Section #1: 수업에 사용 될 예제 코드
2. CRP(Critical Rendering Path) 개요 — 웹 성능의 핵심 여정
04:59
3. DOM & CSSOM — HTML과 CSS가 트리가 되는 과정
07:18
4. HTML 파서 구현 — 텍스트에서 DOM 트리로
05:05
5. CSS 파서 구현 — 스타일 규칙을 객체 트리로
05:27
6. Render Tree 구성 — DOM과 CSSOM의 결합
05:46
7. Layout 단계 — 위치와 크기 계산 로직
07:52
8. Paint 단계 — 픽셀로 변환되는 순간
07:25
9. Composite 단계 — 레이어를 합성하다
06:26
10. 렌더링 엔진 직접 만들기 — 전체 흐름 시뮬레이션
06:03
11. 정리본: Section #1: 브라우저 렌더링 파이프라인 – CRP를 코드로 구현하며 이해하기

섹션 2. Section #2: 브라우저 렌더링 성능 진단 – DevTools로 병목 파헤치기

9개 ∙ (39분)

12. Section #2: 수업에 사용 될 예제 코드
13. Elements & Computed — DOM 구조와 최종 스타일 분석
05:59
14. Performance 타임라인 — Composite 단계가 사라진 이유
06:32
15. Layout Shift & CLS — 화면 흔들림 측정하기
06:57
16. Paint Flashing & Layer Borders — 렌더링 시각화 실습
06:09
17. FPS & 렌더링 타임라인 — 애니메이션 성능 분석
07:28
18. 실전 케이스 스터디 — 느린 페이지의 병목 찾기
06:33
19. 정리본: Section #2: 브라우저 렌더링 성능 진단 – DevTools로 병목 파헤치기
20. 예제: Section #2: 브라우저 렌더링 성능 진단 – DevTools로 병목 파헤치기

섹션 3. Section #3: 브라우저 생명주기와 실전 렌더링 최적화 전략

9개 ∙ (39분)

21. Section #3: 수업에 사용 될 예제 코드
22. DOMContentLoaded·load·beforeunload·unload — 브라우저 이벤트 시점 완전 이해
08:04
23. 렌더링 차단 자원 — CSS·JS 최적화 기법
08:54
24. Speculative Parsing과 preload/async/defer — 병렬 로딩 전략
05:29
25. 이미지 & 웹폰트 Lazy Loading 최적화
06:42
26. Intersection Observer — 뷰포트 감지 성능 최적화
04:24
27. Virtual List — 대규모 DOM 렌더링 최적화
05:45
28. 정리본: Section #3: 브라우저 생명주기와 실전 렌더링 최적화 전략
29. 예제: Section #3: 브라우저 생명주기와 실전 렌더링 최적화 전략

섹션 4. 미션

13개

강의 게시일: 2025. 08. 22.

마지막 업데이트일: 2025. 08. 31.

수강평

전체

7개

5.0

7개의 수강평

rlaqhguse
수강평 3
∙
평균 평점 5.0
2026. 02. 10.
5
33% 수강 후 작성
- nhcodingstudio
  지식공유자
  2026. 02. 23.
  안녕하세요, rlaqhguse님. 지식공유자입니다. 우선 <DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]> 강의를 수강해 주시고, 이렇게 소중한 수강평을 남겨주셔서 진심으로 감사드립니다. rlaqhguse님께서 남겨주신 소중한 피드백은 저에게 정말 큰 힘이 됩니다. 브라우저의 렌더링 과정과 CRP(Critical Rendering Path)는 웹 퍼포먼스 최적화의 핵심인 만큼, 이번 강의가 rlaqhguse님께서 더 깊이 있는 프론트엔드 개발자로 성장하시는 데 실질적인 도움이 되었기를 진심으로 바랍니다. rlaqhguse님의 열정적인 학습을 응원하는 마음을 담아 작은 혜택을 드리고자 합니다. 혹시 저희 교육 과정 중 추가적으로 수강을 희망하시는 강의가 있으시다면, 아래 이메일로 편하게 연락해 주십시오. 확인 후 즉시 할인 쿠폰을 전달해 드리겠습니다. 문의 이메일: jeony0535@naver.com 다시 한번 귀한 시간 내어 따뜻한 말씀 남겨주셔서 감사합니다. rlaqhguse님의 성장을 진심으로 응원하겠습니다 :D
호우
수강평 11
∙
평균 평점 5.0
2025. 11. 05.
5
30% 수강 후 작성
잘 듣고 있습니다!
- nhcodingstudio
  지식공유자
  2025. 11. 10.
  안녕하세요 howu 님 😊 이렇게 따뜻한 수강평 남겨주셔서 진심으로 감사드립니다. 🙏 강의를 즐겁게 들어주신다니 정말 큰 힘이 됩니다. 이 강의는 단순히 이론을 배우는 것을 넘어, 브라우저가 DOM을 통해 화면을 만들어 가는 과정을 눈으로 직접 확인하고, 실무에서 성능을 개선할 수 있는 감각을 기르도록 설계되었습니다. 그런 부분이 흥미롭게 다가왔다면 정말 보람을 느낍니다. 이런 응원의 말씀 하나하나가 강의를 만들어 가는 데 큰 원동력이 됩니다. 앞으로도 더욱 깊이 있고 실질적인 내용을 담은 강의로 보답드리겠습니다. 수강 중 궁금한 점이나 더 알고 싶은 부분이 생기면 언제든 편하게 말씀 주세요. 💬 작은 질문이라도 함께 이야기 나누며 더 좋은 학습 경험을 만들어가면 좋겠습니다. 다시 한 번 소중한 응원 진심으로 감사드리며, 오늘도 좋은 하루 보내세요! 🌿 오픈채팅방에서도 수강생분들과 함께 이야기 나누고 있으니, 시간 되실 때 가볍게 들러주세요. 👉 https://open.kakao.com/o/gC10Fnoh
YU NA Joe
수강평 3
∙
평균 평점 4.3
2025. 12. 04.
5
63% 수강 후 작성
dev tools를 이용하여 원인을 찾을 수 잇는 방법 과 분석이 좋았습니다.
- nhcodingstudio
  지식공유자
  2025. 12. 18.
  안녕하세요 YU NA Joe 님! 😊 소중한 수강평 남겨주셔서 진심으로 감사드립니다. 🙏 이번 [DOM 완전 정복 Part 3] 강의에서 다룬 DevTools 활용법과 분석 과정이 도움이 되셨다니 정말 기쁩니다. 단순히 이론으로만 끝내는 것이 아니라, 브라우저의 성능을 직접 눈으로 확인하고 원인을 찾아가는 과정이야말로 실무에서 가장 필요한 감각이라고 생각합니다. 그 재미와 유익함을 알아봐 주셔서 제작자로서 큰 보람을 느낍니다. 이렇게 원리와 분석에 관심을 가져주시는 만큼, 현재 출시된 [제대로 배우는 React Part 1]이나 곧 출시될 [React Part 2]에서도 리액트가 내부적으로 어떻게 렌더링을 최적화하는지 분석하는 안목을 키우실 수 있을 거예요. 학습하시다가 궁금한 점이 생기면 언제든 편하게 질문 남겨주세요. 💬 앞으로도 실무에 바로 적용할 수 있는 깊이 있는 콘텐츠로 보답하겠습니다. 오늘도 좋은 하루 보내세요! 🌿 오픈채팅방에서도 수강생분들과 소통 중이니, 시간 되실 때 들러주세요. 👉 https://open.kakao.com/o/gC10Fnoh
leo pug
수강평 6
∙
평균 평점 5.0
2025. 12. 04.
5
30% 수강 후 작성
사랑해요
- nhcodingstudio
  지식공유자
  2025. 12. 18.
  안녕하세요 leo pug 님! 저도 사랑합니다😊😊 이렇게 직관적이고 열정적인 후기를 남겨주셔서 정말 기분이 좋아지네요. [DOM 완전 정복 Part 3] 강의가 님에게 그만큼 큰 만족을 드린 것 같아 제작자로서 더할 나위 없이 보람을 느낍니다. 브라우저가 화면을 그리는 그 복잡한 과정을 함께 정복해 주셔서 감사해요! 이 넘치는 에너지 그대로 이어가실 수 있도록, 앞으로도 더 깊이 있고 진심이 담긴 강의들로 보답하겠습니다. 현재 진행 중인 리액트(React) 시리즈도 님의 개발 여정에 큰 사랑이 되어드릴 수 있게 최선을 다해 준비하고 있으니 많은 기대 부탁드려요! 학습하시다 궁금한 점이 생기거나 자랑하고 싶은 성과가 있다면 언제든 오픈채팅방이나 게시판에 들러주세요. 님의 앞날을 언제나 뜨겁게 응원하겠습니다. 오늘도 행복 가득한 하루 되세요! 🌿🔥 👉 https://open.kakao.com/o/gC10Fnoh
변기원
수강평 4
∙
평균 평점 5.0
2025. 10. 27.
5
60% 수강 후 작성
- nhcodingstudio
  지식공유자
  2025. 11. 10.
  안녕하세요 변기원 님 😊 따뜻한 수강평 남겨주셔서 진심으로 감사드립니다. 🙏 강의를 흥미롭게 들어주셨다니 정말 기쁩니다. 이번 [DOM 완전 정복 Part 3]은 브라우저가 화면을 그리는 전 과정을 처음부터 끝까지 따라가며, 실제로 성능이 좋아지는 순간을 직접 체험할 수 있도록 구성했습니다. 그 과정이 흥미롭게 다가갔다면, 제작자로서 더없이 보람을 느낍니다. 남겨주신 응원의 한마디 한마디가 강의를 이어가게 하는 큰 힘이 됩니다. 앞으로도 실무에 바로 적용할 수 있는 성능 최적화 강의와, 그 뒤를 잇는 React 렌더링 편 등 더 깊이 있는 콘텐츠로 찾아뵙겠습니다. 학습 중 궁금한 점이나 더 알고 싶은 주제가 생기면 언제든 편하게 남겨 주세요. 💬 함께 이야기 나누며 더 좋은 학습 여정을 만들어가면 좋겠습니다. 다시 한 번 감사드리며, 오늘도 좋은 하루 보내세요! 🌿 수강생분들과 함께 이야기 나누는 오픈채팅방도 운영 중이니, 시간 되실 때 가볍게 들러주세요. 👉 https://open.kakao.com/o/gC10Fnoh

nhcodingstudio님의 다른 강의

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

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)

nhcodingstudio

₩99,000

얼리버드

75%

₩24,200

초급 / JavaScript, React, TypeScript, frontend, zustand

100+

New

답변 활발

AI가 생성한 파편화된 코드와 복잡한 React 생태계 사이에서 제어권을 잃어가는 문제를, Zustand, TanStack Query, React Hook Form, Zod, React Compiler 등 핵심 React 라이브러리의 보닛을 열어 내부 동작 원리를 공학적으로 분석함으로써 근본적으로 해결해 드립니다. 도구의 단순 활용을 넘어 React 엔진의 성능과 데이터 흐름을 직접 조종하는 법을 익힘으로써, 어떤 위기 상황에서도 즉각 대응할 수 있는 단단한 '엔터프라이즈 아키텍처 설계 근육'을 갖추게 됩니다.

초급

JavaScript, React, TypeScript

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)

nhcodingstudio

₩99,000

얼리버드

75%

₩24,200

초급 / JavaScript, React, TypeScript, frontend, zustand

100+

New

답변 활발

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계

nhcodingstudio

₩99,000

얼리버드

80%

₩19,800

초급 / JavaScript, React, TypeScript, Next.js, frontend

5.0

(2)

New

답변 활발

미션

Next.js 15의 App Router는 서버와 클라이언트의 경계를 완벽히 제어하여 고성능 웹 서비스를 구축하는 강력한 아키텍처입니다. 본 강의는 서버 컴포넌트(RSC)의 동작 원리부터 3대 캐싱 전략(Static, Dynamic, ISR)까지 이어지는 복잡한 렌더링 메커니즘을 12개의 실무 미션을 통해 명확히 연결해 드립니다. 이를 통해 파일 시스템 라우팅과 중첩 레이아웃을 비즈니스 요구사항에 맞게 설계하는 능력을 갖추고, 원리 모를 코드를 복사하던 '바이브 코딩'의 불안함에서 완전히 벗어날 수 있습니다. 결과적으로 여러분은 AI가 생성한 코드의 맹점을 단번에 간파하고 최적의 구조를 주도적으로 지시하는 Next.js 아키텍트로 거듭나게 될 것입니다.

초급

JavaScript, React, TypeScript

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계

nhcodingstudio

₩99,000

얼리버드

80%

₩19,800

초급 / JavaScript, React, TypeScript, Next.js, frontend

5.0

(2)

New

답변 활발

미션

Vanilla JavaScript로 직접 구현하는 Notion

nhcodingstudio

₩27,500

24%

₩20,630

초급 / JavaScript, React, 웹앱, DOM, frontend

4.7

(6)

100+

답변 활발

이 강의는 Vanilla JavaScript로 Notion을 처음부터 끝까지 직접 구현하며, 단순한 UI 클론을 넘어서 내부 동작 원리를 깊이 이해하는 데 초점을 맞춘 풀스택 수준의 프런트엔드 프로젝트 과정입니다. 사이드바 트리, 중첩 문서 생성, 자동 저장, 라우팅, 휴지통, 즐겨찾기, 검색 모달, 설정 모달, 테마 전환, Export/Import, 키보드 단축키, 반응형 레이아웃, 드래그 리사이즈 등 실제 노트 앱의 핵심 기능을 모두 바닐라 JS로 직접 구현합니다. React, Vue 같은 프레임워크 이전에 반드시 알아야 할 브라우저 표준 동작(이벤트 버블링, DOM 트리, 로컬 스토리지, Blob, FileReader, 해시 라우팅 등)을 탄탄하게 학습해, “왜 이렇게 동작하는가”를 완전히 이해하고 디버깅할 수 있는 내공을 쌓는 것이 목표입니다.

초급

JavaScript, React, 웹앱

Vanilla JavaScript로 직접 구현하는 Notion

nhcodingstudio

₩27,500

24%

₩20,630

초급 / JavaScript, React, 웹앱, DOM, frontend

4.7

(6)

100+

답변 활발

React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처

nhcodingstudio

₩30,800

초급 / React

5.0

(2)

200+

답변 활발

미션

실무는 가혹합니다. 수만 개의 실시간 데이터가 쏟아지는 극한의 환경에서도 부드러운 사용자 경험을 설계하는 저의 최적화 정수를 치밀한 미션 시스템을 통해 완벽하게 전수해 드립니다. 단순히 코드를 짜는 사람을 넘어, 엔진의 원리로 성능을 집도하는 대체 불가능한 시니어 엔지니어로 도약해 보세요.

초급

React

React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처

nhcodingstudio

₩30,800

초급 / React

5.0

(2)

200+

답변 활발

미션

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

₩29,700

입문 / HTML/CSS, JavaScript, React, DOM, frontend

4.9

(11)

답변 활발

React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다. 이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다. HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

입문

HTML/CSS, JavaScript, React

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

₩29,700

입문 / HTML/CSS, JavaScript, React, DOM, frontend

4.9

(11)

답변 활발

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

nhcodingstudio

₩23,100

24%

₩17,330

초급 / JavaScript, Node.js, Express, backend, 소프트웨어 설계

4.0

(3)

답변 활발

Express.js를 사용하는 수준을 넘어서, 실제로 그 내부 엔진을 처음부터 끝까지 직접 구현하며 진짜 서버의 동작 원리를 몸으로 체득하는 강의입니다. 라우터, 미들웨어, 요청-응답 객체, 정적 파일 처리, 템플릿 렌더링 등 Express의 모든 구성요소를 처음부터 직접 만들어보며 서버 개발자로 성장하는 경험을 제공합니다.

초급

JavaScript, Node.js, Express

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

nhcodingstudio

₩23,100

24%

₩17,330

초급 / JavaScript, Node.js, Express, backend, 소프트웨어 설계

4.0

(3)

답변 활발

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계

nhcodingstudio

₩34,100

24%

₩25,580

초급 / HTML/CSS, JavaScript, React, 웹앱, frontend

4.8

(11)

100+

답변 활발

미션

단순히 듣고 끝나는 강의가 아닙니다. 이 강의는 “React를 이해하는 순간”이 아니라 “React를 직접 다룰 수 있게 되는 순간”을 목표로 합니다. 매 섹션마다 강의와 함께 미션을 수행하고, 연습문제를 직접 풀며, JSX, Virtual DOM, State, useEffect 같은 핵심 개념을 손으로 구현하며 익히는 과정입니다. 완강을 마쳤을 때 당신은 단순히 React 문법을 아는 입문자가 아니라, 컴포넌트 설계부터 렌더링 흐름까지 스스로 설명하고 활용할 수 있는 개발자가 되어 있을 것입니다. “듣기만 하는 수업이 아닌, 완성해 나가는 학습.” React의 본질을 이해하고, 선언형 UI의 세계를 직접 체험하세요.

초급

HTML/CSS, JavaScript, React

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계

nhcodingstudio

₩34,100

24%

₩25,580

초급 / HTML/CSS, JavaScript, React, 웹앱, frontend

4.8

(11)

100+

답변 활발

미션

Building a Server Framework from Scratch: Cloning the Express.js Engine

nhcodingstudio

₩19,800

25%

₩14,850

초급 / JavaScript, Node.js, Express, backend, frontend

답변 활발

This course goes beyond simply using Express.js. You will rebuild its internal engine from start to finish, gaining hands-on experience with the real principles of how a server works. By directly creating each component of Express—such as routing, middleware, request–response objects, static file handling, and template rendering—you will grow as a server developer and truly understand how a framework operates at its core.

초급

JavaScript, Node.js, Express

Building a Server Framework from Scratch: Cloning the Express.js Engine

nhcodingstudio

₩19,800

25%

₩14,850

초급 / JavaScript, Node.js, Express, backend, frontend

답변 활발

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

₩29,700

24%

₩22,280

초급 / HTML/CSS, JavaScript, React, Web API, DOM

5.0

(5)

답변 활발

미션

이 강의는 단순한 DOM 조작을 넘어서, 실제 사용자와의 상호작용 속에서 웹 UI를 동적으로 구성하고 반응하는 방법을 깊이 있게 학습합니다. 이벤트 시스템의 본질, 버블링과 캡처링, 이벤트 위임, 실시간 UX 피드백, 그리고 throttle & debounce를 활용한 성능 최적화까지, 실무에서 자주 마주치는 문제들을 직접 구현하며 익힐 수 있도록 구성했습니다. DOM 트리의 구조 이해를 바탕으로, 이벤트 흐름과 상태 변경을 유연하게 연결하는 능력을 기르게 됩니다.

초급

HTML/CSS, JavaScript, React

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

₩29,700

24%

₩22,280

초급 / HTML/CSS, JavaScript, React, Web API, DOM

5.0

(5)

답변 활발

미션

JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)

nhcodingstudio

₩27,500

24%

₩20,630

초급 / HTML/CSS, JavaScript, 객체지향

5.0

(1)

답변 활발

미션

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

초급

HTML/CSS, JavaScript, 객체지향

JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)

nhcodingstudio

₩27,500

24%

₩20,630

초급 / HTML/CSS, JavaScript, 객체지향

5.0

(1)

답변 활발

미션

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

nhcodingstudio

₩22,000

초급 / express.js, Node.js, routing, backend, REST API

4.9

(7)

답변 활발

물 흐르듯 따라가는 Express.js 입문부터 실전까지! 서버 기초 개념부터 CRUD 프로젝트 완성까지 직접 구현하며 제대로 익히는 백엔드 여정.

초급

express.js, Node.js, routing

제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]

nhcodingstudio

₩22,000

초급 / express.js, Node.js, routing, backend, REST API

4.9

(7)

답변 활발

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

₩19,800

25%

₩14,850

입문 / JavaScript, HTML/CSS, 웹앱

4.0

(1)

답변 활발

이 강의를 통해 수강생은 개발 환경 설정부터 변수, 조건문, 함수, 객체, 배열 등 JavaScript의 기초와 심화 개념을 폭넓게 학습합니다. 실습과 퀴즈로 꼼꼼히 복습하여, 웹·모바일 실무에 바로 적용 가능한 문제 해결 능력을 갖출 수 있습니다.

입문

JavaScript, HTML/CSS, 웹앱

제대로 배우는 JavaScript: 초보자부터 실무자까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

₩19,800

25%

₩14,850

입문 / JavaScript, HTML/CSS, 웹앱

4.0

(1)

답변 활발

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2 - [중급편]

nhcodingstudio

₩18,700

24%

₩14,030

초급 / HTML/CSS

3.5

(2)

답변 활발

“CSS Position, Transition, Transform, Animation, Flexbox, Grid, 반응형 웹” 등 중급 이상의 CSS 기술을 체계적으로 마스터하고, 다양한 실습 프로젝트를 통해 실무에서 즉시 적용 가능한 스킬을 습득할 수 있는 강의입니다.

초급

HTML/CSS

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2 - [중급편]

nhcodingstudio

₩18,700

24%

₩14,030

초급 / HTML/CSS

3.5

(2)

답변 활발

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

₩18,700

24%

₩14,030

입문 / HTML/CSS

5.0

(1)

답변 활발

“제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1” 강의는 인터넷과 웹의 작동 원리를 깊이 이해하고, 실습 위주의 커리큘럼을 통해 HTML/CSS 기초를 탄탄하게 익히는 과정입니다. 이 강의만 들으면 웹 개발의 필수 개념을 확실히 잡고, 바로 프로젝트에 적용할 수 있게 됩니다.

입문

HTML/CSS

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

nhcodingstudio

₩18,700

24%

₩14,030

입문 / HTML/CSS

5.0

(1)

답변 활발

비슷한 강의

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

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

₩29,700

24%

₩22,280

초급 / HTML/CSS, JavaScript, React, Web API, DOM

5.0

(5)

답변 활발

미션

초급

HTML/CSS, JavaScript, React

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

₩29,700

24%

₩22,280

초급 / HTML/CSS, JavaScript, React, Web API, DOM

5.0

(5)

답변 활발

미션

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

₩29,700

입문 / HTML/CSS, JavaScript, React, DOM, frontend

4.9

(11)

답변 활발

입문

HTML/CSS, JavaScript, React

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

₩29,700

입문 / HTML/CSS, JavaScript, React, DOM, frontend

4.9

(11)

답변 활발

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

₩88,000

입문 / HTML/CSS, JavaScript, ES6

4.9

(181)

2,700+

현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

입문

HTML/CSS, JavaScript, ES6

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

잔재미코딩 DaveLee

₩88,000

입문 / HTML/CSS, JavaScript, ES6

4.9

(181)

2,700+

누구보다 빠르게 해보는 ChatGPT 클론코딩

Neo

₩33,000

25%

₩24,750

초급 / JavaScript, React, Java, Spring Boot, SpringAI

5.0

(3)

ChatGPT를 클론코딩하며 처음부터 끝까지 직접 구현해보는 풀스택 실습 강의입니다. Spring Boot 서버와 React 프론트엔드까지 | Neo + Essential 단순히 코드만 따라 치는 강의가 아니라, 실제 서비스 배포를 통해 완성도 높은 AI 챗봇 서비스를 구축할 수 있도록 안내합니다.

초급

JavaScript, React, Java

누구보다 빠르게 해보는 ChatGPT 클론코딩

Neo

₩33,000

25%

₩24,750

초급 / JavaScript, React, Java, Spring Boot, SpringAI

5.0

(3)

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

₩55,000

초급 / Next.js, supabase, React, 클론코딩

4.9

(29)

400+

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

초급

Next.js, supabase, React

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

₩55,000

초급 / Next.js, supabase, React, 클론코딩

4.9

(29)

400+

[React 2부] 고급 주제와 훅

김정환

₩77,000

중급이상 / React Context, react-hooks, React, JavaScript, 웹앱

4.9

(32)

700+

답변 활발

이제 리액트(React)가 진짜 ‘보이기’ 시작합니다. 고급 개념과 훅(Hooks) 가장 쉽고 정확하게 배워보세요.

중급이상

React Context, react-hooks, React

[React 2부] 고급 주제와 훅

김정환

₩77,000

중급이상 / React Context, react-hooks, React, JavaScript, 웹앱

4.9

(32)

700+

답변 활발

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

nhcodingstudio

₩23,100

24%

₩17,330

초급 / JavaScript, Node.js, Express, backend, 소프트웨어 설계

4.0

(3)

답변 활발

초급

JavaScript, Node.js, Express

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

nhcodingstudio

₩23,100

24%

₩17,330

초급 / JavaScript, Node.js, Express, backend, 소프트웨어 설계

4.0

(3)

답변 활발

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

₩99,000

초급 / NestJS, REST API, backend, JavaScript, TypeScript

5.0

(138)

1,800+

자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

초급

NestJS, REST API, backend

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

₩99,000

초급 / NestJS, REST API, backend, JavaScript, TypeScript

5.0

(138)

1,800+

모던 웹 인터렉티브 CSS3 [PART3/3]

영코디 킴쌤

₩52,800

25%

₩39,600

입문 / HTML/CSS, 웹 디자인, css3, 인터랙티브 웹, 클론코딩

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

입문

HTML/CSS, 웹 디자인, css3

모던 웹 인터렉티브 CSS3 [PART3/3]

영코디 킴쌤

₩52,800

25%

₩39,600

입문 / HTML/CSS, 웹 디자인, css3, 인터랙티브 웹, 클론코딩

DOM 인터랙션

김영보

₩22,000

초급 / DOM, JavaScript, HTML/CSS

5.0

(2)

200+

DOM은 동적 애플리케이션의 필수이며 바탕입니다. Element, Document, Window 오브젝트에서 발생하는, 발생시키는 모든 이벤트를 기본부터 활용까지 다룹니다. Web Component(Custom Element, Shadow DOM, Template)을 완전하게 배울 수 있으며 활용할 수 있습니다. 개설된 "DOM 완전 끝내기: 기본" 강좌와 더불어 DOM의 마침표를 찍을 수 있습니다.

초급

DOM, JavaScript, HTML/CSS

DOM 인터랙션

김영보

₩22,000

초급 / DOM, JavaScript, HTML/CSS

5.0

(2)

200+

문법 공부 다음엔, 자바스크립트 프로젝트 101

이룸코딩

₩55,000

15%

₩46,750

초급 / JavaScript

4.8

(8)

100+

🚀 자바스크립트 문법 공부를 막 끝낸 코린이들에게 적합한 미니 프로젝트 실습 강의입니다. 자바스크립트 기초 문법과 리액트나 뷰 등의 프레임워크 사이에 꽉 막힌 구간을 시원하게 뚫어드립니다. ✨

초급

JavaScript

문법 공부 다음엔, 자바스크립트 프로젝트 101

이룸코딩

₩55,000

15%

₩46,750

초급 / JavaScript

4.8

(8)

100+

Building a Server Framework from Scratch: Cloning the Express.js Engine

nhcodingstudio

₩19,800

25%

₩14,850

초급 / JavaScript, Node.js, Express, backend, frontend

답변 활발

초급

JavaScript, Node.js, Express

Building a Server Framework from Scratch: Cloning the Express.js Engine

nhcodingstudio

₩19,800

25%

₩14,850

초급 / JavaScript, Node.js, Express, backend, frontend

답변 활발

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

₩48,400

초급 / React, Next.js, expo, React Native

4.4

(5)

100+

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

₩48,400

초급 / React, Next.js, expo, React Native

4.4

(5)

100+

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

₩72,600

초급 / React, React Native, 하이브리드 앱, TypeScript, expo

4.8

(57)

700+

답변 활발

미션

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

초급

React, React Native, 하이브리드 앱

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

₩72,600

초급 / React, React Native, 하이브리드 앱, TypeScript, expo

4.8

(57)

700+

답변 활발

미션

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

₩39,600

초급 / HTML/CSS, 반응형 웹, 인터랙티브 웹

5.0

(3)

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

₩39,600

초급 / HTML/CSS, 반응형 웹, 인터랙티브 웹

5.0

(3)

SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

코딩도니

₩33,000

초급 / React, Java, AWS, Spring Boot, Docker

React 프론트엔드와 SpringBoot 백엔드를 AWS 클라우드에 직접 배포하는 포트폴리오 중심 강의! 빠르게 자신의 포트폴리오에 프론트, 백앤드 프로젝트를 배포하고 싶은 분들에게 도움이 되는 강의입니다! 배포하는 데 필요한 지식들을, 서버 설정부터 Docker, Domain 연결, Nginx, HTTPS 적용까지 단계별로 단기간 실습할 수 있게 됩니다!

초급

React, Java, AWS

SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

코딩도니

₩33,000

초급 / React, Java, AWS, Spring Boot, Docker

[코드캠프] 훈훈한 Javascript

코드캠프

₩22,000

입문 / JavaScript

4.9

(71)

2,800+

다른 언어도 많은데.. 왜 자바스크립트여야 하냐구요? 자바스크립트는 전세계에서 가장 많이 쓰는 언어로, 비전공자도 빠르게 배울 수 있고 이해하기 쉬운 구조를 가지고 있어요. 게다가 구글, 페이팔, 아마존 등 유명 기업들도 활용하고 있다니! 더 이상의 고민이 필요한가요?

입문

JavaScript

[코드캠프] 훈훈한 Javascript

코드캠프

₩22,000

입문 / JavaScript

4.9

(71)

2,800+

비전공자도 가능한 AI 바이브코딩 입문 코스

아이티커넥트

₩126,500

입문 / HTML/CSS, Java, 웹앱, CursorAI, claude

💡 비개발자도 AI와 함께 단 10시간 창업 MVP부터 수익화 서비스까지! 💰 외주비 수천만원이 필요했던 개발 이제 12만원으로 완전 해결 🎯 명함인식, 감정분석, 입지분석까지 실전 비즈니스 프로젝트 5개 완주 🔥 기획자, 마케터, 예비창업자라면 개발자 없이도 아이디어 구현 ⚡ 지금 시작하면 평생 써먹을 개발 자립 능력을 획득하세요!

입문

HTML/CSS, Java, 웹앱

비전공자도 가능한 AI 바이브코딩 입문 코스

아이티커넥트

₩126,500

입문 / HTML/CSS, Java, 웹앱, CursorAI, claude

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

₩154,000

입문 / HTML/CSS, 웹 디자인, 클론코딩, 모바일 디자인

5.0

(2)

입문

HTML/CSS, 웹 디자인, 클론코딩

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

₩154,000

입문 / HTML/CSS, 웹 디자인, 클론코딩, 모바일 디자인

5.0

(2)

쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기

LIZ.B

₩49,500

초급 / HTML/CSS, jQuery, 웹 디자인

4.0

(5)

웹디자인기능사 실기 시험을 준비하시는 분들에게 짧고 쉽게 배우는 강좌를 준비했습니다. 단지 시험 때문이 아니더라도, 웹표준 양식에 맞는 사이트 구현에 관심있으신 분이라면 환영합니다.

초급

HTML/CSS, jQuery, 웹 디자인

쉽고! 짧고! 강하게! 준비하는 웹디자인기능사 실기

LIZ.B

₩49,500

초급 / HTML/CSS, jQuery, 웹 디자인

4.0

(5)

DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]

먼저 경험한 수강생들의 후기

5.0

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