강의

N
챌린지

멘토링

N
클립

커뮤니티

NEW
Programming

/

Web Development

Properly Learning React: Mastering the Essence of Rendering and Declarative UI through Missions [Part 1 – Fundamentals]

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 handle React." In every section, you'll complete missions alongside the lectures, solve practice problems directly, and learn by implementing core concepts like JSX, Virtual DOM, State, and useEffect with your own hands. When you complete the course, you won't just be a beginner who knows React syntax, but a developer who can explain and utilize everything from component design to rendering flow on your own. "Not just a class you listen to, but learning you build to completion." Understand the essence of React and experience the world of declarative UI firsthand.

(5.0) 2 reviews

54 learners

  • nhcodingstudio
실습 중심
미션기반
프론트엔드기초
HTML/CSS
JavaScript
React
Web Application
frontend

What you will gain after the course

  • Structurally understand the role React performs on top of the browser's rendering engine.

  • It shifts from the mindset of "directly manipulating the DOM" to "declaring the UI."

  • You can clearly explain the flow of "Rendering = Data(State) → Screen(UI)" through both code and concepts.

  • Learn the process of how JSX is transformed into React.createElement() through Babel with visual examples.

  • You can break down the UI into small units, pass data through props, and design a modular structure.

  • You can explain the principles of why, when, and how the screen is redrawn when state changes.

  • Ensures predictable rendering through patterns of copying and updating objects or arrays.

  • Understand the reasons why multiple state changes are batched together and React's rendering scheduling approach.

  • Practice the pattern of safely retrieving the previous state (prev) to calculate a new state.

  • Clearly recognize the boundary between data given by parents (props) and data that changes internally (state).

  • Learn React's principle of "data flows from top to bottom" in a structured way.

  • Understand the specific diffing rules of Virtual DOM and component reuse conditions.

  • Analyzes the rendering process that occurs when changing state within event handlers, with examples.

  • React's Core Philosophy: Mastering Unidirectional, Declarative, Component-Based Approach

  • You can create reusable components through children, props drilling, and destructuring.

  • Implement interactive UI that responds to user input or button clicks.

  • Visualizes the step-by-step process of how React calculates the Virtual DOM and reflects it to the actual DOM.

  • You naturally acquire the mindset of connecting data and UI instead of using DOM commands.

  • You can track and explain why this part was re-rendered again by yourself.

  • Through hands-on practice and missions in each section, you'll experience the "essence of rendering" firsthand and develop genuine React thinking.

🎓Learn React Properly: Completing Declarative UI with Missions [Basics]

React is a rendering engine that completely redefined "how data changes translate to the screen."

This course is not about React's surface appearance but its essence,
that is, the principles of rendering and the mindset of declarative UI, a complete beginner's guide that teaches you step by step from the beginning.

Many beginners start with React by learning JSX or useState syntax first,
but this course starts from "why did these syntaxes come to exist?"
HTML→DOM→ Virtual DOM → React rendering structure, perfectly connecting the big flow,
and you'll master how React draws the screen, why it re-renders when state changes,
by seeing and practicing all these processes with your own eyes.

🧱 Core Philosophy of Course Structure

📌 "Understand the structure rather than memorizing code."
→ Learn how JSX, props, and state work through principles, not just syntax.
📌 "Rendering is not magic, but a flow."
→ The process of state change → Virtual DOM → actual screen update can be felt at your fingertips.
📌 "Train declarative thinking."
→ Move away from imperative patterns centered on DOM manipulation and learn React's declarative mindset through hands-on practice.
📌 "Hands-on Mission-Based Learning"
→ Each section includes missions where you write code directly and verify the results visually.

