Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Web Development

From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]

This course goes beyond simple DOM manipulation, deeply learning how to dynamically compose and react to web UIs within interactions with actual users. It's structured for you to learn by directly implementing common issues encountered in practice, from the essence of event systems, bubbling and capturing, event delegation, real-time UX feedback, to performance optimization using throttle & debounce. Based on an understanding of the DOM tree structure, you will develop the ability to flexibly connect event flow and state changes.

19 learners are taking this course

  • nhcodingstudio
실습 중심
웹개발
풀스택
이론 실습 모두
시각화
HTML/CSS
JavaScript
React
Web API
DOM

What you will learn!

  • Practical Usage of addEventListener and removeEventListener

  • Event Flow: Complete Understanding of Capture → Target → Bubbling Structure

  • Differences and Usage of event.target, currentTarget, and this

  • How preventDefault and stopPropagation actually work

  • Event Delegation (event delegation) for efficient dynamic element handling

  • Real-time Validation and UX Feedback System Implementation

  • Reactive state linking structure design with Proxy.

  • High-frequency event control using throttle and debounce

  • How to attach events to dynamically created/deleted DOM

  • How to synchronize state changes and DOM events in an SPA architecture

🚀클릭 한 번에 반응하는 인터랙션의 비밀, DOM 이벤트의 모든 것

🚦입력값을 잘못 입력했을 때 빨간 테두리로 알려주고,
🖱 마우스를 올리면 툴팁이 자연스럽게 따라오고,
🗑 버튼 하나로 수십 개의 동적 항목을 깔끔하게 삭제하고…

이런 UI는 어떻게 만들어질까요?
우리는 매일 웹사이트와 인터랙션하지만, 그 안에서 벌어지는 ‘이벤트 시스템의 정교한 작동 원리’는 잘 모르는 경우가 많습니다.

이 강의에서는 바로 그 원리를 기초부터 성능 최적화까지 전부 시각화하고 실습하며 완전히 익히게 됩니다.

DOM 이벤트 시스템의 작동 원리와 이를 활용한 동적 UI 구현 기법 전반을 다루는 실전 중심 강의입니다. 단순한 개념 설명에 그치지 않고, 마우스 이벤트부터 키보드 입력, 이벤트 흐름 제어, 이벤트 위임, 그리고 성능 최적화 기법까지 한 단계씩 구현하며 배우게 됩니다.

특히 target, currentTarget, stopPropagation, mouseover, mouseenter 등 헷갈리기 쉬운 이벤트 요소들을 시각적으로 비교하고, 디버깅하면서 실습하는 것이 강의의 핵심입니다. 실습 예제를 따라하면서 눈으로 확인하고 손으로 구조를 직접 짜보는 과정 속에서, DOM 이벤트는 더 이상 이론이 아닌 ‘익숙한 도구’가 됩니다.

마지막에는 Proxy를 활용한 상태 기반 UI까지 확장하며, 실제 프레임워크에서 사용하는 이벤트-상태 구조를 미리 체험하게 됩니다. 이 구조를 이해하면 React, Vue 같은 라이브러리의 내부 흐름도 더욱 쉽게 받아들일 수 있게 됩니다.

초보자부터 중급자까지, 단순 이벤트 등록을 넘어서 ‘웹 상호작용의 본질과 성능 최적화 전략’까지 배우고 싶은 분이라면 반드시 들어야 할 DOM 이벤트 완전 정복 강의입니다.

📌이런 분들께 추천해요

🎯 자바스크립트로 웹사이트를 더 동적으로 만들고 싶은 입문자

HTML/CSS는 익숙하지만, 클릭, 입력, 마우스 이벤트 같은 상호작용 구현이 막막한 분들을 위한 첫 이벤트 입문서입니다.

🧱 버튼 클릭, 리스트 삭제처럼 UI를 설계하고 싶은 퍼블리셔

디자인을 실제로 작동하게 만드는 이벤트 연결법을 배우고 싶은 디자이너/퍼블리셔에게 적합합니다.

🧪 단순 암기 대신 눈으로 확인하며 배우고 싶은 실습형 학습자

mouseover와 mouseenter의 차이처럼, 말로만 들으면 헷갈리는 개념들을 실제 예제와 디버깅을 통해 명확히 이해할 수 있습니다.

🔀 React, Vue는 배웠는데 이벤트 흐름이 헷갈리는 프론트엔드 학습자

target, currentTarget, stopPropagation 같은 개념이 아직도 머릿속에서 정리되지 않았다면 이 강의가 기준점을 만들어 드립니다.

⚙ debounce와 throttle을 직접 구현해보고 싶은 성능 중심 개발자

외워서 쓰는 코드가 아닌, 이벤트 성능 최적화의 진짜 원리와 동작 방식이 궁금한 분들을 위한 실전 코드 중심 강의입니다.

🧩 이벤트 위임의 효율성과 구조를 체감하고 싶은 프로젝트 경험자

