강의

N
챌린지

멘토링

N
클립

커뮤니티

NEW
Programming

/

Front-end

React Master Class: Part 2 - High-Performance Hooks and Practical Architecture Completed Through Missions

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.

8 learners are taking this course

Level Basic

Course period Unlimited

  • nhcodingstudio
실습 중심
실습 중심
React
React
실습 중심
실습 중심
React
React

What you will gain after the course

  • You will complete a high-performance app that maintains smooth 60 frames per second even when tens of thousands of real-time data points are streaming in.

  • Implements a high-end interface that responds instantly to user clicks and inputs even while heavy computations are running.

  • You will develop the insight to precisely identify optimization points by meticulously calculating rendering costs, rather than relying on simple intuition.

  • You can completely eliminate the subtle flashing and layout shifting that occurs when popups or menus appear.

  • Eliminates data inconsistency issues between server and client, elevating service stability to the highest industry standards.

  • Master high-level data pipeline design methods that can be immediately applied to large-scale enterprise services.

  • We build systems that gracefully isolate and recover so that the entire service doesn't stop even when unexpected errors occur.

  • Based on the working principles of the React engine, you will gain practical skills to logically track and resolve performance bottlenecks.

  • Build an intelligent search and filtering system that finds desired results in 0.1 seconds from tens of thousands of items.

  • You will have a high-difficulty project result at the level of a global monitoring dashboard that far exceeds junior level in your portfolio.

  • You will develop the mindset of an engineer who takes responsibility for the performance of the entire system, going beyond simply implementing features.

  • You will master advanced techniques that control the split-second moments when browsers render the screen, perfecting the details of user experience.

  • We apply a robust component identity assignment strategy that remains intact even in server-side rendering environments to practical work.

  • Leverage the latest React Router architecture to declaratively and completely control data flow between complex pages.

  • We complete an enterprise-grade system where data loading and server state synchronization work together organically.

  • You will gain strong confidence in tackling head-on the most challenging and demanding performance issues encountered in real-world work environments through technical expertise.

  • Develop design capabilities to achieve optimal execution efficiency through strategic choices between memory usage and computational cost.

  • Sharpen your practical skills to the extreme by solving missions based on the brutal real-world scenarios that actual senior developers face.

  • Learn how to bridge the gap between premium UI and ordinary UI—created by subtle differences in detail—through technical excellence.

  • Upon completing the course, you will gain overwhelming technical competitiveness to lead services at the pinnacle of React.


🎓React Master Class: Part 2 High-Performance Hooks and Practical Architecture Completed Through Missions

The stage beyond the basics of React is not simply about 'rendering' screens, but about designing the 'performance and structure of the engine' through which data flows.

This course is a high-end engineering class that opens the hood of React and tunes its internal rendering engine.

Many developers write code based on vague guesses when facing performance optimization or complex state management,

This course starts with the engineering question: "Why was this hook created?"

Referential equality → rendering blast radius → concurrent rendering → data loaders - master advanced architecture through this progression, and internalize through your fingertips performance optimization that tolerates not even 0.1 seconds of lag and a global state engine that remains solid even in large-scale projects, via 37 real-world missions.

🧱 Core Philosophy of Course Structure

📌 "Business logic is not a component's private affair."
→ Logic fragmented with useState becomes a breeding ground for bugs. All state transitions must be handled atomically in an independent brain called a 'Reducer'. By strictly separating UI and business logic, we build a 'Single Source of Truth (SSOT)' architecture that can be perfectly validated by the logic itself, even without a screen.

📌 "Don't guess, prove it with data."
→ Abandon subjective feelings like "it seems slow" and communicate with objective metrics in milliseconds (ms) through the Profiler. Identify the culprit occupying the browser's main thread with data, and present surgical optimization techniques that defend the '16ms rule' to maintain smooth 60fps performance.

📌 "Structural design is more powerful than Hooks."
→ Performance optimization hooks (useMemo, useCallback) are not cure-alls and are themselves a cost. Before deploying hooks, physically isolate the 'Render Blast Radius' through State Push-down and Component Composition. Experience the power of 'automatic bail-out' that occurs without hooks through architectural improvements.