✨ Features of This Course

  1. The only introductory course to visually understand the 'essence of rendering'
    → Directly visualizes the process of React comparing the Virtual DOM and reflecting it to the actual DOM.

  2. Step-by-step connection from JSX, createElement, to Virtual DOM
    → Rather than simply using JSX syntax, you'll understand at the code level what function calls happen internally.

  3. The complete connection between state, props, events, and rendering
    → You'll be able to accurately explain "why the screen changes when you click a button."

  4. Training to shift thinking from imperative to declarative
    → Practice React-style thinking centered on "what to display."

  5. Hands-on learning from immutability to batch updates
    → Directly observe how rendering optimization works during state changes through DevTools.

  6. Structural thinking training, not just simple coding practice
    → Designed to help you understand "React's entire rendering flow" beyond just a single line of code.

  7. All lectures are linked with practical missions
    → Through section-based missions, you will "directly verify understood concepts with code."

  8. 'Principle-based' foundational design that lasts once learned
    → Rather than simple copying, you'll develop the ability to apply React in any situation based on understanding React's operating principles.This becomes the foundation for CRP optimization).

1️⃣ Why React emerged:Understand the necessity of declarative UI by examining the limitations of existing approaches.

2️⃣ Visualizing DOM and Rendering Structure: Learn the principles of how screens are created and updated.

3️⃣ Establishing Component-Based Thinking: Learn structural thinking that divides screens into smaller parts and reuses them.

5️⃣ Complete Mastery of the Essence of Rendering: Master the process of how React redraws the screen by tracking it with DevTools.

4️⃣ Understanding the Connection Between Events and State: Directly experiment with how clicks cause screen changes.

6️⃣ Imperative → Declarative Mindset Shift: Training in React-style thinking that declares 'what' to render.

7️⃣ Principles of Immutability and Data Flow: Design the structure so that screen updates are predictable when state changes occur.

8️⃣ Complete Styling Process Learning: Learn strategic approaches by comparing Vanilla CSS, Modules, and CSS-in-JS for the right situations.

9️⃣ Separation of Design Tokens, Logic, and Views (SoC): Learn the sense of scaling to a structured project architecture

🔟Complete mastery through practical missions: Experience React's flow at your fingertips by directly implementing UI elements like buttons, themes, and icons.

For those who know HTML·CSS but are curious about "why" the screen changes

React users who have heard of it but don't know how to get started


React users who want to visually confirm the real principles behind how React re-renders the screen

Those who want to know what DOM is and how JavaScript moves the screen

I understand the concept, but when I try to implement it directly in code, I get stuck


React beginners who want to logically organize the fundamentals

Those who are hearing terms like rendering and state for the first time or are still confused about them


Those who want to break away from imperative coding methods and shift to more efficient thinking


"I want to properly learn React all the way through at least once" - for those who have this feeling

After taking the course

  • You can directly explain "why the screen changes like this."

  • You will understand how HTML, CSS, and JS work together to create UI.

  • You will completely master the rendering principles that update the screen with a single button click.

  • We implement the state concept directly in code and visually confirm the flow of changes.

  • The immutability mindset of "copying and replacing data instead of directly modifying it" naturally becomes ingrained in your thinking.

  • You will come to understand for yourself why event handling and flow control (onClick, onChange, etc.) are important.

  • I accurately understand the reason for Strict Mode where React renders twice to check for purity.

  • Learn to safely handle object and array states while developing predictable code writing habits.

  • Learn modern styling strategies by comparing Vanilla CSS, Modules, and styled-components.

  • You will develop the ability to logically trace "why the screen changes this way" for every line of code.

🎯 React Part 1 – Mission Summary Table

🟩 React Event Handling Practice — Outputting the Name and Index of Clicked List Items
This is the first step in experiencing React's event system.
When each item is clicked, it outputs the name and index of which item was selected,
helping you understand how the onClick event handler works.
You'll directly experience the principle of how JS function calls connect with React's event objects.

🟥 Experience the Power of State in React — Update Screen Numbers with Button Clicks
You'll realize that React is not just a simple screen library, but a "state-based rendering engine."
When you click a button, numbers automatically update, and you'll learn how useState connects to rendering.
You'll understand React's core philosophy that UI is "the result of data."