li를 클릭할 때마다 이벤트를 개별 등록하는 방식에서 벗어나, 하나의 리스너로 수십 개를 제어하는 구조를 몸으로 익힙니다.

🧠 DOM과 이벤트를 디버깅하며 깊이 이해하고 싶은 중급 개발자

단순한 API 호출이 아니라, 브라우저 내부에서 이벤트가 어떻게 흐르고 처리되는지 콘솔을 통해 실시간 추적합니다.

🏗 직접 만든 SPA 구조를 통해 프레임워크 이전의 개념을 마스터하고 싶은 개발자

Proxy를 이용한 상태 추적, UI 자동 반영 구조를 통해 React/Vue가 내부에서 하는 일을 직접 체험해봅니다.

🧼 실전에서 자주 쓰는 UX 구조를 구현해보고 싶은 실무 지향 학습자

입력값이 잘못되었을 때 테두리 색상 변경, 메시지 출력, 버튼 조건 활성화 등 실무에서 반복되는 패턴을 실습합니다.

🔍 이벤트는 다 아는 줄 알았지만 막상 쓰려면 막막한 모든 개발자

form.submit에서 preventDefault를 쓰는 이유조차 명확하지 않거나, 이벤트 흐름이 막연하다면 이 강의가 가장 명쾌한 정리서가 될 것입니다.

이 강의의 특징

📌 100% 시각 중심 설명: addEventListener 구조, 버블링/캡처링 흐름, 이벤트 위임까지 시각화 설명

📌 실습 70%, 구현 30%: 모든 개념은 HTML/CSS/JS로 직접 실습하고 눈으로 확인

📌 중간중간 실전 미션 제공: 입력 검증, 리스트 삭제, 동적 UI 구현, 상태 연결 등 반복 훈련

📌 프레임워크 이전 필수 지식: React/Vue로 넘어가기 전 이벤트 흐름과 상태-렌더링 연결 구조 습

📌 단순 개념 암기가 아닌 ‘인터랙션 감각’ 훈련: UX 중심의 시점 제어, 사용자 행동 흐름 분석

🎓 수강 후에는

  • addEventListener의 모든 옵션과 흐름을 자유자재로 활용할 수 있습니다.

  • 마우스, 키보드, 입력창 등의 입력 이벤트를 완벽하게 제어할 수 있습니다.

  • target, currentTarget, stopPropagation 등의 헷갈리는 개념을 완전히 시각적으로 구분할 수 있습니다.

  • mouseover, mouseenter, mousemove의 차이점과 선택 기준을 정확히 설명할 수 있습니다

  • 이벤트 위임(event delegation) 구조를 실전 프로젝트에 설계할 수 있습니다

  • 성능 최적화를 위한 debounce와 throttle 함수를 직접 구현하고 적용할 수 있습니다

  • 실시간 입력 검증, 테두리 색 피드백, 동적 리스트 삭제 등 UX 중심 이벤트 구조를 구현할 수 있습니다

  • Proxy 기반 자동 상태-UI 연결 구조를 직접 만들 수 있습니다

  • 하나의 state로 여러 DOM 요소를 동시에 조작하는 SPA 기초 구조를 이해할 수 있습니다

  • 전체 이벤트 구조를 디버깅하고 콘솔로 추적할 수 있는 눈과 감각이 생깁니다

🎯 이런 내용을 배워요

09

✅ 이벤트 객체 구조 이해하기

target, currentTarget, type 등 이벤트 객체의 모든 속성을 분석하고 실제로 활용하는 방법을 익힙니다.

37

🐭 마우스 이벤트의 미묘한 차이

mouseover, mouseenter, mousemove는 언제 어떻게 다른가요? 실제 흐름을 시각화하며 정확히 비교해봅니다.

30

⛔ 이벤트 전파 제어 기술

stopPropagation, stopImmediatePropagation의 차이와 실제 DOM 흐름에서 어떻게 작동하는지 실험과 함께 이해합니다.

18

📝 입력 유효성 검사 설계

input, focus, blur 이벤트를 활용해 입력값 검증 로직을 설계하고, 실무적인 폼 유효성 구조를 만들어봅니다.

26

🎨 실시간 시각 피드백 UI

입력값에 따라 테두리 색상 변경, 오류 메시지 출력 등 사용자 친화적인 UX 패턴을 CSS + JS로 구현합니다.

19

🪢 이벤트 위임 패턴 마스터

동적으로 추가된 항목에도 자동으로 적용되는 이벤트 위임 구조를 설계하고 실전 프로젝트에 적용해봅니다.

15

🕵 이벤트 흐름 디버깅과 시각화

캡처링 → 타겟 → 버블링 단계에서 이벤트가 어떻게 전파되는지 브라우저 디버거와 도구를 이용해 추적합니다.

05

🔁 Proxy 기반 상태-UI 바인딩

상태가 바뀌면 자동으로 UI가 갱신되는 구조를 Proxy 객체로 직접 만들어보며, React 같은 프레임워크의 내부를 체험합니다.