📌 "Unstoppable user experience, interruptible rendering."
→ React 18's Concurrency model is a game changer for the modern web. Moving away from the past where every task was treated as 'urgent', it pushes heavy computations to the background and responds to user input as the top priority through 'priority orchestration', designing a high-end interface that never freezes under any circumstances.

📌 "0.1% of visual defects determine a brand's class."
→ Logic may be correct, but screens that subtly jitter with 'layout shift (Jank)' undermine professionalism. Through useLayoutEffect, which controls the fleeting moment before the browser paints its first pixel, and useId strategy, which unifies server-client identity, we deliver perfect visual continuity that allows not even a single frame of error to the user.

📌 "The URL is the most reliable global state."
→ We pursue a 'URL-based architecture' anchored in the browser's address bar, not data in memory that disappears on refresh. Using React Router v7's data loaders to pre-fetch data before rendering and isolating failures with error boundaries, we build enterprise-grade navigation that continues seamlessly from any route.

✨ Features of This Course

  1. A high-end class that completely controls the 'rendering pipeline'
    → Reduce visual defects to 0ms with useLayoutEffect, which takes control of the stage before browser painting.

  2. Separating complex business logic into a 'brain (Reducer)'
    → Build enterprise-grade architecture that's easy to maintain by perfectly encapsulating UI and logic.

  3. Mastering the Essence of Referential Equality
    → Dive deep into JavaScript memory address principles to maximize the synergy between useCallback and memo.

  4. Multi-Global State Engine Architecture Strategy
    → Design a multi-engine structure where various engines such as authentication, theme, and task management coexist harmoniously.

  5. Practical Application of React 18 Concurrency Model
    → Defend responsiveness even amid data overload with useTransition and useDeferredValue.

  6. Modern navigation based on React Router v7
    → Master prefetching techniques that preemptively load data before rendering through data loaders.

  7. 37 Advanced Real-World Mission Integrations
    → Solve real-world challenges through code, including stock analyzers, filtering 10,000 users, and secure payment gateways.

  8. Transfer of Senior-Level Golden Rules and Design Philosophy
    → Go beyond simple coding to gain an architect's perspective for designing scalable systems.

1️⃣ Structural State Management Mastery: Design operational manuals containing complex business rules with useReducer.

2️⃣ Global State Engine Architecture: Utilize Context API as an 'enterprise intranet' to permanently eliminate Props Drilling.

3️⃣ Practical Authentication and Security System: Build a sophisticated authentication circuit that flows from LOGIN_START to SUCCESS.

5️⃣ Reference Integrity and Bailout: Eliminate unnecessary phantom renders at the source by fixing JavaScript reference values.

4️⃣ Rendering Cost and Memoization: Eliminate CPU load with secret ledger techniques that reduce O(2^n) operations to O(n).

6️⃣ Physical DOM and Encapsulation: Exercise control that preserves the child's dignity through forwardRef and useImperativeHandle.

7️⃣ The Pinnacle of Visual Optimization: Control popup position correction and animation starting points down to the pixel with useLayoutEffect.

8️⃣ SSR and Hydration Strategy: Establish a unique identifier strategy using useId that unifies server and client identity.

9️⃣ Concurrent Rendering (Concurrency): Create a non-blocking UI that prioritizes user input even during heavy computations.


🔟 Enterprise Navigation: Complete ultra-fast architecture with React Router v7 data loaders and secure redirects

For those who want to go beyond simple feature implementation and analyze "why my app is slow" from an engineering perspective

Those who want to immediately apply React 18's concurrency model and Router v7's latest features to real-world projects


Those aiming for high-end UI that tolerates not even 0.1 seconds of visual defects

Those who suffer from Props Drilling and are contemplating the right architecture for global state

Those who want to master the browser's rendering pipeline (Render-Commit-Paint)


Those who want to elegantly exchange necessary control between components while maintaining independence

Those who wonder why re-rendering still occurs despite using useMemo and useCallback


Those who want to learn a 'scalable folder structure' that won't collapse even in large-scale projects


Developers who want to leap from "simple coder" to "React architect"

