From Events to SPAs, the Essential Engine of the Interactive Web - [Mastering the DOM Part 2]

Have you ever thought about building a 'real system' beyond simply rendering screens? The real problem many developers commonly face is something else entirely. It's the limitation of a 'fake full-stack'—where things look plausible on the surface, but data synchronization frequently tangles, speed is frustrating, and you lose track of where to even start when just a few features are added. This isn't a problem that can be solved by simply memorizing one more Next.js feature. This course will resolve that frustration from the roots. Encyclopedia-style classes that just list features are boring, aren't they? Instead, we have tightly integrated the fundamental principles of Computer Science (CS) with the advanced architecture of Next.js. We will directly transplant into your fingertips the enterprise-level design skills required to flexibly withstand millions of visitors and maintain perfect data consistency.

The Next.js 15 App Router is a powerful architecture for building high-performance web services by perfectly controlling the boundary between server and client. This course clearly connects complex rendering mechanisms—from the operating principles of React Server Components (RSC) to the three major caching strategies (Static, Dynamic, and ISR)—through 12 practical missions. Through this, you will gain the ability to design file-system routing and nested layouts according to business requirements, completely breaking free from the anxiety of "vibe coding" where you copy code without understanding the principles. Ultimately, you will evolve into a Next.js architect who can instantly spot the blind spots in AI-generated code and proactively direct the optimal structure.

This is not just a lecture you listen to and forget. This course aims not for "the moment you understand React," but for "the moment you can actually work with React." In every section, you'll complete missions alongside the lectures, solve practice problems yourself, and learn by implementing core concepts like JSX, Virtual DOM, State, and useEffect with your own hands. When you finish the course, you won't just be a beginner who knows React syntax—you'll be a developer who can explain and utilize everything from component design to rendering flow on your own. "Not a class you just listen to, but learning you build through completion." Understand the essence of React and experience the world of declarative UI firsthand.

We solve the fundamental problem of losing control amidst AI-generated fragmented code and the complex React ecosystem by opening the hood and engineeringly analyzing the internal workings of core React libraries such as Zustand, TanStack Query, React Hook Form, Zod, and the React Compiler. By moving beyond simple tool usage and mastering how to directly manipulate the performance and data flow of the React engine, you will build the solid 'enterprise architecture design muscle' necessary to respond immediately to any crisis.

The real world is unforgiving. I will thoroughly pass on my optimization expertise through a meticulous mission system, showing you how to design smooth user experiences even in extreme environments where tens of thousands of real-time data points pour in. Go beyond simply writing code and leap forward to become an irreplaceable senior engineer who dissects performance through understanding engine principles.

This course covers the entire Critical Rendering Path (CRP) process, from the moment the browser receives HTML to create the DOM, to combining it with the CSSOM and painting pixels on the screen. Moving beyond simple DOM manipulation, you will learn how CSS and JS impact performance, as well as practical strategies to noticeably improve real-world web performance—including image and font optimization, Lazy Loading, Intersection Observer, virtual lists, and hands-on practice with DevTools.

📌 This course is a curriculum that starts with a strategic AI tic-tac-toe project and completes core object-oriented programming concepts through practical examples. You'll train logic design and AI strategic thinking through game implementation, then directly experience OOP design techniques like inheritance, composition, delegation, and encapsulation through code. This is recommended for those who want to grow beyond syntax into a 'developer who designs' through real projects.

No matter how much you study React, Next.js, or Vue, if the code feels abstract and the structure isn't clearly understood, the root cause might be a lack of understanding of DOM. DOM is the foundation of all frontend frameworks and the entity that connects the structure and behavior of web pages. This lecture goes beyond simple selectors or manipulation methods, teaching step-by-step from the very beginning how HTML transforms into DOM objects and how to select, traverse, and manipulate this structure. It is the Part 1 introductory lecture of 'Complete DOM Mastery'. HTML tags are just structure, and JavaScript is just behavior, but DOM is the core that connects the two. If you clearly understand this connection, you'll be able to precisely grasp the true structure and flow within any framework you use.

A smooth-flowing guide to Express.js, from basics to real-world application! A backend journey to truly master everything from basic server concepts to completing a CRUD project through hands-on implementation.

This course goes beyond just using Express.js—you'll implement its internal engine from scratch to truly understand how real servers work. You'll gain hands-on experience growing as a server developer by building all of Express's components from the ground up, including routers, middleware, request-response objects, static file handling, and template rendering.

This course systematically masters intermediate to advanced CSS techniques such as "CSS Position, Transition, Transform, Animation, Flexbox, Grid, and Responsive Web Design," and equips you with skills immediately applicable in real-world projects through various hands-on practice projects.

This course is a full-stack level frontend project course that focuses on implementing Notion from start to finish using Vanilla JavaScript, going beyond simple UI cloning to deeply understand the internal operating principles. You'll implement all the core features of a real note-taking app using vanilla JS, including sidebar tree, nested document creation, auto-save, routing, trash, favorites, search modal, settings modal, theme switching, Export/Import, keyboard shortcuts, responsive layout, drag resize, and more. The goal is to solidly learn browser standard behaviors (event bubbling, DOM tree, local storage, Blob, FileReader, hash routing, etc.) that you must know before frameworks like React and Vue, so you can completely understand "why it works this way" and build the skills to debug effectively.

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.