35

🧠 throttle vs debounce 완전 이해

성능 최적화를 위한 이벤트 제어 기법인 throttle과 debounce를 직접 구현하고 언제, 왜 써야 하는지 몸으로 배웁니다.

02

🧩 DOM 이벤트 기반 SPA 구조 설계

SPA 환경에서 상태, 이벤트, 렌더링이 어떻게 연결되는지를 실제 미니 프로젝트로 구성해보며 구조를 익힙니다.

🧩 이런 미션을 다뤄요

✅ Mission A – 실시간 입력 피드백 미션
실습 목표: 사용자의 입력값에 따라 즉시 시각적으로 반응하는 UX를 구현합니다.
내용 요약: input, blur, focus 이벤트를 활용해 입력값을 검사하고, 유효하지 않으면 빨간 테두리와 오류 메시지, 유효하면 초록 테두리로 바뀌게 만듭니다. 실시간 피드백을 통해 사용자 경험을 개선하는 구조를 배웁니다.

✅ Mission B – 이벤트 위임을 통한 리스트 삭제 미션
실습 목표: 동적 요소에 효율적으로 이벤트를 적용하는 구조를 학습합니다.
내용 요약:

    에 단 하나의 리스너만 등록한 뒤, 클릭된 버튼의 위치를 event.target과 closest()로 파악해 해당 항목만 삭제합니다. 반복 렌더링에도 리스너를 유지할 수 있는 이벤트 위임 전략을 실습합니다.

    ✅ Mission C – 성능 최적화 미션
    실습 목표: 상태 객체의 변화에 따라 화면이 자동으로 갱신되는 구조 구현
    내용 요약: Proxy를 사용해 상태 객체의 값을 감지하고, 이 값이 바뀌면 display.textContent를 자동으로 갱신합니다. 리렌더 함수 없이도 동적으로 반응하는 화면을 만들어보며 SPA의 핵심 원리를 학습합니다.

    ✅ Mission D – 상태 연동형 SPA 구조 미션
    실습 목표: 상태와 이벤트 위임을 결합해 동적 리스트를 안정적으로 관리
    내용 요약: Proxy로 관리되는 todos 상태에 따라 리스트를 렌더링하고, 완료 버튼을 누르면 상태만 바꿔도 화면이 자동으로 반응하게 구성합니다. 이벤트 위임을 통해 동적으로 생성된 항목도 문제없이 제어할 수 있습니다.

    ✅ Mission E – 이벤트 흐름 추적 및 디버깅 미션
    실습 목표: 무거운 이벤트에 대한 처리량 제어를 통해 성능을 유지
    내용 요약: scroll, mousemove, input 같은 잦은 이벤트에 throttle과 debounce 함수를 적용해 불필요한 처리 횟수를 줄이고, 브라우저의 부하를 최소화합니다. UX와 성능을 동시에 고려하는 실전 최적화 전략을 배웁니다.

수강 전 참고 사항

학습 자료

  • 모든 강의에는 요약 PDF, 실습용 코드 파일, 연습문제 및 미션 과제가 함께 제공됩니다.

  • 각 자료는 강의 흐름에 맞춰 단계별로 구성되어 있어, 복습과 실습 모두 효율적으로 가능합니다

선수 지식 및 유의사항

  • HTML/CSS 기본 구조와 자바스크립트 기초 문법을 알고 계시면 원활하게 따라오실 수 있습니다.

  • 특히 addEventListener, if/else, forEach, 객체 접근 방식 정도는 알고 있는 것이 좋습니다.

  • Mac/Windows 환경 모두 수강 가능하며, 별도의 설치 없이 웹 브라우저만 있으면 실습할 수 있습니다.

  • 최신 크롬 브라우저 사용을 권장합니다.

  • (선택) Part 1: DOM 구조와 API의 기초 개념 수강 완료

Recommended for
these people

Who is this course right for?

  • Beginner to intermediate developers who wish to structurally understand DOM event flow

  • Frontend developer eager to design highly interactive real-time UIs.

  • Learners struggling with event delegation, target detection, and state connection.

  • Building an Efficient JavaScript Event System

  • Those aiming to implement practical UIs such as search bars, checklists, and real-time error detection.

  • Developer experienced performance bottleneck due to duplicate event execution.

  • Control UI state with pure JS, no framework.

  • Those who wish to learn the internal workings of Proxy and SPA structures.

  • Designer/Planner wishing to grasp real-time form feedback & auto-rendering structure.

  • Team dev. to improve duplicate DOM event code.

Need to know before starting?

  • Basic understanding of HTML/CSS basic tags and DOM structure

  • JavaScript Basic Syntax

  • querySelector and DOM element selection/manipulation experience

  • (Optional) Part 1: Basic Concepts of DOM Structure and API - Completed

Hello
This is

147

Learners

6

Reviews

4.3

Rating

9

Courses

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

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, 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.

Curriculum

All