👥 Recommended for

  • Those who want to immediately pinpoint and fix why the screen is lagging using profiler data

  • Those who want to dramatically lighten components by separating complex business logic into reducers

  • For those who want to freely control memory address values to prevent rendering storms

  • Those who want to design a concurrent UI where typing never stutters even while filtering through 10,000 data items

  • For those who want to solve 'visual glitches' in 0ms where popups or tooltips appear in the wrong place and jump around

  • For those who want to build a multi-engine system where authentication, themes, and data engines coexist hierarchically

  • For those who want to wrap external libraries into an elegant imperative API that aligns with React's principles

  • Those who want to become an architect who designs the data flow and priorities of the entire system, not just simple coding

  • Those who want to implement ultra-fast transitions 'without loading spinners' by utilizing the data loader of React Router v7

  • Those who want to investigate the root cause of 'phantom rendering' caused by broken referential integrity from a JavaScript engine perspective

  • Those who want to establish clear criteria on when to use and when to stop using performance optimization hooks (useMemo, useCallback)

  • Those who want to perfectly defend against hydration errors occurring in SSR environments using the useId strategy

  • For those who want to analyze and catch elusive bugs caused by 'Stale Closures' from a fundamental principle perspective

  • Those who want to first improve the app's constitution through structural optimization (state pushing down, composition) before using hooks

  • For those who want to learn senior developers' code review standards and propose optimizations to team members with engineering rationale

🎓 After completing this course

  • You can logically explain and resolve "why the screen is lagging" based on profiler data.

  • Build a state transition system to create apps where data sync remains intact even in complex logic.

  • Using the principle of referential equality, we render only the minimum necessary units even in large-scale lists.

  • Use useTransition to handle user input within 0.1 seconds even during heavy operations.

  • Implement high-end UX that secures data before page entry by utilizing React Router v7's Loader.

  • Error boundaries enable isolation design that prevents specific failures from spreading throughout the entire app.

  • Use useLayoutEffect to correct layout before browser painting, maintaining visual integrity.

  • Use useImperativeHandle to protect the child's internal DOM while exposing only precise control to the parent.

  • By applying useDeferredValue, we maintain main thread responsiveness even amid a flood of incoming data.

  • Master the functional update technique to safely handle the latest state while keeping the dependency array empty.

  • Domain-specific engine separation enables you to maintain a clean architecture that's easy to maintain even across tens of thousands of lines of code.

  • useId suffix strategy ensures web accessibility and identifier uniqueness in large-scale form systems.

  • Calculates the Render Blast Radius to design for performance even without hooks.

  • Combine 12 advanced hooks in the right places to solve any complex requirements in a React-like manner.

  • Go beyond the limits of a "simple coder" and become a "React engineer" who uses performance data as a tool for trust.

🎯 React Part 2 – 37 Core Missions Summary Table

🟩 Cafeteria Inventory Management System — useReducer Basics Design an operations manual that contains business rules (preventing inventory from going below 0). Learn how to completely separate UI and logic to clarify the cause-and-effect relationships of state transitions.

🟥 Building a Data Fetching Engine — FETCH Action Flow Transplant the authentication system flow (START-SUCCESS-FAILURE) into data loading. Create a centralized data control system that synchronizes data across the entire app.

🟧 Escaping Rerender Hell — State/Dispatch Channel Separation Advanced optimization to redraw only specific buttons in a 10,000-product management system. Physically isolates command and data channels through dual Context design.

🟪 Consultation Chat Room "Frozen Data" Detection — The Trap of Dependency Arrays Solves the 'Stale Closure' bug where functions frozen for performance get trapped in outdated data. Develops design muscles for striking a precise balance between optimization and data freshness.


🟦 Magic Search System — Physical Focus & useRef Control Go beyond React's declarative limitations to give focus to actual HTML nodes and manipulate background colors. Quietly collect statistical data with a 'secret notebook' that doesn't trigger re-renders.


🟩 Exchange Rate Time Machine — Tracking the Past React Forgot Compare the previous exchange rate with the current rate in real-time to analyze ▲/▼ signals. Learn the standard practice of using Ref as a time machine recording device to track vanished past states.