🟧 Event and State Integration Practice — Changing Toggle State with Clicks
Combine events and state to create an interactive UI that switches ON/OFF with each click.
Learn the structure where a single state variable changes the entire UI,
and get hands-on experience with the flow where rendering occurs again when setState is called.

🟪 Pure Component Practice — Maintaining Same Input → Same Output Without External Variables
We'll confirm through practice that the essence of React components is being "pure functions."
We'll improve code to ensure that the same screen is always output when the same props come in, without depending on external variables.
We emphasize the importance of predictable component structure.

🟦 Just changed the city but the screen doesn't update? — Safely updating nested object state with 'copying'
Learn through practical examples that React's state uses shallow comparison (reference value comparison).
Experience through code that to modify only part of an object's interior, you must create a new object through copying.
This is a core practice session that builds the fundamentals of immutability.

🟩 I added a to-do but the screen doesn't change! — Three techniques for maintaining immutability in array updates
When updating array state, use functions that return new arrays like concat, filter, map instead of push.
Learn clearly why React fails to detect changes
and why maintaining immutability causes the screen to update immediately.

🟪 Why didn't the screen change when the name was updated? — Safely updating nested objects in arrays
This covers advanced state updates when objects are nested inside arrays.
Learn the pattern of using map to find specific objects, copy them, and then modify them,
and gain a deep understanding of how React re-renders only when references change.

🟧 Apply Coupons All at Once! — Batch Update Multiple Items That Meet Conditions with Immutability
We'll cover the "update multiple items simultaneously" pattern that frequently appears in real-world development.
By combining map with conditional statements, we'll modify only items that meet specific conditions,
and visually confirm how React rendering is reflected across the entire array.

🟫 The Secret to Sibling Components Communicating — Lifting State Up to Parent for Synchronization
Implement a structure where two sibling components share the same state.
Learn the concept of "Lifting State Up" and
understand that data flow is unidirectional while experiencing the importance of props passing.

🟥 React directly manages values! — Controlling single inputs with controlled components
Practice the principle where values in input forms are not stored directly in the DOM, but React state "manages them instead."
Understand the connection structure between value and onChange,
and confirm that form inputs become completely predictable through controlled components.

🟧 Creating a Sign-up Form — Managing Multiple Inputs with Object State
As forms grow larger, managing each input value individually becomes difficult.
{ name, email, password } Learn the pattern of bundling them into an object state
and updating with setState({ ...prev, [key]: value }) for each input change.

🟪 My Preference Settings Form — Making Select·Checkbox·Radio All Controlled Components
Connect all various input types in forms to React state and manage them as a "single source of truth."
Clearly master the concept that React directly controls values instead of browser default behavior.

🟦 Completing the Registration Form — Implementing Submission Flow and Validation
We'll complete the flow that validates form input values and shows error messages when conditions aren't met during submission.
We'll comprehensively cover onSubmit events, preventDefault(), and simple validation logic.
This is a practical assignment where you'll directly design "state-based form logic" with React.

🟩 Dark Mode Toggle — Synchronizing body class with useEffect(…, [dark])
Use useEffect's dependency array to synchronize external environment (DOM) with React state.
Automatically update body.classList whenever the state value changes
to learn a structure where React controls even the actual HTML state.

🟦 Sending HTTP Requests with useEffect (JSONPlaceholder Practice)
Experience the actual API call flow and learn that useEffect is a "side effect that runs after rendering."
Implement the basic pattern of loading data with fetch/axios and managing loading, success, and error states.

🟩 Dark Mode Toggle — Synchronizing body class with useEffect(…, [dark])
Use the dependency array of useEffect to synchronize external environment (DOM) with React state.
Automatically update body.classList whenever the state value changes
to learn a structure where React controls even the actual HTML state.

🟦 Sending HTTP Requests with useEffect (JSONPlaceholder Practice)
Experience the actual API call flow and learn that useEffect is a "side effect that runs after rendering."
Implement the basic pattern of fetching data with fetch/axios and managing loading, success, and error states.