59 lectures ∙ (3hr 11min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

$30.80

nhcodingstudio's other courses

Check out other courses by the instructor!

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP - [DOM 완전 정복 Part 3]강의 썸네일

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP - [DOM 완전 정복 Part 3]

nhcodingstudio

Khóa học này bao gồm toàn bộ quá trình Critical Rendering Path (CRP) từ đầu đến cuối - cách trình duyệt nhận HTML để tạo DOM, kết hợp với CSSOM và vẽ pixel lên màn hình. Vượt ra ngoài việc thao tác DOM đơn giản, bạn sẽ học được CSS và JS ảnh hưởng như thế nào đến hiệu suất, tối ưu hóa hình ảnh·font, Lazy Loading, Intersection Observer, danh sách ảo, và thực hành với DevTools để có thể cải thiện hiệu suất web thực tế một cách đáng kể thông qua các chiến lược thực chiến.

초급

초급

HTML/CSS, JavaScript, React

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP - [DOM 완전 정복 Part 3]강의 썸네일

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP - [DOM 완전 정복 Part 3]

nhcodingstudio

Học Express.js một cách bài bản: Phần 1 Từ cơ bản đến nâng cao [Phần cơ bản]강의 썸네일

Học Express.js một cách bài bản: Phần 1 Từ cơ bản đến nâng cao [Phần cơ bản]

nhcodingstudio

Nhập môn Express.js mượt mà như dòng chảy, từ cơ bản đến thực chiến! Hành trình backend, tự tay xây dựng từ khái niệm cơ bản về server đến hoàn thành dự án CRUD, học hỏi một cách bài bản.

초급

초급

express.js, Node.js, routing

Học Express.js một cách bài bản: Phần 1 Từ cơ bản đến nâng cao [Phần cơ bản]강의 썸네일

Học Express.js một cách bài bản: Phần 1 Từ cơ bản đến nâng cao [Phần cơ bản]

nhcodingstudio

Học JavaScript đúng cách: Lập trình hướng đối tượng hoàn chỉnh & Thực chiến AI Tic-Tac-Toe chiến lược Part2 [Phần trung cấp]강의 썸네일

Học JavaScript đúng cách: Lập trình hướng đối tượng hoàn chỉnh & Thực chiến AI Tic-Tac-Toe chiến lược Part2 [Phần trung cấp]

nhcodingstudio

📌 Khóa học này là chương trình giảng dạy bắt đầu với dự án AI cờ caro chiến lược và hoàn thành các khái niệm cốt lõi của lập trình hướng đối tượng bằng các ví dụ thực tế. Thông qua việc hiện thực hóa trò chơi, bạn sẽ rèn luyện tư duy chiến lược AI và thiết kế logic, sau đó trực tiếp trải nghiệm các kỹ thuật thiết kế OOP như thừa kế, kết hợp, ủy quyền, đóng gói qua mã code. Khóa học được khuyến nghị cho những ai muốn phát triển thành một 'nhà phát triển biết thiết kế' vượt qua ngữ pháp thông thường thông qua các dự án thực tế.

초급

초급

JavaScript, HTML/CSS, oop

Học JavaScript đúng cách: Lập trình hướng đối tượng hoàn chỉnh & Thực chiến AI Tic-Tac-Toe chiến lược Part2 [Phần trung cấp]강의 썸네일

Học JavaScript đúng cách: Lập trình hướng đối tượng hoàn chỉnh & Thực chiến AI Tic-Tac-Toe chiến lược Part2 [Phần trung cấp]

nhcodingstudio

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]강의 썸네일

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]

nhcodingstudio

Dù bạn có học React, Next.js, Vue đến đâu, nếu bạn cảm thấy mã code trừu tượng và cấu trúc không được hiểu rõ ràng, nguyên nhân cốt lõi có thể là do thiếu hiểu biết về DOM. DOM là nền tảng của mọi framework frontend, là thực thể kết nối cấu trúc và hoạt động của một trang web. Khóa học này không chỉ dừng lại ở các bộ chọn hay phương pháp thao tác đơn giản, mà còn từ đầu, từng bước một, chỉ ra cách HTML được biến đổi thành đối tượng DOM, cách cấu trúc này có thể được chọn, duyệt qua và thao tác. Đây là khóa học nhập môn Phần 1 của loạt bài chinh phục DOM hoàn toàn. Các thẻ HTML chỉ là cấu trúc, và JavaScript chỉ là hành vi, nhưng DOM là yếu tố cốt lõi kết nối cả hai. Nếu bạn hiểu rõ ràng mối liên kết này, bạn sẽ có thể nhìn thấu cấu trúc và luồng thực sự bên trong bất kỳ framework nào mà bạn sử dụng.

입문

입문

HTML/CSS, JavaScript, React

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]강의 썸네일

Tất cả về khám phá và thao tác cấu trúc - [Chinh phục hoàn toàn DOM Part 1]

nhcodingstudio

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]강의 썸네일

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]

nhcodingstudio