🟪 Premium Video Player — High-Performance Tracking & Outside Click Detection Perfectly records playback time in 0.1-second intervals without rendering overhead. Combines the contains() API with Ref to create a UX that automatically closes modals/dropdowns when clicking outside.


🟧 "Zero Lag" Filtering for 10,000 Employee Directory — useMemo in Action Solves the inefficiency of re-scanning 10,000 employees just from changing the theme by creating a useMemo no-wind zone. Develops the design ability to select only the 'pure ingredients' that affect computation results.


🟫 Complete Elimination of Ghost Rendering — useCallback & memo Collaboration Prevents the runaway re-rendering of innocent child components (employee cards) when the parent (clock) changes. Establishes an optimization triangle formation where the key (address fixation) and lock (address verification) interlock.


🟥 Secure Payment Window "Secret Passage" Design — useImperativeHandle Instead of exposing all the child's internals to the parent, only provide the permitted 'reset' button. Learn advanced techniques to maintain independence between components through encapsulation.


🟧 High-End Tooltip System — Blocking Visual Defects with useLayoutEffect Solve the 'teleportation phenomenon' where tooltips appear in the wrong place and then move to the correct position in 0ms. Learn the secret technique of controlling the pre-browser painting stage to complete positioning before users notice.


🟪 Accessibility-Compliant Accordion — useId Cross-Reference Strategy Bind aria-controls and aria-labelledby 1:1 to create a UI that's convenient even for the visually impaired. Utilize the suffix strategy to perfectly prevent ID collisions among tens of thousands of elements.


🟦 A Glass of Water from the Chef — useTransition Concurrency Control Design a structure that responds immediately to a guest's water request (input) even while preparing heavy dishes (computation). Use startTransition to demote priority and escape browser blocking.


🟩 Data Flow Suspension — Pace Control with useDeferredValue Install a 'buffer mechanism' for heavy lists that can't keep up with input speed. Complete an intelligent flow that batch-updates results in the brief moment when the user stops typing.


🟦 Bellboy (Loader) Pre-Order — Router v7 Data Loader Instead of ordering when you arrive at the restaurant, you reserve your food before you even leave. Switch the engine with createBrowserRouter and experience the thrill of screens appearing instantly upon navigation.

🟩 Building Fire Shutters Design — Error Boundary & Redirect Isolate failures in specific pages to prevent them from spreading into app-wide crashes. Build a defensive routing system that bounces unauthenticated users before the rendering phase.

💻 Notes Before Taking the Course

Development Environment

  • 💻 Node.js (v18 or higher) and React 18+ concurrency model environment required

  • 🌐 Using React DevTools (Profiler) and Browser Performance Measurement Tools

  • 🪶 React basic syntax (Part 1 level) and JS ES6+

  • 🧩 Every section follows the order: "Concept → Engine Analysis → Optimization Practice → High-End Mission"

  • 📘 Complete PDF study guide and architecture diagrams for all 61 lectures provided

  • 🧠 Focus on "the process of intervening in the browser pipeline" rather than theory

  • 🧰 Includes examples based on Vite / React Router v7 / React DevTools

  • ⚡ Principle-based explanation of directly controlling React's "engine under the hood"


Learning Materials

  • 🧾 Advanced Architecture PDF Textbook

    • Golden rules summary for performance optimization by section

    • Visual architecture diagrams including referential integrity, rendering blast radius, etc.

    • Profiler flame chart interpretation guide and bottleneck detection checklist

    • Senior developer's "Code Review Standards" and security design guide included

  • 💻 Legendary Master Code (ZIP)

    • Complete example code for Sections 1-61 + Solution code for 37 advanced missions

    • Complete source code with State/Dispatch separation and Data Loader pattern applied


Recommended for
these people

