From the DOM to the Pixel: A Complete Guide to Browser Rendering and CRP — [DOM Deep Dive, Part 3]

It has become easier to write code with AI, but it is still important to understand how the services we build are structured and operate. We need to know the overall flow—how the frontend and server connect, where data is stored, and what to consider as the number of users grows—so we can ask the right questions. I also studied by building up my knowledge one step at a time, starting with the basics. In this course, I first lay out the big picture, then suggest a way to learn by connecting the details to it. “The Age of AI One-Click Coding, a New Direction for Development: The Big Picture of System Design” is the introductory course in the System Design series. Across 74 lessons, we explore a broad range of topics, from the basic structure of services to data, communication, security, deployment, and operations. Familiar examples involving orders and reservations, along with diagrams that build up step by step, help explain why each concept matters. You don’t need to memorize every term or understand how to implement everything from the start. The goal of this course is to help you follow along comfortably, like watching an educational program, and build a big-picture understanding: “So, these are the kinds of problems that come up, and these are some ways to solve them.” Along with the videos, you’ll get an HTML textbook containing detailed explanations, diagrams, and sample code. You can follow the overall flow in the videos and revisit anything you’re curious about in the textbook. Practical implementation and in-depth coverage of specific topics will continue in the follow-up series.

In an era when AI writes code, developers need the ability to determine why that code becomes slow and where it can go wrong. From the basics of CPUs and threads to the principles behind running multiple tasks simultaneously, you’ll build your understanding step by step through hands-on exercises, detailed notes, and simulations. Based on this foundation, you’ll learn to identify the causes of performance problems and develop the fundamentals for designing fast, reliable systems.

Hashing, salting, JWT, symmetric and asymmetric keys, and even HTTPS and TLS. The backbone of security that we use every day yet always found vague and unsettling. If we have to face the countless neglected threats and technical debt someday, let’s properly tackle them once and for all this time.

This course goes beyond simple DOM manipulation to provide an in-depth look at how to dynamically construct and respond to web UIs within real-world user interactions. It is designed to help you master common professional challenges by directly implementing the essence of the event system, bubbling and capturing, event delegation, real-time UX feedback, and performance optimization using throttle & debounce. Based on an understanding of the DOM tree structure, you will develop the ability to flexibly connect event flows with state changes.

The days of feeling relieved by black-box code spat out by AI are over. By piercing through the physical limitations of computers and the inner workings of the Node.js core engine, we provide you with the engineering control to remain unshakable in the face of any traffic surge.

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.

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.

"Next.js Master Class: Part 3 - Completing Real-World Architecture" goes beyond tutorial-level projects that only run locally; it is a guide to designing "real production" architectures capable of handling massive traffic. It covers all the core technologies used in the industry, from flawless state synchronization combining TanStack Query and Zustand, to Turbopack-based bundle optimization under 100KB, advanced SEO injection, and building ironclad full-stack security networks using proxies and JWT sessions. I strongly recommend this course to those who want to overcome tedious hydration errors and CORS barriers on their own, moving beyond being a simple coder to becoming a "Senior Architect" who commands the entire frontend system.

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.

If you feel lost about what to learn in an era where AI writes code, you can find clear answers in the principles of UNIX and the kernel—the unchanging essence of systems. Through a practical project that integrates Node.js with a C language engine (FFmpeg), this course delivers the perspective of the top 1% of architects who command entire systems without being swayed by technology trends.

We will completely resolve the anxiety of those who felt frustrated by blindly copying AI-generated code without understanding the internal workings of HTTP or the causes of unexpected hanging.

In an era where AI writes code for us, the value of a "true architect" who can see through and control the macroscopic framework of a system becomes overwhelmingly higher. This course digs into the essence of low-level networks and TCP/UDP sockets hidden behind frameworks, cultivating the ability to design robust core engines that never crash even in the face of millions of traffic hits and large-scale data. Go beyond being a coder who blindly repeats copy-pasting, and leap forward to become an irreplaceable master who directs and controls AI with clear, system-level solutions.

We will delve deep into the 'Stream Architecture,' which controls massive 10GB datasets with just 50MB of memory, to grasp the essence of physical resource management. Based on this, you will design data pipelines that directly control the Operating System (OS) and the V8 engine, evolving into a top 1% high-end engineer that AI can never replace.

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.

Real-world practice is harsh. I will perfectly pass down my essence of optimization—designed to maintain a smooth user experience even in extreme environments where tens of thousands of real-time data points pour in—through a meticulous mission system. Go beyond simply being someone who writes code and leap forward into an irreplaceable senior engineer who orchestrates performance through the principles of the engine.

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.

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 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.