Đây là khóa học giúp bạn làm chủ một cách hệ thống các kỹ thuật CSS trung cấp trở lên như "CSS Position, Transition, Transform, Animation, Flexbox, Grid, Thiết kế web đáp ứng (Responsive Web)" và học các kỹ năng có thể áp dụng ngay vào thực tế thông qua các dự án thực hành đa dạng.

초급

초급

HTML/CSS

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]강의 썸네일

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]

nhcodingstudio

Tạo Node.js server engine – Thiết kế framework học qua việc nhân bản Express.js강의 썸네일

Tạo Node.js server engine – Thiết kế framework học qua việc nhân bản Express.js

nhcodingstudio

Đây là khóa học không chỉ dừng lại ở việc sử dụng Express.js mà còn giúp bạn nắm vững nguyên lý hoạt động thực sự của server bằng cách tự tay triển khai toàn bộ engine nội bộ của nó từ đầu đến cuối. Khóa học mang đến trải nghiệm trở thành nhà phát triển server thông qua việc tự mình xây dựng từ đầu mọi thành phần của Express như router, middleware, đối tượng yêu cầu-phản hồi, xử lý tệp tĩnh và hiển thị template.

초급

초급

JavaScript, Node.js, Express

Tạo Node.js server engine – Thiết kế framework học qua việc nhân bản Express.js강의 썸네일

Tạo Node.js server engine – Thiết kế framework học qua việc nhân bản Express.js

nhcodingstudio

Học JavaScript đúng cách: Chinh phục hoàn toàn từ người mới bắt đầu đến người làm thực tế Phần 1 - [Phần cơ bản]강의 썸네일

Học JavaScript đúng cách: Chinh phục hoàn toàn từ người mới bắt đầu đến người làm thực tế Phần 1 - [Phần cơ bản]

nhcodingstudio

Thông qua khóa học này, học viên sẽ được học rộng rãi các khái niệm cơ bản và nâng cao của JavaScript, từ thiết lập môi trường phát triển đến biến, câu lệnh điều kiện, hàm, đối tượng, mảng, v.v. Thông qua thực hành và bài kiểm tra, học viên có thể ôn tập kỹ lưỡng và trang bị khả năng giải quyết vấn đề, có thể áp dụng ngay vào thực tế phát triển web và di động.

입문

입문

JavaScript, HTML/CSS, Web Application

Học JavaScript đúng cách: Chinh phục hoàn toàn từ người mới bắt đầu đến người làm thực tế Phần 1 - [Phần cơ bản]강의 썸네일

Học JavaScript đúng cách: Chinh phục hoàn toàn từ người mới bắt đầu đến người làm thực tế Phần 1 - [Phần cơ bản]

nhcodingstudio

HTML + CSS học bài bản: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1 - [Phần cơ bản]강의 썸네일

HTML + CSS học bài bản: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1 - [Phần cơ bản]

nhcodingstudio

Khóa học “Học HTML + CSS đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1” là quá trình giúp bạn hiểu sâu sắc nguyên lý hoạt động của Internet và Web, đồng thời nắm vững kiến thức cơ bản về HTML/CSS thông qua chương trình học tập trung vào thực hành. Chỉ cần tham gia khóa học này, bạn sẽ nắm chắc các khái niệm thiết yếu của phát triển web và có thể áp dụng ngay vào dự án.

입문

입문

HTML/CSS

HTML + CSS học bài bản: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1 - [Phần cơ bản]강의 썸네일

HTML + CSS học bài bản: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 1 - [Phần cơ bản]

nhcodingstudio

Similar courses

Explore other courses in the same field!

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP - [DOM 완전 정복 Part 3]강의 썸네일

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP - [DOM 완전 정복 Part 3]

nhcodingstudio

Khóa học này bao gồm toàn bộ quá trình Critical Rendering Path (CRP) từ đầu đến cuối - cách trình duyệt nhận HTML để tạo DOM, kết hợp với CSSOM và vẽ pixel lên màn hình. Vượt ra ngoài việc thao tác DOM đơn giản, bạn sẽ học được CSS và JS ảnh hưởng như thế nào đến hiệu suất, tối ưu hóa hình ảnh·font, Lazy Loading, Intersection Observer, danh sách ảo, và thực hành với DevTools để có thể cải thiện hiệu suất web thực tế một cách đáng kể thông qua các chiến lược thực chiến.

초급

초급

HTML/CSS, JavaScript, React

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP - [DOM 완전 정복 Part 3]강의 썸네일

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP - [DOM 완전 정복 Part 3]

nhcodingstudio

Dự án tạo bản đồ nhà hàng đầy đủ cho những người không chuyên!: Front, Back-end và triển khai강의 썸네일

Dự án tạo bản đồ nhà hàng đầy đủ cho những người không chuyên!: Front, Back-end và triển khai

jiwoonjeong

Đây là khóa học lập bản đồ nhà hàng đầy đủ, nơi bạn có thể tìm hiểu về front-end, back-end, cách sử dụng Kakao Map API và cách phân phối cùng lúc trong khi tạo bản đồ nhà hàng cho YouTuber yêu thích của bạn.