Who is this course right for?

  • A developer who has mastered the basic syntax of React but feels frustrated when their app becomes helplessly slow in real-world situations with thousands of data entries

  • For those who have perfect logic but can't seem to fix the 'visual discomfort' of the screen flickering or elements jumping around at every fleeting moment

  • People who are using useMemo and useCallback but aren't sure whether they're actually improving performance or just wasting memory

  • People who are struggling in the swamp of persistent 'Hydration Error' and 'ID mismatch' issues that keep following them after introducing Server-Side Rendering (SSR)

  • A developer who wants to use the latest features of React 18 and 19 but doesn't know how to apply them to real-world scenarios, so they just keep reading the official documentation over and over again

  • Someone who needs to build a complex data grid or admin dashboard with more than 50,000 rows, but is struggling to get started with rendering optimization

  • Someone who's pulling their hair out right before service launch due to infinite loops or tangled layout measurement values from handling all effects with just useEffect

  • Someone who is experiencing blood-draining stress while operating high-sensitivity commerce or real-time chart services where even 0.1 seconds of input lag leads to user churn

  • Those who want to design enterprise-grade architecture using the latest version of React Router (v7), but feel frustrated that only tutorial-level materials are available

  • A developer who wants to prevent the entire app from crashing to a white screen when an error occurs by introducing 'Error Boundary', but is unsure how to design a recovery strategy

  • Someone who wants to remove the 'junior' title from themselves but is experiencing a growth plateau, constantly feeling intimidated in conversations with seniors due to a lack of technical depth (Deep Dive)

  • Those who wanted to identify bottlenecks using optimization tools but gave up due to lack of ability to interpret the complex graphs and figures from performance measurement tools

  • A tech lead who is in a position to present React technical standards and optimization guidelines within the team, but feels they lack sufficient logical justification themselves

  • A job seeker who felt disappointed for not being able to give a more in-depth answer beyond useMemo when asked "How do you optimize React rendering?" in interviews or technical interviews

  • A developer who wants to go beyond simple bulletin board implementations and take on 'real projects' that demand extreme performance, like global logistics control systems or financial systems

  • A perfectionist who has moved beyond the "if the code works, it's done" mindset and wants to control every millisecond of execution time and even a single unnecessary re-render

  • A data modeling beginner who is repeatedly pulling all-nighters debugging, unable to figure out where the data flow went wrong in a complex, tangled component structure

  • A refactoring lead who has been given the mission to dramatically improve the performance of an existing project, but has absolutely no guidelines on where to start

  • A theoretical developer who knows React's working principles (Reconciliation, Fiber, etc.) in theory, but has no experience implementing them in actual code or achieving results with them

  • Those who want to achieve 'library creator' level skills, going beyond just using libraries made by others to being able to design and distribute high-end hooks themselves

Need to know before starting?

  • React fundamentals: Understanding the concepts of Components, Props, and State and being able to utilize them

  • Basic hooks experience: Experience building simple features using useState and useEffect

  • JavaScript Basics: Those familiar with ES6+ syntax and asynchronous (async/await) handling

  • Development environment: Those who have Node.js installed and are comfortable working with editors and terminals

Hello
This is

535

Learners

39

Reviews

10

Answers

4.7

Rating

13

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

161 lectures ∙ (6hr 13min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

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

Limited time deal

$26,400.00

70%

$68.20

nhcodingstudio's other courses

Check out other courses by the instructor!

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through MissionsCourse Thumbnail

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through Missions

nhcodingstudio

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.

Basic

Basic

HTML/CSS, JavaScript, React

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through MissionsCourse Thumbnail

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through Missions

nhcodingstudio

Implementing Notion Directly with Vanilla JavaScriptCourse Thumbnail

Implementing Notion Directly with Vanilla JavaScript

nhcodingstudio

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.

Basic

Basic

JavaScript, React, Web Application

Implementing Notion Directly with Vanilla JavaScriptCourse Thumbnail

Implementing Notion Directly with Vanilla JavaScript

nhcodingstudio

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

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

nhcodingstudio

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.

Basic

Basic

HTML/CSS, JavaScript, React

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

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

nhcodingstudio

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]Course Thumbnail

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

This course covers the Critical Rendering Path (CRP) process from start to finish, where the browser receives HTML to create the DOM, combines it with the CSSOM, and renders pixels on the screen. Beyond simple DOM manipulation, you'll learn how CSS and JS impact performance, image and font optimization, Lazy Loading, Intersection Observer, virtual lists, and DevTools practice, gaining practical strategies to noticeably improve real web performance.

Basic

Basic

HTML/CSS, JavaScript, React

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]Course Thumbnail

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

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

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