Through this course, students will broadly learn the basics and advanced concepts of JavaScript, from setting up the development environment to variables, conditional statements, functions, objects, and arrays. Through thorough review with practice exercises and quizzes, they will be able to develop problem-solving skills that can be immediately applied to web and mobile development practices.

The "Learning HTML + CSS Properly: Complete Mastery from Beginner to Practical Application Part 1" course is designed to provide a deep understanding of how the internet and the web work, and to solidify the basics of HTML/CSS through a practice-oriented curriculum. By taking this course, you can firmly grasp the essential concepts of web development and immediately apply them to projects.

This course covers the entire Critical Rendering Path (CRP) process, from the moment the browser receives HTML to create the DOM, to combining it with the CSSOM and painting pixels on the screen. Moving beyond simple DOM manipulation, you will learn how CSS and JS impact performance, as well as practical strategies to noticeably improve real-world web performance—including image and font optimization, Lazy Loading, Intersection Observer, virtual lists, and hands-on practice with DevTools.

The real world is unforgiving. I will thoroughly pass on my optimization expertise through a meticulous mission system, showing you how to design smooth user experiences even in extreme environments where tens of thousands of real-time data points pour in. Go beyond simply writing code and leap forward to become an irreplaceable senior engineer who dissects performance through understanding engine principles.

This is a full-stack restaurant map tutorial that allows you to learn everything from front-end, back-end, Kakao Map API usage, and deployment all at once while creating a restaurant map of your favorite YouTuber.

No matter how much you study React, Next.js, or Vue, if the code feels abstract and the structure isn't clearly understood, the root cause might be a lack of understanding of DOM. DOM is the foundation of all frontend frameworks and the entity that connects the structure and behavior of web pages. This lecture goes beyond simple selectors or manipulation methods, teaching step-by-step from the very beginning how HTML transforms into DOM objects and how to select, traverse, and manipulate this structure. It is the Part 1 introductory lecture of 'Complete DOM Mastery'. HTML tags are just structure, and JavaScript is just behavior, but DOM is the core that connects the two. If you clearly understand this connection, you'll be able to precisely grasp the true structure and flow within any framework you use.

🔥 Build a customized platform for Hanja learning! Leverage Google Gemini AI and Firestore to directly implement your own Hanja vocabulary book, stroke order animation, and even handwriting recognition!

Build and deploy community applications using the MERN Stack (MongoDB, Express, React, Node + Firebase)

This course covers practical Web APIs. I hope you gain the tools to solve requirements you are bound to encounter at least once in the field.

This course goes beyond just using Express.js—you'll implement its internal engine from scratch to truly understand how real servers work. You'll gain hands-on experience growing as a server developer by building all of Express's components from the ground up, including routers, middleware, request-response objects, static file handling, and template rendering.

The ES6+ Understanding Course provides an in-depth introduction to the ES6 and subsequent standard ECMAScript specifications for JavaScript, with a theoretical foundation, and explains the differences from ES5, as well as the concepts and operating principles.

📌 This course is a curriculum that starts with a strategic AI tic-tac-toe project and completes core object-oriented programming concepts through practical examples. You'll train logic design and AI strategic thinking through game implementation, then directly experience OOP design techniques like inheritance, composition, delegation, and encapsulation through code. This is recommended for those who want to grow beyond syntax into a 'developer who designs' through real projects.

For over 15 years, Young Codi Kim, a star coding instructor, has been dedicated to coding education for elementary school students, high school students in IT software departments, university students in computer science, and job seekers without a major in the field. Now, you can experience Kim's easy and fun coding lectures not only offline but also online. With Young Codi Kim, who has trained over 500 front-end, back-end, full-stack, and web developers, your dream of becoming a developer will soon become a reality!

Based on the experience of wondering how facial recognition works in offline environments on-site, this course will guide you through building the basic structure of a facial recognition-based access and attendance management system using React + Electron and Python's FastAPI-based DeepFace. Rather than focusing on perfection, we focus on understanding the operating principles and laying the foundation for you to expand into your own personal projects.

Let's learn together the official React documentation that has been renewed in 2023.

A three-in-one class where you can create web games and learn front-end web development skills! This class has been created to teach you how to create games using JavaScript, CSS, and HTML with your own ideas!

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.

This is the easiest JavaScript tutorial for those who are starting to code in JavaScript.

Document writing is the most challenging part for both aspiring and current developers! Create your own portfolio by looking at how successful candidates write their documents! We speak based only on documents that actually passed!

Through this lecture, students can create a web service similar to Instagram using HTML, CSS, and JS. (Only the front-end is implemented! The back-end server construction will be filmed in a later lecture.)

We have prepared a short and easy course for those preparing for the Web Design Technician practical exam. Even if it's not just for the exam, anyone interested in implementing a site that meets web standard formats is welcome.

This is a mission content for a frontend project. We provide a PRD planning document, Figma design, and API endpoints so you can practice the project by implementing a timer app called DevTime yourself. Make the knowledge you've learned so far completely your own by implementing a project at a level similar to an actual service 🚀