초급

초급

HTML/CSS, JavaScript, REST API

Dự án tạo bản đồ nhà hàng đầy đủ cho những người không chuyên!: Front, Back-end và triển khai강의 썸네일

Dự án tạo bản đồ nhà hàng đầy đủ cho những người không chuyên!: Front, Back-end và triển khai

jiwoonjeong

Hướng dẫn hoàn hảo phát triển dịch vụ web Python/Django với React (dựa trên Django 4.2)강의 썸네일

Hướng dẫn hoàn hảo phát triển dịch vụ web Python/Django với React (dựa trên Django 4.2)

pyhub

Củng cố nền tảng phát triển dịch vụ web Python/Django. Học Django tốn thời gian, nhưng bạn có thể tối đa hóa năng suất của mình trong quá trình phát triển lặp đi lặp lại. Biến trí tưởng tượng của bạn thành hiện thực.

초급

초급

Python, Django, React

Hướng dẫn hoàn hảo phát triển dịch vụ web Python/Django với React (dựa trên Django 4.2)강의 썸네일

Hướng dẫn hoàn hảo phát triển dịch vụ web Python/Django với React (dựa trên Django 4.2)

pyhub

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]강의 썸네일

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]

nhcodingstudio

Đây là khóa học giúp bạn làm chủ một cách hệ thống các kỹ thuật CSS trung cấp trở lên như "CSS Position, Transition, Transform, Animation, Flexbox, Grid, Thiết kế web đáp ứng (Responsive Web)" và học các kỹ năng có thể áp dụng ngay vào thực tế thông qua các dự án thực hành đa dạng.

초급

초급

HTML/CSS

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]강의 썸네일

HTML + CSS học đúng cách: Chinh phục hoàn hảo từ nhập môn đến thực chiến Phần 2 - [Trung cấp]

nhcodingstudio

CSS3 tương tác web hiện đại [PHẦN 2/3]강의 썸네일

CSS3 tương tác web hiện đại [PHẦN 2/3]

youngcodikimssam

Bắt đầu với chương trình giáo dục mã hóa tiểu học, các bài giảng mã hóa dễ dàng và thú vị của giảng viên ngôi sao hiện tại Youngcodi Kim, người đã cống hiến cho giáo dục mã hóa trong hơn 15 năm cho học sinh trung học trong khoa phần mềm CNTT, sinh viên đại học ngành kỹ thuật máy tính và người tìm việc những người không chuyên về lĩnh vực này, giờ đây có thể được tìm thấy không chỉ ngoại tuyến mà còn trực tuyến. Giấc mơ trở thành lập trình viên của bạn sẽ sớm trở thành hiện thực với Youngcodi Kim, người đã đào tạo hơn 500 lập trình viên front-end, back-end, full-stack và web!

입문

입문

HTML/CSS, Web Design, css3

CSS3 tương tác web hiện đại [PHẦN 2/3]강의 썸네일

CSS3 tương tác web hiện đại [PHẦN 2/3]

youngcodikimssam

Từ cơ bản về JavaScript + jQuery đến thực hành: Trung cấp Phần 2강의 썸네일

Từ cơ bản về JavaScript + jQuery đến thực hành: Trung cấp Phần 2

usefulit

Đây là khóa học trung cấp để học JavaScript và jQuery thông qua lý thuyết và thực hành. Nó bao gồm các nội dung có thể áp dụng trong thực tế dựa trên các khái niệm cơ bản về HTML, CSS và JS. Phần 2 bao gồm các kiểu, thuộc tính, sự kiện, vị trí và kích thước cũng như hoạt ảnh.

초급

초급

JavaScript, jQuery

Từ cơ bản về JavaScript + jQuery đến thực hành: Trung cấp Phần 2강의 썸네일

Từ cơ bản về JavaScript + jQuery đến thực hành: Trung cấp Phần 2

usefulit

Giới thiệu về Lập trình phản ứng JavaScript mã nguồn mở Phần 2강의 썸네일

Giới thiệu về Lập trình phản ứng JavaScript mã nguồn mở Phần 2

usefulit

React là một thư viện JavaScript mã nguồn mở được tạo bởi Facebook. Bạn có thể tạo giao diện người dùng dựa trên thành phần bằng JavaScript. Tìm hiểu tất cả các thành phần cần thiết để phát triển web bằng React, hiện là thư viện phát triển giao diện người dùng phổ biến nhất được tối ưu hóa để tạo Ứng dụng Trang Đơn (SPA). Trong Phần 2, bạn sẽ học nhiều cách khác nhau để tạo các thành phần React.

초급

초급

React

Giới thiệu về Lập trình phản ứng JavaScript mã nguồn mở Phần 2강의 썸네일

Giới thiệu về Lập trình phản ứng JavaScript mã nguồn mở Phần 2

usefulit