nhcodingstudio

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.

Basic

Basic

JavaScript, Node.js, Express

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

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

nhcodingstudio

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]Course Thumbnail

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]

nhcodingstudio

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.

Beginner

Beginner

HTML/CSS, JavaScript, React

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]Course Thumbnail

Everything About Structure Navigation and Manipulation - [Complete DOM Mastery Part 1]

nhcodingstudio

Building a Node.js Server Engine – Learning Framework Design through an Express.js CloneCourse Thumbnail

Building a Node.js Server Engine – Learning Framework Design through an Express.js Clone

nhcodingstudio

Beyond simply using Express.js, this lecture will have you directly implementing its internal engine from scratch to finish, allowing you to truly internalize the operating principles of a real server. You will directly build all of Express's components, such as routers, middleware, request-response objects, static file handling, and template rendering, from the ground up, providing an experience that fosters growth as a server developer.

Basic

Basic

JavaScript, Node.js, Express

Building a Node.js Server Engine – Learning Framework Design through an Express.js CloneCourse Thumbnail

Building a Node.js Server Engine – Learning Framework Design through an Express.js Clone

nhcodingstudio

Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]Course Thumbnail

Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]

nhcodingstudio

📌 This course starts with a strategic AI Tic-Tac-Toe project and is a curriculum that completes the core concepts of object-oriented programming through practical examples. Through game implementation, you will train logic design and AI strategic thinking, and then directly experience OOP design techniques such as inheritance, composition, delegation, and encapsulation through code. This is recommended for those who want to go beyond syntax and grow into a 'designing developer' through a real project.

Basic

Basic

JavaScript, HTML/CSS, oop

Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]Course Thumbnail

Properly Learning JavaScript: Mastering Object-Oriented Programming & Applied Strategy AI Tic-Tac-Toe Part 2 [Intermediate]

nhcodingstudio

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]Course Thumbnail

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]

nhcodingstudio

An Express.js journey from beginner to mastery, flowing like water! A backend journey where you learn properly by directly implementing from basic server concepts to completing a CRUD project.

Basic

Basic

express.js, Node.js, routing

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]Course Thumbnail

Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]

nhcodingstudio

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]Course Thumbnail

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]

nhcodingstudio

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.

Beginner

Beginner

JavaScript, HTML/CSS, Web Application

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]Course Thumbnail

Learning JavaScript Properly: A Complete Guide from Beginner to Professional Part 1 - [Basics]

nhcodingstudio

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]Course Thumbnail

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]

nhcodingstudio

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.

Basic

Basic

HTML/CSS

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]Course Thumbnail

Mastering HTML + CSS: A Complete Guide from Beginner to Advanced Part 2 - [Intermediate]

nhcodingstudio

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]Course Thumbnail

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]

nhcodingstudio

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.

Beginner

Beginner

HTML/CSS

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]Course Thumbnail

Mastering HTML + CSS: The Complete Guide from Beginner to Advanced - Part 1 [Basics]

nhcodingstudio

Similar courses

Explore other courses in the same field!

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through MissionsCourse Thumbnail

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through Missions

nhcodingstudio

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.

Basic

Basic

HTML/CSS, JavaScript, React

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through MissionsCourse Thumbnail

React Master Class: Part 1 - Understanding the Essence of Rendering and Design Through Missions

nhcodingstudio

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

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

nhcodingstudio

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.

Basic

Basic

HTML/CSS, JavaScript, React

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

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

nhcodingstudio

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]Course Thumbnail

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

This course covers the Critical Rendering Path (CRP) process from start to finish, where the browser receives HTML to create the DOM, combines it with the CSSOM, and renders pixels on the screen. Beyond simple DOM manipulation, you'll learn how CSS and JS impact performance, image and font optimization, Lazy Loading, Intersection Observer, virtual lists, and DevTools practice, gaining practical strategies to noticeably improve real web performance.

Basic

Basic

HTML/CSS, JavaScript, React

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]Course Thumbnail

From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]

nhcodingstudio

React for Beginners: Building a Solid FoundationCourse Thumbnail

React for Beginners: Building a Solid Foundation

tonextday

You can learn the basics of React. You can organize HTML, JavaScript, DOM, Event, Object, Module, OOP, etc. related to React.