🟩 Mission X — Request Cancellation & Advanced Error Handling + axios Instance Practical Patterns
When components disappear during API calls or rapid consecutive requests come in
Learn practical patterns for safely canceling requests using AbortController and axios cancel tokens.
Also learn how to apply common error handling logic to axios instances to reduce duplication.

🟩 Mission Y — Creating a Reusable Data Fetching Hook: useFetchProducts
Abstract the asynchronous processing patterns learned so far into a custom hook (useFetch).
Create a structure that integrates data loading, errors, and result values management, and can be easily reused in any component.
Experience production-level React code reusability and scalability.

Pre-enrollment Reference Information

Practice Environment

💻 If Node.js (v18 or higher) is installed, you can practice directly in your local environment
🌐 You can also practice using just a browser on CodeSandbox and similar platforms
🪶 Basic knowledge of HTML·CSS·JS syntax is sufficient (complete beginners are also OK)
🧩 Every section is structured in the order of "Concept → Visualization → Practice → Mission"
📘 All lecture PDF learning materials provided (including concept summaries + mission explanations)
🧠 Focus on "directly executing and observing results" rather than theory
🧰 Includes examples based on Visual Studio Code / Vite
⚡️ Explains React's "operating principles" rather than just its "appearance"

📘 Learning Materials

  • 🧾 Lecture PDF Materials

    • Summary of Key Concepts by Section

    • JSX, state, useEffect, rendering flow and other step-by-step visual materials

    • Code snippets + commentary explanations + DevTools screenshots included

    • Includes review mini-quizzes and "Key Summary Checklist"

  • 💻 Example Project Code (ZIP)

    • Section 1~10 Complete Examples + Answer Code for Each Mission

    • Organized by structure with annotations, optimized for practice review

  • 🧩 Additional Practice Mission PDF

    • Bonus assignments where you can immediately apply the concepts from each section

    • DOM Structure, Render Tree, and Event Flow Observation Practice Problems Included

Recommended for
these people

Who is this course right for?

  • Beginner developers learning React for the first time

  • Frontend beginner who has only worked with HTML/CSS/JS

  • Someone with existing React experience but unclear concepts

  • People who want to develop their component design sense

  • People who want to logically understand React's internal working principles

  • Backend/Full-stack developer looking to transition to a frontend career

  • Someone who thought JSX syntax was just a simple HTML extension

  • React Hooks (useState/useEffect) prospective learner preparing for study

  • People who have experienced 'rendering loops' or 'state tangling' while working on React projects

  • People who want to 'design' React, not just simply use it

  • A person who aims to build a design system

  • Someone who wants to view React as a "rendering engine" rather than a "library"

  • Someone who wants to build structural understanding while debugging React code

  • People who want to clearly understand the relationship between useState, props, and rendering timing

  • People who want to broaden their understanding of component-based UI frameworks in general (Vue, Svelte, etc.)

  • College students and non-majors learning React

  • Existing frontend developers who want to clearly articulate the "React philosophy"

  • Aspiring developers preparing for interviews or building portfolios

  • A person learning frontend architecture for the first time

Need to know before starting?

  • Basic Understanding of HTML and DOM Structure

  • Basic CSS writing skills

  • JavaScript Basics

Hello
This is

441

Learners

28

Reviews

10

Answers

4.7

Rating

12

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