Firebase Series #2: Nền tảng đề xuất Hán tự AI & học viết tay강의 썸네일

Firebase Series #2: Nền tảng đề xuất Hán tự AI & học viết tay

dakgangjung123

🔥 Xây dựng nền tảng học Hán tự tùy chỉnh! Với Google Gemini AI và Firestore, bạn có thể tự tạo sổ từ Hán tự, hoạt hình nét bút, và cả nhận diện chữ viết!

초급

초급

gemini, HTML/CSS, TailwindCSS

Firebase Series #2: Nền tảng đề xuất Hán tự AI & học viết tay강의 썸네일

Firebase Series #2: Nền tảng đề xuất Hán tự AI & học viết tay

dakgangjung123

Từ cơ bản về JavaScript + jQuery đến thực hành: Cơ bản Phần 2강의 썸네일

Từ cơ bản về JavaScript + jQuery đến thực hành: Cơ bản Phần 2

usefulit

Đây là khóa học nơi bạn có thể học JavaScript thông qua lý thuyết và thực hành. Chúng tôi giải thích từng bước để ngay cả những người mới làm quen với mã hóa cũng có thể dễ dàng hiểu được. Phần 2 bao gồm các hàm và sự kiện JavaScript, các loại hàm và thư viện cốt lõi.

입문

입문

JavaScript, jQuery

Từ cơ bản về JavaScript + jQuery đến thực hành: Cơ bản Phần 2강의 썸네일

Từ cơ bản về JavaScript + jQuery đến thực hành: Cơ bản Phần 2

usefulit

Tìm hiểu web tương tác bằng cách tạo trò chơi trên web! JAVASCRIPT

ggangcoding162118

Một lớp học nơi bạn có thể tạo trò chơi web và học các kỹ năng phát triển web front-end! Chúng tôi đã tạo một lớp về cách tạo trò chơi bằng JavaScript, CSS và HTML bằng ý tưởng của riêng mình!

초급

초급

Interactive Web, JavaScript, HTML/CSS

Tìm hiểu web tương tác bằng cách tạo trò chơi trên web! JAVASCRIPT

ggangcoding162118

Bootcamp thực hành: Thiết kế web responsive với Bootstrap강의 썸네일

Bootcamp thực hành: Thiết kế web responsive với Bootstrap

youngcodikimssam

Trong buổi học thực hành của khóa học "Xây dựng trang web phản hồi bằng BOOTSTRAP [Ấn bản sửa đổi năm 2024]", chúng ta sẽ trực tiếp xây dựng một trang web thực tế có bố cục thay đổi theo thiết bị, sử dụng Bootstrap 4.

초급

초급

Bootstrap, Responsive Web, Web Design

Bootcamp thực hành: Thiết kế web responsive với Bootstrap강의 썸네일

Bootcamp thực hành: Thiết kế web responsive với Bootstrap

youngcodikimssam

Javascript hiện đại nâng cao với ngữ pháp ES6 Part.2강의 썸네일

Javascript hiện đại nâng cao với ngữ pháp ES6 Part.2

usefulit

Khóa học này được thiết kế để học ngôn ngữ lập trình JavaScript cùng với ngữ pháp ES6 mới nhất.

중급이상

중급이상

JavaScript, ES6

Javascript hiện đại nâng cao với ngữ pháp ES6 Part.2강의 썸네일

Javascript hiện đại nâng cao với ngữ pháp ES6 Part.2

usefulit