Basic

Basic

React, JavaScript, DOM

React for Beginners: Building a Solid FoundationCourse Thumbnail

React for Beginners: Building a Solid Foundation

tonextday

Frontend Development Kick, Web API (feat. React)Course Thumbnail

Frontend Development Kick, Web API (feat. React)

vroomfan

We cover Web APIs for practical application. We hope you gain the tools to resolve requirements you're bound to encounter.

Basic

Basic

JavaScript, React, Web API

Frontend Development Kick, Web API (feat. React)Course Thumbnail

Frontend Development Kick, Web API (feat. React)

vroomfan

Building a Real-World AI SaaS Full-Stack: Creating a Video Chat AppCourse Thumbnail

Building a Real-World AI SaaS Full-Stack: Creating a Video Chat App

antonio

We're building an AI-powered video conferencing application with real-time AI agents, meeting summary features, and post-call functionality.

Basic

Basic

React, Next.js, TailwindCSS

Building a Real-World AI SaaS Full-Stack: Creating a Video Chat AppCourse Thumbnail

Building a Real-World AI SaaS Full-Stack: Creating a Video Chat App

antonio

Voting Community Platform with React & FastAPI: Monetization through Payment Systems!Course Thumbnail

Voting Community Platform with React & FastAPI: Monetization through Payment Systems!

dakgangjung123

In this course, you will practice step-by-step using React and FastAPI to implement social features like real-time voting, comments, and likes, as well as integrating payment systems (KakaoPay, TossPay, etc.) for monetization.

Intermediate

Intermediate

React, MySQL, Docker

Voting Community Platform with React & FastAPI: Monetization through Payment Systems!Course Thumbnail

Voting Community Platform with React & FastAPI: Monetization through Payment Systems!

dakgangjung123

Becoming a Great React DeveloperCourse Thumbnail

Becoming a Great React Developer

nakjasabal0079

"Becoming a Developer Who Excels at React" has been published. This book provides a solid foundation by systematically guiding you from the basic principles of the web needed before learning React to the latest React hooks. Through over 40 diverse hands-on projects and abundant practical examples, you can apply theory directly to real-world situations and develop problem-solving skills. Additionally, it helps you grow into a developer capable of building high-quality React applications by learning essential modern web development technologies such as Redux Toolkit, Zustand, and Firebase.

Basic

Basic

JavaScript, React, Firebase

Becoming a Great React DeveloperCourse Thumbnail

Becoming a Great React Developer

nakjasabal0079

SpringBoot & React Portfolio Project: Hands-on AWS Service Deployment for BeginnersCourse Thumbnail

SpringBoot & React Portfolio Project: Hands-on AWS Service Deployment for Beginners

ehtjd339667

A portfolio-focused course on directly deploying React frontend and SpringBoot backend to AWS cloud! This course is helpful for those who want to quickly deploy frontend and backend projects to their portfolio! You'll be able to practice step-by-step in a short period the knowledge needed for deployment, from server setup to Docker, Domain connection, Nginx, and HTTPS implementation!

Basic

Basic

React, Java, AWS

SpringBoot & React Portfolio Project: Hands-on AWS Service Deployment for BeginnersCourse Thumbnail

SpringBoot & React Portfolio Project: Hands-on AWS Service Deployment for Beginners

ehtjd339667

# [Electron #1] Building a Timer App with Electron + React (With Zustand)Course Thumbnail

# [Electron #1] Building a Timer App with Electron + React (With Zustand)

dakgangjung123

This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux). Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!

Basic

Basic

React, Electron, GUI

# [Electron #1] Building a Timer App with Electron + React (With Zustand)Course Thumbnail

# [Electron #1] Building a Timer App with Electron + React (With Zustand)

dakgangjung123

Claude Code Complete Mastery: From AI Development Workflow Basics to Practice (with Cursor AI)

gymcoding

Explore → Plan → Implement → Commit. Master the proven AI development workflow with Claude Code. Learn through 23 missions covering MCP, sub-agents, and prompt engineering, and complete 3 real-world projects.

Beginner

Beginner

React, Next.js, cursor