102 lectures ∙ (4hr 16min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • Su Yeoun Lee님의 프로필 이미지
    Su Yeoun Lee

    Reviews 21

    ∙

    Average Rating 5.0

    5

    71% enrolled

    정의를 명확히 설명을 해주어서 개념을 이해시켜줍니다. 특히 설명에 군더더기가 없어 시간 낭비가 없습니다. 그리고 각 세션의 끝에 [필독]을 두어 한번 더 리마인드할 수 있게 정리해주는 것도 좋았습니다. 강의를 듣다 보면 느껴지는게 강사님이 가르치는데 진심이다는 것이 느껴집니다. 리엑트를 배우려는 분들께 강추합니다. 후회는 없을 겁니다.

    • nhcodingstudio님의 프로필 이미지
      nhcodingstudio

      Reviews 1

      ∙

      Average Rating 5.0

      5

      85% enrolled

      Limited time deal

      $19,360.00

      60%

      $37.40

      nhcodingstudio's other courses

      Check out other courses by the instructor!

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

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

      nhcodingstudio

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

      초급

      초급

      HTML/CSS, JavaScript, React

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

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

      nhcodingstudio

      Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

      Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

      nhcodingstudio

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

      초급

      초급

      JavaScript, Node.js, Express

      Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

      Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

      nhcodingstudio

      Vanilla JavaScript로 직접 구현하는 Notion강의 썸네일

      Vanilla JavaScript로 직접 구현하는 Notion

      nhcodingstudio

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

      초급

      초급

      JavaScript, React, 웹앱

      Vanilla JavaScript로 직접 구현하는 Notion강의 썸네일

      Vanilla JavaScript로 직접 구현하는 Notion

      nhcodingstudio

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

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

      nhcodingstudio

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

      입문

      입문

      HTML/CSS, JavaScript, React

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

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

      nhcodingstudio

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

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

      nhcodingstudio

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

      초급

      초급

      express.js, Node.js, routing

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

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

      nhcodingstudio

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

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

      nhcodingstudio

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

      초급

      초급

      HTML/CSS

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

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

      nhcodingstudio

      Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

      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.

      초급

      초급

      JavaScript, Node.js, Express

      Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

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

      nhcodingstudio

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

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

      nhcodingstudio

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

      초급

      초급

      HTML/CSS, JavaScript, React

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

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

      nhcodingstudio

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

      nhcodingstudio

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

      초급

      초급

      JavaScript, HTML/CSS, 객체지향

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

      nhcodingstudio

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

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

      nhcodingstudio

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

      입문

      입문

      JavaScript, HTML/CSS, 웹앱

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

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

      nhcodingstudio

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

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

      nhcodingstudio

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

      입문

      입문

      HTML/CSS

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

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

      nhcodingstudio

      Similar courses

      Explore other courses in the same field!

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

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

      nhcodingstudio

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

      입문

      입문

      HTML/CSS, JavaScript, React

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

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

      nhcodingstudio

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

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

      nhcodingstudio

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

      초급

      초급

      HTML/CSS, JavaScript, React

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

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

      nhcodingstudio

      Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

      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.

      초급

      초급

      JavaScript, Node.js, Express

      Building a Server Framework from Scratch: Cloning the Express.js Engine강의 썸네일

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

      nhcodingstudio

      백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편강의 썸네일

      백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

      이준형(Foo)

      백엔드 개발자로 포트폴리오를 만들었지만 보여줄 게 API밖에 없는 취준생들에게 프론트엔드를 더해 하나의 웹 서비스로 만들 수 있는 경험을 제공해드리겠습니다.

      초급

      초급

      HTML/CSS, JavaScript, Bootstrap

      백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편강의 썸네일

      백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

      이준형(Foo)

      React 비기너: 튼튼한 기본 만들기강의 썸네일

      React 비기너: 튼튼한 기본 만들기

      김영보

      React 기본을 배울 수 있습니다. React와 관련된 HTML, JavaScript, DOM, Event, Object, Module, OOP 등을 정리할 수 있습니다.

      초급

      초급

      React, JavaScript, DOM

      React 비기너: 튼튼한 기본 만들기강의 썸네일

      React 비기너: 튼튼한 기본 만들기

      김영보

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

      Jiwoon Jeong

      내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

      초급

      초급

      HTML/CSS, JavaScript, REST API

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지강의 썸네일

      비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

      Jiwoon Jeong

      Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼강의 썸네일

      Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

      닭강정

      🔥 한자 학습을 위한 맞춤형 플랫폼 구축! Google Gemini AI와 Firestore를 활용해 나만의 한자 단어장, 획순 애니메이션, 필기 인식까지 직접 구현해보세요!

      초급

      초급

      gemini, HTML/CSS, TailwindCSS

      Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼강의 썸네일

      Firebase 시리즈 #2: AI 한자 추천 & 필기 학습 플랫폼

      닭강정

      누구보다 빠르게 해보는 ChatGPT 클론코딩강의 썸네일

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

      Neo

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

      초급

      초급

      JavaScript, React, Java

      누구보다 빠르게 해보는 ChatGPT 클론코딩강의 썸네일

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

      Neo

      자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.2강의 썸네일

      자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.2

      유용한IT학습

      이론과 실습을 통해 자바스크립트를 익힐 수 있는 강의입니다. 자바스크립트에 어느 정도 익숙해진 분들을 위한 강의입니다. Part 2은 자바스크립트의 추상화, 캡슐화, 상속, 다형성을 다루고 있습니다.

      중급이상

      중급이상

      JavaScript, jQuery

      자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.2강의 썸네일

      자바스크립트+jQuery 기초부터 실무까지 : 고급 Part.2

      유용한IT학습

      ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.2강의 썸네일

      ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.2

      유용한IT학습

      자바스크립트 프로그래밍 언어를 최신의 ES6 문법과 함께 학습하도록 기획된 과정입니다.

      중급이상

      중급이상

      JavaScript, ES6

      ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.2강의 썸네일

      ES6 문법과 함께하는 모던 Javascript(자바스크립트) 고급 Part.2

      유용한IT학습

      Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

      Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

      nhcodingstudio

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

      초급

      초급

      JavaScript, Node.js, Express

      Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계강의 썸네일

      Node.js 서버 엔진 만들기 – Express.js 클론으로 배우는 프레임워크 설계

      nhcodingstudio

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

      nhcodingstudio

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

      초급

      초급

      JavaScript, HTML/CSS, 객체지향

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일

      제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

      nhcodingstudio

      Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture강의 썸네일

      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.

      입문

      입문

      React, React Native, react.js

      Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture강의 썸네일

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

      IT s Dev

      iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

      iOS/Android 앱 개발을 위한 실전 React Native - Basic

      Wintho

      Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

      초급

      초급

      React Native, React, ES6

      iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

      iOS/Android 앱 개발을 위한 실전 React Native - Basic

      Wintho

      제로베이스부터 배우는 웹개발의 개념과 바이브 코딩강의 썸네일

      제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

      신제용

      빠른 실행과 검증의 시대, 바이브 코딩으로 누구보다 빠르게 실행하세요! 광고, 결제 등 수익화까지 빼놓지 않고 내 손으로 이루어 보세요.

      입문

      입문

      React, 웹앱, Next.js

      제로베이스부터 배우는 웹개발의 개념과 바이브 코딩강의 썸네일

      제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

      신제용

      풀면서 배우는 정보처리산업기사 과정평가형 실기 완벽정리강의 썸네일

      풀면서 배우는 정보처리산업기사 과정평가형 실기 완벽정리

      Neo

      풀면서 배우는 정보처리산업기사 정보처리산업기사 과정평가형 실기 합격을 위해 모든것을 준비했습니다.

      입문

      입문

      HTML/CSS, Java, SQL

      풀면서 배우는 정보처리산업기사 과정평가형 실기 완벽정리강의 썸네일

      풀면서 배우는 정보처리산업기사 과정평가형 실기 완벽정리

      Neo

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

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

      코딩도니

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

      초급

      초급

      React, Java, AWS

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

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

      코딩도니

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

      영코디 킴쌤

      디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지를 만들기 위해 부트스트랩을 활용하는 방법에 대한 강의[개정판] 입니다.

      초급

      초급

      Bootstrap, 반응형 웹, 웹 디자인

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일

      부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프

      영코디 킴쌤

      React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

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

      제로초(조현영)

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

      초급

      초급

      React, React Native, 하이브리드 앱

      React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

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

      제로초(조현영)

      [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일

      [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

      닭강정

      React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

      초급

      초급

      React, Electron, GUI

      [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일

      [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

      닭강정