[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế web강의 썸네일

[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế web

codingworks

Kiểm tra thực hành chức năng thiết kế web được tối ưu hóa cho nội dung kiểm tra thực hành chức năng thiết kế web phù hợp chính xác với các tiêu chuẩn ra đề kiểm tra chức năng thiết kế web (2025.1.1~2025.12.31) đang được áp dụng, đây là khóa học chuyên về kiểm tra thực hành được tối ưu hóa cho nội dung kiểm tra thực hành chức năng thiết kế web. Khóa học kiểm tra thực hành chức năng thiết kế web HTML+CSS+JQUERY Publishing, Codingworks khác biệt. Đã phản ánh hoàn toàn video bài học sản xuất hoàn hảo cho loại D và loại E được thêm vào năm 2023 và video bài học sản xuất hoàn hảo cho loại F được thêm vào năm 2024.

입문

입문

HTML/CSS, jQuery, Web Design

[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế web강의 썸네일

[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế web

codingworks

Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp강의 썸네일

Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp

youngcodikimssam

Đây là buổi học thực hành của khóa học tạo trang web responsive có thể triển khai nhiều layout khác nhau cho từng thiết bị chỉ bằng html/css/js thuần túy mà không cần sử dụng BOOTSTRAP (phiên bản mới nhất năm 2024).

초급

초급

HTML/CSS, Responsive Web, Interactive Web

Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp강의 썸네일

Xây dựng web responsive chỉ với html/css/js thuần túy [Phần thực hành] Bootcamp

youngcodikimssam

[2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành강의 썸네일

[2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành

junghw

Những người có ý tưởng nhưng không biết phải phát triển ứng dụng như thế nào, Hãy cùng làm chủ việc phát triển ứng dụng bằng cách làm thử 4 dự án thực tế!

입문

입문

JavaScript, React, Node.js

[2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành강의 썸네일

[2025] Masterclass Phát triển Ứng dụng React Native Dành cho Người Trái Ngành

junghw

JavaScript dọn dẹp: Xây dựng cơ sở!강의 썸네일

JavaScript dọn dẹp: Xây dựng cơ sở!

tonextday

Giải quyết các vấn đề. Có thể sắp xếp hợp lý các vấn đề cốt lõi và cơ bản của JavaScript. Có thể tự sắp xếp các suy nghĩ và kinh nghiệm về JavaScript. Có thể thiết lập logic kỹ thuật JavaScript. Có thể mở rộng tầm nhìn về toàn bộ JavaScript. Có thể chuẩn bị cho các câu hỏi phỏng vấn về kỹ thuật JavaScript.

초급

초급

JavaScript, Interview, Tech Interview

JavaScript dọn dẹp: Xây dựng cơ sở!강의 썸네일

JavaScript dọn dẹp: Xây dựng cơ sở!

tonextday

Khóa học siêu tốc độ vững chắc về HTML/CSS 2024강의 썸네일

Khóa học siêu tốc độ vững chắc về HTML/CSS 2024

jyoung

Nó củng cố những kiến ​​thức cơ bản cho người mới bắt đầu về HTML/CSS và tất nhiên, Bạn có thể tìm hiểu những cách thiết thực để tạo bố cục đáp ứng.

입문

입문

HTML/CSS, html-layout, css3

Khóa học siêu tốc độ vững chắc về HTML/CSS 2024강의 썸네일

Khóa học siêu tốc độ vững chắc về HTML/CSS 2024

jyoung

Đây chính là Vibe Coding thực thụ - Phiên bản Vibe Coding dành cho Developer강의 썸네일

Đây chính là Vibe Coding thực thụ - Phiên bản Vibe Coding dành cho Developer

codecamp

No Code, Only Prompt Hãy bỏ qua những dịch vụ đơn giản có thể tạo ra bằng vibe coding trong 10 phút! Bạn có thể học vibe coding ứng dụng thực tế 'thật sự' để tạo ra dịch vụ tinh vi ở mức độ dịch vụ thực tế theo kế hoạch và thiết kế bằng Cursor AI NCOP.

입문

입문

React, Next.js, cursor

Đây chính là Vibe Coding thực thụ - Phiên bản Vibe Coding dành cho Developer강의 썸네일

Đây chính là Vibe Coding thực thụ - Phiên bản Vibe Coding dành cho Developer

codecamp

[Gia hạn] Giới thiệu không giây về JavaScript trong quá trình học viết mã tự động강의 썸네일

[Gia hạn] Giới thiệu không giây về JavaScript trong quá trình học viết mã tự động

zerocho

Trong bài giảng này, bạn sẽ thực hành phát triển kỹ năng tư duy lập trình bằng JavaScript. Bắt đầu với bảng nhân trò chơi trên web, chúng ta hãy làm từng chữ, số bóng chày, kiểm tra tốc độ phản ứng, tic-tac-toe, máy xổ số, oẳn tù tì, trò chơi ghép bài, game nhập vai văn bản, quét mìn, trò chơi 2048, và thậm chí là đánh đòn.

초급

초급

JavaScript

[Gia hạn] Giới thiệu không giây về JavaScript trong quá trình học viết mã tự động강의 썸네일

[Gia hạn] Giới thiệu không giây về JavaScript trong quá trình học viết mã tự động

zerocho

Khóa học nhập môn AI Vibe Coding dành cho cả người không chuyên ngành강의 썸네일

Khóa học nhập môn AI Vibe Coding dành cho cả người không chuyên ngành

itconnect

💡 Ngay cả người không phải lập trình viên cũng có thể cùng AI từ MVP khởi nghiệp chỉ trong 10 giờ đến dịch vụ tạo doanh thu! 💰 Chi phí thuê ngoài hàng chục triệu won cần thiết cho phát triển giờ đây được giải quyết hoàn toàn chỉ với 120,000 won 🎯 Hoàn thành 5 dự án kinh doanh thực tế từ nhận diện danh thiếp, phân tích cảm xúc đến phân tích vị trí 🔥 Nếu bạn là người lập kế hoạch, marketer, người chuẩn bị khởi nghiệp thì có thể hiện thực hóa ý tưởng mà không cần lập trình viên ⚡ Bắt đầu ngay bây giờ để có được khả năng tự lập phát triển dùng cả đời!

입문

입문

HTML/CSS, Java, Web Application

Khóa học nhập môn AI Vibe Coding dành cho cả người không chuyên ngành강의 썸네일

Khóa học nhập môn AI Vibe Coding dành cho cả người không chuyên ngành

itconnect