Claude Code Complete Mastery: From AI Development Workflow Basics to Practice (with Cursor AI)

gymcoding

Practical React Native for iOS/Android App Development - BasicCourse Thumbnail

Practical React Native for iOS/Android App Development - Basic

Wintho

The goal is to acquire basic knowledge of React Native for mobile app front-end development. This course is designed to enable non-experts to easily develop native mobile apps by utilizing languages/APIs with low entry barriers.

Basic

Basic

React Native, React, ES6

Practical React Native for iOS/Android App Development - BasicCourse Thumbnail

Practical React Native for iOS/Android App Development - Basic

Wintho

Learning Web Development Concepts and Vibe Coding from Zero BaseCourse Thumbnail

Learning Web Development Concepts and Vibe Coding from Zero Base

jeyong

In the era of swift execution and validation, execute faster than anyone with VIBE Coding! Achieve complete monetization, from ads to payments, all by yourself.

Beginner

Beginner

React, Web Application, Next.js

Learning Web Development Concepts and Vibe Coding from Zero BaseCourse Thumbnail

Learning Web Development Concepts and Vibe Coding from Zero Base

jeyong

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API ArchitectureCourse Thumbnail

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

A Complete End-to-End Developer Journey — Build Lightning-Fast APIs, Modern Frontend Interfaces, Real Projects, Authentication Systems, Dashboards & Full Deployments Using FastAPI, React, and Vibe Coding Techniques.

Beginner

Beginner

React, React Native, react.js

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API ArchitectureCourse Thumbnail

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

[PROKIT] Frontend Project Kit: Building a Timer AppCourse Thumbnail

[PROKIT] Frontend Project Kit: Building a Timer App

nybs

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 🚀

Beginner

Beginner

React

[PROKIT] Frontend Project Kit: Building a Timer AppCourse Thumbnail

[PROKIT] Frontend Project Kit: Building a Timer App

nybs

Building Your Own Emotional Diary Service with SpringAI + ReactCourse Thumbnail

Building Your Own Emotional Diary Service with SpringAI + React

Neo

Building Your Own Emotional Diary Service with SpringAI + React This is the 4th project time creating together with Neo + Essential!

Basic

Basic

React, Kotlin, Spring Boot

Building Your Own Emotional Diary Service with SpringAI + ReactCourse Thumbnail

Building Your Own Emotional Diary Service with SpringAI + React

Neo

React Native with Expo: Learning Properly from ZeroChoCourse Thumbnail

React Native with Expo: Learning Properly from ZeroCho

zerocho

Web developers (especially React developers) can now truly easily launch apps. With Expo, you can launch both Android and iOS apps even faster. Let's become a developer who can quickly launch apps with Expo.

Basic

Basic

React, React Native, Hybrid App

React Native with Expo: Learning Properly from ZeroChoCourse Thumbnail

React Native with Expo: Learning Properly from ZeroCho

zerocho

Hybrid App with Expo Framework to Increase Web Developer's SalaryCourse Thumbnail

Hybrid App with Expo Framework to Increase Web Developer's Salary

codecamp

This course will help you develop mobile apps that can be serviced on Android and iOS using web development.

Basic

Basic

React, Next.js, expo

Hybrid App with Expo Framework to Increase Web Developer's SalaryCourse Thumbnail

Hybrid App with Expo Framework to Increase Web Developer's Salary

codecamp

[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail

[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

codecamp

Throw away those simple services you can make with vibe coding in just 10 minutes! You can learn 'real' practical vibe coding. Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP. No Code, Only Prompt

Intermediate

Intermediate

React, Next.js, cursor

[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail

[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

codecamp

Next.js Full Course to Dip In (English Audio & Korean Subtitles)Course Thumbnail

Next.js Full Course to Dip In (English Audio & Korean Subtitles)

ludgi

A full course of hands-on Next.js! Complete a real-world project with the latest technologies such as GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, and Grafana, and experience both the App Router and Page Router.

Intermediate

Intermediate

Next.js, React, GraphQL

Next.js Full Course to Dip In (English Audio & Korean Subtitles)Course Thumbnail

Next.js Full Course to Dip In (English Audio & Korean Subtitles)

ludgi