강의

N
챌린지

멘토링

N
클립

로드맵

개발 · 프로그래밍

/

프론트엔드

React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처

실무는 가혹합니다. 수만 개의 실시간 데이터가 쏟아지는 극한의 환경에서도 부드러운 사용자 경험을 설계하는 저의 최적화 정수를 치밀한 미션 시스템을 통해 완벽하게 전수해 드립니다. 단순히 코드를 짜는 사람을 넘어, 엔진의 원리로 성능을 집도하는 대체 불가능한 시니어 엔지니어로 도약해 보세요.

(5.0) 수강평 7개

수강생 245명

난이도 초급

수강기한 무제한

실습 중심
실습 중심
React
React
실습 중심
실습 중심
React
React
NHN
잉카인터넷
GS리테일
사람인
삼성

삼성

임직원들도 이 강의를 듣고 있어요!

NHN
잉카인터넷
GS리테일
사람인
삼성

삼성

임직원들도 이 강의를 듣고 있어요!

먼저 경험한 수강생들의 후기

5.0

5.0

asam0707

60% 수강 후 작성

실습 가이드가 잘 정리되어 싶게 복습할 수 있어요

5.0

icoon22

100% 수강 후 작성

자유도가 높은 기술에서는 기능에 대한 개념을 이해하고 선택적 사용이 중요한데 이런 측면에서 단계별로 다양한 시각과 선택 기준 그리고 장/단점을 알 수 있어서 좋았습니다. 강의 자료와 강사님의 설명이 불필요한 설명없이 보고, 듣기 좋았습니다. 다음 강좌도 기대 합니다.

5.0

오세진

31% 수강 후 작성

개념과 원리를 설명해줘서 점점 확장해가는 수업방식이 너무 좋습니다.

수강 후 이런걸 얻을 수 있어요

  • 수만 개의 실시간 데이터가 쏟아져도 60프레임의 부드러움을 유지하는 고성능 앱을 완성하게 됩니다.

  • 무거운 연산이 실행되는 도중에도 사용자의 클릭과 입력에 즉각 반응하는 하이엔드 인터페이스를 구현합니다.

  • 단순한 감이 아니라 렌더링 비용을 치밀하게 계산하여 최적화 포인트를 정확히 짚어내는 안목을 갖게 됩니다.

  • 팝업이나 메뉴가 나타날 때 발생하는 미세한 번쩍임과 레이아웃 흔들림을 완벽하게 제거할 수 있습니다.

  • 서버와 클라이언트 사이의 데이터 불일치 문제를 뿌리 뽑아 서비스의 안정성을 실무 최고 수준으로 끌어올립니다.

  • 대규모 기업용 서비스에 즉시 적용 가능한 수준 높은 데이터 파이프라인 설계법을 완벽히 익힙니다.

  • 예기치 못한 에러가 발생해도 서비스 전체가 멈추지 않도록 우아하게 격리하고 복구하는 시스템을 만듭니다.

  • 리액트 엔진의 작동 원리를 바탕으로 성능 병목 구간을 논리적으로 추적하고 해결하는 실전 실력을 얻습니다.

  • 수만 개 항목 중 원하는 결과를 0.1초 만에 찾아주는 지능형 검색 및 필터링 시스템을 직접 구축합니다.

  • 주니어 수준을 압도하는 글로벌 관제 대시보드급의 고난도 프로젝트 결과물을 포트폴리오에 담게 됩니다.

  • 단순히 기능을 구현하는 단계를 넘어 시스템 전체의 퍼포먼스를 책임지는 엔지니어의 사고방식을 갖춥니다.

  • 브라우저가 화면을 그리는 찰나의 시간을 지배하여 사용자 경험의 디테일을 완성하는 고급 기술을 가집니다.

  • 서버 사이드 렌더링 환경에서도 깨지지 않는 견고한 컴포넌트 정체성 부여 전략을 실무에 적용하게 됩니다.

  • 최신 리액트 라우터 아키텍처를 활용해 복잡한 페이지 간의 데이터 흐름을 선언적으로 완벽히 통제합니다.

  • 데이터 로딩과 서버 상태 동기화가 유기적으로 맞물려 돌아가는 엔터프라이즈급 시스템을 완성합니다.

  • 현업에서 마주하는 가장 가혹하고 까다로운 성능 문제들을 기술적으로 정면 돌파하는 강한 자신감을 얻습니다.

  • 메모리 사용량과 연산 비용 사이의 전략적 선택을 통해 최적의 실행 효율을 뽑아내는 설계 역량을 키웁니다.

  • 실제 시니어 개발자가 겪는 지독한 실무 시나리오를 미션으로 해결하며 실전 감각을 극한으로 끌어올립니다.

  • 사소한 디테일의 차이가 만드는 명품 UI와 일반 UI의 간극을 기술적 완성도로 메우는 법을 배웁니다.

  • 강의가 끝나면 리액트의 정점에서 서비스를 리드할 수 있는 압도적인 기술적 경쟁력을 확보하게 됩니다.


🎓React 마스터 클래스: Part 2 미션으로 완성하는 고성능 훅과 실전 아키텍처

React의 기초를 넘어선 단계는 단순히 화면을 '그리는 것'이 아니라, 데이터가 흐르는 '엔진의 성능과 구조'를 설계하는 것입니다.

이 강의는 React의 보닛을 열고 내부 렌더링 엔진을 튜닝하는 하이엔드 엔지니어링 클래스입니다.

많은 개발자가 성능 최적화나 복잡한 상태 관리를 마주할 때 막연한 추측으로 코드를 작성하지만,

이 강의는 “왜 이 훅이 탄생했는가”라는 공학적 질문에서 출발합니다.

참조 동일성 → 렌더링 폭발 반경 → 동시성 렌더링 → 데이터 로더로 이어지는 고급 아키텍처를 완벽히 정복하며, 0.1초의 렉도 허용하지 않는 성능 최적화와 대규모 프로젝트에서도 흔들리지 않는 전역 상태 엔진을 37개의 실무 미션을 통해 손끝으로 체득합니다.

🧱 강의 구성의 핵심 철학

📌 “비즈니스 로직은 컴포넌트의 사생활이 아니다.”
→ useState로 파편화된 로직은 버그의 온상이 됩니다. 모든 상태 전이는 '리듀서(Reducer)'라는 독립된 두뇌에서 원자적(Atomic)으로 처리되어야 합니다. UI와 비즈니스 로직을 엄격히 분리하여, 화면 없이도 로직 그 자체로 완벽히 검증 가능한 '단일 진실 공급원(SSOT)' 아키텍처를 구축합니다.

📌 “짐작하지 말고 데이터로 증명하라.”
→ "느린 것 같다"는 주관적인 느낌을 버리고, 프로파일러(Profiler)를 통해 밀리초(ms) 단위의 객관적 지표로 소통합니다. 브라우저의 메인 스레드를 점유하는 범인을 데이터로 검거하고, 60fps의 부드러움을 유지하기 위한 '16ms의 법칙'을 사수하는 수술적 최적화 기법을 제시합니다.

📌 “구조적 설계가 훅(Hook)보다 강력하다.”
→ 성능 최적화 훅(useMemo, useCallback)은 만능 약이 아니며, 그 자체로 비용입니다. 훅을 투입하기 전, 상태 밀어내기(State Push-down)와 컴포넌트 합성(Composition)을 통해 '렌더링 폭발 반경(Render Blast Radius)'을 물리적으로 격리합니다. 아키텍처 체질 개선을 통해 훅 없이도 발생하는 '자동 베일아웃(Bail-out)'의 힘을 경험합니다.

📌 “멈추지 않는 사용자 경험, 중단 가능한 렌더링.”
→ 리액트 18의 동시성 모델(Concurrency)은 현대 웹의 게임 체인저입니다. 모든 작업을 '급한 일'로 취급하던 과거에서 벗어나, 무거운 연산을 백그라운드로 밀어내고 사용자의 입력을 최우선으로 응대하는 '우선순위 오케스트레이션'을 통해 어떤 상황에서도 얼어붙지 않는 하이엔드 인터페이스를 설계합니다.

📌 “0.1%의 시각적 결함이 브랜드의 급을 결정한다.”
→ 로직은 맞지만 화면이 미세하게 튀는 '레이아웃 시프트(Jank)'는 전문성을 해칩니다. 브라우저가 첫 픽셀을 찍기 전 찰나의 시간을 지배하는 useLayoutEffect와 서버-클라이언트의 정체성을 통합하는 useId 전략을 통해, 사용자에게 단 1프레임의 오차도 허용하지 않는 완벽한 시각적 연속성을 제공합니다.

📌 “URL은 가장 신뢰할 수 있는 전역 상태다.”
→ 새로고침하면 사라지는 메모리 속 데이터가 아닌, 브라우저 주소창에 박제된 'URL 기반 아키텍처'를 지향합니다. React Router v7의 데이터 로더를 활용해 렌더링 전 데이터를 선점(Pre-fetching)하고, 에러 바운더리로 장애를 격리하여 어떤 경로에서도 끊김 없이 이어지는 엔터프라이즈급 내비게이션을 구축합니다.

✨ 이 강의의 특징

  1. ‘렌더링 파이프라인’을 완벽히 통제하는 하이엔드 클래스
    → 브라우저 페인팅 전 단계를 장악하는 useLayoutEffect로 시각적 결함을 0ms로 줄입니다.

  2. 복잡한 비즈니스 로직을 ‘두뇌(Reducer)’로 분리
    → UI와 로직을 완벽히 캡슐화하여 유지보수가 쉬운 엔터프라이즈급 아키텍처를 구축합니다.

  3. 참조 동일성(Referential Equality)의 본질 정복
    → 자바스크립트 메모리 주소 원리를 파헤쳐 useCallback과 memo의 시너지를 극대화합니다.

  4. 다중 전역 상태 엔진 구축 전략
    → 인증, 테마, 업무 관리 등 여러 엔진이 조화롭게 공존하는 멀티 엔진 구조를 설계합니다.

  5. 리액트 18 동시성 모델 실전 적용
    → useTransition과 useDeferredValue로 데이터 폭주 속에서도 반응성을 사수합니다.

  6. React Router v7 기반의 현대적 내비게이션
    → 데이터 로더(Loader)를 통해 렌더링 전 데이터를 선점하는 프리페칭 기술을 마스터합니다.

  7. 37개의 고난도 실무 미션 연계
    → 주식 분석기, 1만 명 필터링, 보안 결제창 등 실제 현장의 난제를 코드로 해결합니다.

  8. 시니어의 골든 룰과 설계 철학 전수
    → 단순 코딩을 넘어 확장 가능한 시스템을 설계하는 아키텍트의 시야를 갖추게 됩니다.

1️⃣ 구조적 상태 관리 마스터: useReducer로 복잡한 비즈니스 규칙이 담긴 운영 매뉴얼을 설계합니다.

2️⃣ 전역 상태 엔진 아키텍처: Context API를 '전사 인트라넷'으로 활용해 Props Drilling을 영원히 종결합니다.

3️⃣ 실전 인증 및 보안 시스템: LOGIN_START부터 SUCCESS까지 이어지는 정교한 인증 회로를 구축합니다.

5️⃣ 참조 무결성과 베일아웃: 자바스크립트 주소값을 고정하여 불필요한 유령 렌더링을 원천 차단합니다.

4️⃣ 렌더링 비용과 메모이제이션: O(2^n) 연산을 O(n)으로 줄이는 비밀 장부 기술로 CPU 부하를 제거합니다.

6️⃣ 물리적 DOM 및 캡슐화: forwardRef와 useImperativeHandle로 자식의 자존심을 지키는 제어권을 행사합니다.

7️⃣ 비주얼 최적화의 정점: useLayoutEffect로 팝업 위치 보정 및 애니메이션 시작점을 픽셀 단위로 통제합니다.

8️⃣ SSR과 하이드레이션 전략: 서버와 클라이언트의 정체성을 통합하는 useId 고유 식별자 전략을 수립합니다.

9️⃣ 동시성 렌더링(Concurrency): 무거운 연산 중에도 사용자의 입력을 최우선으로 처리하는 멈추지 않는 UI를 만듭니다.


🔟 엔터프라이즈 내비게이션: React Router v7 데이터 로더와 보안 리다이렉트로 초고속 아키텍처를 완성합니다

단순 기능 구현을 넘어 "왜 내 앱이 느린지" 공학적으로 분석하고 싶은 분

React 18 동시성 모델과 Router v7의 최신 기능을 실무에 즉시 적용하고 싶은 분


0.1초의 시각적 결함도 허용하지 않는 하이엔드 UI를 목표로 하는 분

Props Drilling에 고통받으며 전역 상태의 올바른 아키텍처를 고민하는 분

브라우저의 렌더링 파이프라인(Render-Commit-Paint)을 장악하고 싶은 분


컴포넌트 간의 독립성을 지키면서도 필요한 제어권을 우아하게 주고받고 싶은 분

useMemo, useCallback을 쓰는데 왜 여전히 리렌더링이 발생하는지 의문인 분


대규모 프로젝트에서도 무너지지 않는 '확장 가능한 폴더 구조'를 배우고 싶은 분


"단순 코더"에서 "리액트 아키텍트"로 한 단계 도약하고 싶은 개발자

👥 이런 분들에게 추천합니다

  • 화면이 왜 버벅이는지 프로파일러 데이터로 즉시 지목하고 수술하고 싶은 분

  • 복잡한 비즈니스 로직을 리듀서로 분리하여 컴포넌트를 획기적으로 경량화하고 싶은 분

  • 메모리 주소값을 자유자재로 통제하여 리렌더링 폭주를 차단하고 싶은 분

  • 1만 개의 데이터 필터링 중에도 사용자의 타이핑이 끊기지 않는 동시성 UI를 설계하고 싶은 분

  • 팝업이나 툴팁이 엉뚱한 곳에 생겼다 점프하는 '시각적 결함'을 0ms로 해결하고 싶은 분

  • 인증, 테마, 데이터 엔진이 계층적으로 공존하는 멀티 엔진 시스템을 구축하고 싶은 분

  • 외부 라이브러리를 리액트의 원칙에 맞게 우아한 명령형 API로 포장하고 싶은 분

  • 단순 코딩이 아닌, 시스템 전체의 데이터 흐름과 우선순위를 설계하는 아키텍트가 되고 싶은 분

  • React Router v7의 데이터 로더를 활용해 '로딩 스피너 없는' 초고속 전환을 구현하고 싶은 분

  • 참조 무결성이 깨져 발생하는 '유령 렌더링'의 근본 원인을 자바스크립트 엔진 관점에서 파헤칠 분

  • 성능 최적화 훅(useMemo, useCallback)을 언제 쓰고 언제 멈춰야 하는지 명확한 기준을 세우고 싶은 분

  • SSR 환경에서 발생하는 하이드레이션 오류를 useId 전략으로 완벽히 방어하고 싶은 분

  • '오래된 클로저(Stale Closure)'로 인한 난해한 버그를 원리적으로 분석하고 검거하고 싶은 분

  • 훅을 쓰기 전, 구조적 최적화(상태 밀어내기, 합성)로 앱의 체질을 먼저 개선하고 싶은 분

  • 시니어 개발자의 코드 리뷰 기준을 배우고, 팀원들에게 공학적 근거로 최적화를 제안하고 싶은 분

🎓 수강 후에는

  • "화면이 왜 버벅이는지" 프로파일러 데이터를 근거로 논리적으로 설명하고 해결할 수 있습니다.

  • 상태 전이 시스템을 구축하여 복잡한 로직에서도 데이터 싱크가 깨지지 않는 앱을 만듭니다.

  • 참조 동일성의 원리를 이용해 대규모 리스트에서도 필요한 최소 단위만 렌더링시킵니다.

  • useTransition을 활용해 무거운 작업 중에도 사용자 입력을 0.1초 안에 처리합니다.

  • React Router v7의 Loader를 활용해 페이지 진입 전 데이터를 확보하는 하이엔드 UX를 구현합니다.

  • 에러 바운더리로 특정 장애가 앱 전체로 번지는 것을 막는 격리 설계가 가능해집니다.

  • useLayoutEffect를 통해 브라우저 페인팅 전 레이아웃을 보정하여 시각적 무결성을 사수합니다.

  • useImperativeHandle로 자식의 내부 DOM을 보호하면서 정교한 제어권만 부모에게 노출합니다.

  • useDeferredValue를 적용해 쏟아지는 데이터 폭주 속에서도 메인 스레드의 반응성을 유지합니다.

  • 함수형 업데이트 기법을 마스터하여 의존성 배열을 비우면서도 최신 상태를 안전하게 다룹니다.

  • 도메인별 엔진 분리를 통해 수만 줄의 코드 속에서도 유지보수가 쉬운 클린 아키텍처를 소유합니다.

  • useId 접미사 전략으로 대규모 폼(Form) 시스템의 웹 접근성과 식별자 고유성을 보장합니다.

  • 렌더링 폭발 반경(Render Blast Radius)을 계산하여 훅 없이도 성능을 지키는 설계를 수행합니다.

  • 고난도 12가지 훅을 적재적소에 조합하여 어떤 복잡한 요구사항도 리액트답게 해결합니다.

  • "단순 코더"의 한계를 넘어, 성능 데이터를 신뢰의 도구로 사용하는 "리액트 엔지니어"가 됩니다.

🎯 React Part 2 – 37개 핵심 미션 정리표

🟩 급식실 재고 관리 시스템 — useReducer 기초 비즈니스 규칙(재고 0 미만 방지)이 담긴 운영 매뉴얼을 설계합니다. UI와 로직을 완벽히 분리하여 상태 전이의 인과관계를 명확히 하는 법을 배웁니다.

🟥 데이터 페칭 엔진 구축 — FETCH Action Flow 인증 시스템의 흐름(START-SUCCESS-FAILURE)을 데이터 로딩에 이식합니다. 앱 전체의 데이터 싱크를 맞추는 중앙 집중식 데이터 통제 시스템을 만듭니다.

🟧 리렌더링 지옥 탈출 — State/Dispatch 채널 분리 10,000개의 상품 관리 시스템에서 특정 버튼만 다시 그리게 만드는 고난도 최적화입니다. Context를 이중으로 설계하여 명령 채널과 데이터 채널을 물리적으로 독립시킵니다.

🟪 상담 채팅룸 "냉동 데이터" 검거 — 의존성 배열의 함정 성능을 위해 박제한 함수가 과거 데이터에 갇히는 ‘Stale Closure’ 버그를 해결합니다. 최적화와 데이터 최신성 사이의 정교한 균형을 잡는 설계 근육을 키웁니다.


🟦 매직 서치 시스템 — 물리적 포커스 & useRef 통제 리액트의 선언적 한계를 넘어 실제 HTML 노드에 포커스를 주고 배경색을 조작합니다. 리렌더링을 유발하지 않는 '비밀 수첩'으로 통계 데이터까지 조용히 수집합니다.


🟩 환율 타임머신 — 리액트가 잊어버린 과거 추적 직전 환율과 현재 환율을 실시간으로 비교하여 ▲/▼ 신호를 분석합니다. 사라진 과거 상태를 추적하기 위해 Ref를 타임머신 기록 장치로 활용하는 정석을 배웁니다.


🟪 프리미엄 비디오 플레이어 — 고성능 트래킹 & 영역 밖 클릭 0.1초 단위의 재생 시간 기록을 렌더링 부하 없이 완벽하게 수행합니다. contains() API와 Ref를 결합해 모달/드롭다운 밖 클릭 시 자동으로 닫히는 UX를 완성합니다.


🟧 1만 명 사원 명부 "제로 렉" 필터링 — useMemo 실전 단순히 테마만 바꿨는데 1만 명을 다시 훑는 비효율을 useMemo 무풍지대로 해결합니다. 연산 결과에 영향을 주는 '순수 재료'만 골라내는 설계 능력을 기릅니다.


🟫 유령 렌더링 완전 소탕 — useCallback & memo 협력 부모(시계)가 변할 때 아무 죄 없는 자식(사원 카드)이 다시 그려지는 폭주를 막습니다. 열쇠(주소 고정)와 자물쇠(주소 검사)가 맞물리는 최적화 삼각 편대를 구축합니다.


🟥 보안 결제창 "비밀 통로" 설계 — useImperativeHandle 부모에게 자식의 모든 속살을 노출하는 대신, 허락된 '초기화' 버튼만 제공합니다. 캡슐화(Encapsulation)를 통해 컴포넌트 간의 독립성을 지키는 고급 기술을 익힙니다.


🟧 하이엔드 툴팁 시스템 — useLayoutEffect 시각적 결함 차단 툴팁이 엉뚱한 곳에 생겼다 제자리로 이동하는 '순간이동 현상'을 0ms로 해결합니다. 브라우저 페인팅 전 단계를 장악하여 사용자가 눈치채기 전 배치를 끝내는 비기를 배웁니다.


🟪 접근성 준수 아코디언 — useId 상호 참조 전략 aria-controls와 aria-labelledby를 1:1로 묶어 시각 장애인도 편리한 UI를 만듭니다. 접미사(Suffix) 전략을 활용해 수만 개의 ID 충돌을 완벽하게 방지합니다.


🟦 셰프의 물 한 잔 — useTransition 동시성 제어 무거운 요리(연산) 중에도 손님의 물 요청(입력)에 즉시 응답하는 구조를 설계합니다. startTransition으로 우선순위를 강등시켜 브라우저 블로킹 현상을 탈출합니다.


🟩 데이터 흐름의 서스펜션 — useDeferredValue 완급 조절 입력 속도를 따라가지 못하는 무거운 리스트에 '완충 장치'를 설치합니다. 사용자가 타이핑을 멈추는 찰나의 순간에 결과물을 몰아서 갱신하는 지능형 흐름을 완성합니다.


🟦 벨보이(Loader) 사전 주문 — Router v7 데이터 로더 식당에 도착해서 주문하는 것이 아니라, 출발할 때 이미 음식을 예약합니다. createBrowserRouter로 엔진을 교체하고, 이동 즉시 화면이 나타나는 전율을 경험합니다.

🟩 빌딩 방화셔터 설계 — Error Boundary & Redirect 특정 페이지의 장애가 앱 전체의 크래시로 번지지 않게 격리합니다. 미인증 사용자를 렌더링 전 단계에서 튕겨내는 방어적 라우팅 시스템을 구축합니다.

💻 수강 전 참고 사항

실습 환경

  • 💻 Node.js (v18 이상) 및 React 18+ 동시성 모델 환경 필수

  • 🌐 React DevTools (Profiler) 및 브라우저 성능 측정 도구 활용

  • 🪶 React 기초 문법(Part 1 수준) 및 JS ES6+

  • 🧩 모든 섹션은 “개념 → 엔진 분석 → 최적화 실습 → 하이엔드 미션” 순서

  • 📘 61강 전체 PDF 학습 가이드 및 아키텍처 도식화 자료 제공

  • 🧠 이론보다 “브라우저 파이프라인에 개입하는 과정”에 집중

  • 🧰 Vite / React Router v7 / React DevTools 기준 예제 포함

  • ⚡ React의 “보닛 속 엔진”을 직접 조종하는 원리 중심 설명


학습 자료

  • 🧾 고급 아키텍처 PDF 교재

    • 섹션별 성능 최적화 골든 룰 요약

    • 참조 무결성, 렌더링 폭발 반경 등 시각적 아키텍처 다이어그램

    • Profiler 불꽃 차트 해석 가이드 및 병목 지점 검거 체크리스트

    • 시니어 개발자의 "코드 리뷰 기준" 및 보안 설계 가이드 수록

  • 💻 전설의 마스터 코드 (ZIP)

    • Section 1~61 전체 예제 + 37개 고난도 미션 정답 코드

    • State/Dispatch 분리 및 데이터 로더 패턴이 적용된 완성형 소스


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 리액트의 기본 문법은 다 익혔지만, 실전에서 수천 개의 데이터가 들어오면 속수무책으로 느려지는 앱 때문에 자괴감을 느끼는 개발자

  • 로직은 완벽한데 화면이 찰나의 순간마다 번쩍거리거나 요소들이 튀어 오르는 '시각적 불쾌감'을 도저히 해결하지 못하고 있는 분

  • useMemo와 useCallback을 쓰고는 있지만, 정말 성능이 좋아지고 있는 건지 아니면 오히려 메모리만 낭비하고 있는 건지 확신이 없는 분

  • 서버 사이드 렌더링(SSR) 도입 후 끈질기게 따라다니는 'Hydration Error'와 'ID 불일치' 문제의 늪에서 허우적거리고 있는 분

  • 리액트 18, 19의 최신 기능을 쓰고 싶어도 실무 시나리오에 어떻게 적용해야 할지 몰라 공식 문서만 무한 반복해서 읽고 있는 개발자

  • 5만 개 이상의 행(Row)을 가진 복잡한 데이터 그리드나 관리자 대시보드를 구축해야 하는데, 렌더링 최적화의 첫 단추를 못 끼우고 있는 분

  • useEffect만으로 모든 이펙트를 처리하다가 무한 루프나 엉킨 레이아웃 측정 값 때문에 서비스 오픈 직전에 머리를 쥐어뜯고 있는 분

  • 0.1초의 입력 지연(Input Lag)이 사용자 이탈로 이어지는 고감도 커머스나 실시간 차트 서비스를 운영하며 피가 마르는 경험을 하고 있는 분

  • 리액트 라우터의 최신 버전(v7)을 사용해 엔터프라이즈급 아키텍처를 설계하고 싶지만, 튜토리얼 수준의 자료만 넘쳐나 답답함을 느끼는 분

  • 에러가 발생하면 앱 전체가 하얗게 죽어버리는 현상을 막고 싶어 'Error Boundary'를 도입하려 하나, 복구 전략을 어떻게 짤지 막막한 개발자

  • 스스로 '주니어'라는 타이틀을 떼고 싶지만, 기술적 깊이(Deep Dive)가 부족해 시니어와의 대화에서 늘 위축되는 성장의 정체기를 겪는 분

  • 최적화 도구를 활용해 병목 현상을 찾아내고 싶지만, 성능 측정 도구의 복잡한 그래프와 수치들을 해석하는 능력이 부족해 포기했던 분

  • 팀 내에서 리액트 기술 표준과 최적화 가이드를 제시해야 하는 위치에 있지만, 스스로 논리적 근거가 부족하다고 느껴지는 테크 리드

  • 면접이나 기술 인터뷰에서 "리액트 렌더링 최적화를 어떻게 하나요?"라는 질문에 useMemo 외에 더 깊이 있는 대답을 못 해 아쉬웠던 취준생

  • 단순한 게시판 구현을 넘어, 글로벌 물류 관제나 금융 시스템처럼 극한의 성능을 요구하는 '진짜 프로젝트'에 도전해보고 싶은 개발자

  • "코드가 돌아가면 끝"이라는 마인드에서 벗어나, 1ms의 실행 시간과 단 한 번의 불필요한 리렌더링까지 통제하고 싶은 완벽주의자

  • 복잡하게 얽힌 컴포넌트 구조 속에서 데이터 흐름이 어디서 꼬였는지 몰라 밤샘 디버깅을 반복하고 있는 데이터 모델링 초보자

  • 기존 프로젝트의 성능을 획기적으로 개선해야 하는 미션을 받았지만, 어디서부터 손을 대야 할지 가이드라인이 전혀 없는 리팩토링 담당자

  • 리액트의 동작 원리(Reconciliation, Fiber 등)는 이론으로 알지만, 이를 실제 코드로 구현해 성과를 낸 경험이 없는 이론형 개발자

  • 남들이 만든 라이브러리를 가져다 쓰기만 하는 수준을 넘어, 직접 하이엔드 훅을 설계하고 배포할 수 있는 '라이브러리 제작자'급 실력을 원하는 분

선수 지식,
필요할까요?

  • 리액트 기본기: 컴포넌트, Props, State의 개념을 알고 이를 활용할 수 있는 수준

  • 기본 훅 경험: useState, useEffect를 사용해 간단한 기능을 직접 만들어 본 경험

  • 자바스크립트 기초: ES6+ 문법과 비동기(async/await) 처리에 익숙하신 분

  • 개발 환경: Node.js가 설치되어 있고, 에디터와 터미널을 다루는 데 거부감이 없는 분

안녕하세요
nhcodingstudio입니다.

1,680

명

수강생

105

개

수강평

42

개

답변

4.8

점

강의 평점

18

개

강의

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

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

더보기

커리큘럼

전체

161개 ∙ (6시간 13분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

7개

5.0

7개의 수강평

  • 박진혁님의 프로필 이미지
    박진혁

    수강평 2

    ∙

    평균 평점 5.0

    5

    52% 수강 후 작성

    강의 좋아요. 인정.

    • nhcodingstudio
      지식공유자

      안녕하세요, 박진혁님. 지식공유자입니다. 우선 <React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처> 강의를 수강해 주시고, 소중한 수강평을 남겨주셔서 진심으로 감사드립니다. 박진혁님께서 남겨주신 "인정"한다는 간결하고도 강력한 칭찬 덕분에 정말 큰 보람과 힘을 얻습니다. Part 1에 이어 Part 2의 고성능 훅과 아키텍처 설계 내용까지 박진혁님의 실력 향상에 실질적인 도움이 된 것 같아 매우 기쁩니다. 이번 강의에서 다룬 깊이 있는 고민들이 실무에서도 빛을 발하기를 진심으로 바랍니다. 박진혁님의 열정적인 학습을 응원하는 마음을 담아 작은 혜택을 드리고자 합니다. 혹시 저희 교육 과정 중 추가적으로 수강을 희망하시는 강의가 있으시다면, 아래 이메일로 편하게 연락해 주십시오. 확인 후 즉시 할인 쿠폰을 전달해 드리겠습니다. 문의 이메일: jeony0535@naver.com 다시 한번 귀한 시간 내어 따뜻한 말씀 남겨주셔서 감사합니다. 박진혁님의 성장을 진심으로 응원하겠습니다 :D

  • icoon22님의 프로필 이미지
    icoon22

    수강평 9

    ∙

    평균 평점 5.0

    수정됨

    5

    100% 수강 후 작성

    자유도가 높은 기술에서는 기능에 대한 개념을 이해하고 선택적 사용이 중요한데 이런 측면에서 단계별로 다양한 시각과 선택 기준 그리고 장/단점을 알 수 있어서 좋았습니다. 강의 자료와 강사님의 설명이 불필요한 설명없이 보고, 듣기 좋았습니다. 다음 강좌도 기대 합니다.

    • nhcodingstudio
      지식공유자

      안녕하세요, icoon22님! 지식공유자입니다 :D 먼저 <React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처> 강의를 수강해 주시고, 이렇게 소중한 수강평까지 남겨주셔서 진심으로 감사드립니다. icoon22님께서 남겨주신 피드백은 저에게 정말 큰 힘이 됩니다. 이번 강의를 통해 학습하신 고성능 커스텀 훅의 활용과 실전적인 아키텍처 설계 방식들이 icoon22님의 프론트엔드 개발 역량을 한 단계 더 높이는 데 실질적인 도움이 되었기를 진심으로 바랍니다. 열정적으로 학습해주신 것에 감사하는 마음을 담아 작은 혜택을 드리고자 합니다. 혹시 저희 교육 과정 중 추가적으로 수강을 희망하시는 강의가 있으시다면, 아래 이메일로 편하게 연락해 주십시오. 확인 후 즉시 할인 쿠폰을 전달해 드리겠습니다. 문의 이메일: jeony0535@naver.com 다시 한번 귀한 시간 내어 따뜻한 말씀 남겨주셔서 감사합니다. icoon22님의 성장을 진심으로 응원하겠습니다! :D

  • 망고님의 프로필 이미지
    망고

    수강평 47

    ∙

    평균 평점 4.7

    5

    27% 수강 후 작성

    그동안 생각없이 썼던 훅들의 개념을 다시 익히기 좋았습니다

    • nhcodingstudio
      지식공유자

      안녕하세요, 망고님. 지식공유자입니다. 우선 <React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처> 강의를 수강해 주시고, 소중한 수강평을 남겨주셔서 진심으로 감사드립니다. 망고님께서 남겨주신 정성스러운 피드백은 저에게 정말 큰 힘이 됩니다. 그동안 익숙하게 사용해 오셨던 Hook들의 개념을 이번 강의를 통해 다시 한번 탄탄하게 정립하는 계기가 되셨다니 교육자로서 무척 보람을 느낍니다. 원리를 정확히 이해하고 사용하는 습관이 향후 고성능 애플리케이션을 설계하는 데 있어 강력한 무기가 될 것이라 확신합니다. 망고님의 열정적인 학습을 응원하는 마음을 담아 작은 혜택을 드리고자 합니다. 혹시 저희 교육 과정 중 추가적으로 수강을 희망하시는 강의가 있으시다면, 아래 이메일로 편하게 연락해 주십시오. 확인 후 즉시 할인 쿠폰을 전달해 드리겠습니다. 문의 이메일: jeony0535@naver.com 다시 한번 귀한 시간 내어 따뜻한 말씀 남겨주셔서 감사합니다. 망고님의 성장을 진심으로 응원하겠습니다 :D

  • asam0707님의 프로필 이미지
    asam0707

    수강평 12

    ∙

    평균 평점 5.0

    5

    60% 수강 후 작성

    실습 가이드가 잘 정리되어 싶게 복습할 수 있어요

    • nhcodingstudio
      지식공유자

      안녕하세요, asam0707님! 지식공유자입니다 :D 우선 <React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처> 강의를 수강해 주시고, 이렇게 소중한 수강평을 남겨주셔서 진심으로 감사드립니다. 특히 제가 강의를 설계하며 가장 신경 썼던 부분인 '개념과 원리에서 시작해 점진적으로 확장해 나가는 방식'을 좋게 평가해 주셔서 정말 감동적입니다. 제가 의도한 학습의 방향성을 asam0707 님께서 정확히 이해하고 따라와 주신 것 같아 지식공유자로서 큰 보람을 느낍니다. Part 2에서 다룬 고성능 훅과 실전 아키텍처들이 asam0707 님의 프로젝트에 강력한 무기가 되기를 진심으로 응원하겠습니다! asam0707 님의 뜨거운 학습 열정에 감사하는 마음을 담아 작은 혜택을 드리고자 합니다. 혹시 저희 교육 과정 중 추가적으로 수강을 희망하시는 강의가 있으시다면, 아래 이메일로 편하게 연락해 주십시오. 확인 후 즉시 할인 쿠폰을 전달해 드리겠습니다. 문의 이메일: jeony0535@naver.com 다시 한번 귀한 시간 내어 따뜻한 말씀 남겨주셔서 감사합니다. asam0707 님의 성장을 저도 끝까지 응원하겠습니다! :D

  • 오세진님의 프로필 이미지
    오세진

    수강평 3

    ∙

    평균 평점 5.0

    5

    31% 수강 후 작성

    개념과 원리를 설명해줘서 점점 확장해가는 수업방식이 너무 좋습니다.

    • nhcodingstudio
      지식공유자

      안녕하세요, 오세진님! 지식공유자입니다 :D 우선 <React 마스터 클래스: Part 2 - 미션으로 완성하는 고성능 훅과 실전 아키텍처> 강의를 수강해 주시고, 이렇게 소중한 수강평을 남겨주셔서 진심으로 감사드립니다. 특히 제가 강의를 설계하며 가장 신경 썼던 부분인 '개념과 원리에서 시작해 점진적으로 확장해 나가는 방식'을 좋게 평가해 주셔서 정말 감동적입니다. 제가 의도한 학습의 방향성을 오세진 님께서 정확히 이해하고 따라와 주신 것 같아 지식공유자로서 큰 보람을 느낍니다. Part 2에서 다룬 고성능 훅과 실전 아키텍처들이 오세진 님의 프로젝트에 강력한 무기가 되기를 진심으로 응원하겠습니다! 세진 님의 뜨거운 학습 열정에 감사하는 마음을 담아 작은 혜택을 드리고자 합니다. 혹시 저희 교육 과정 중 추가적으로 수강을 희망하시는 강의가 있으시다면, 아래 이메일로 편하게 연락해 주십시오. 확인 후 즉시 할인 쿠폰을 전달해 드리겠습니다. 문의 이메일: jeony0535@naver.com 다시 한번 귀한 시간 내어 따뜻한 말씀 남겨주셔서 감사합니다. 오세진 님의 성장을 저도 끝까지 응원하겠습니다! :D

nhcodingstudio님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1: V8과 코어 해체기강의 썸네일

"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1: V8과 코어 해체기

nhcodingstudio

AI가 뱉어낸 블랙박스 코드에 안도하던 날들은 이제 끝. 컴퓨터의 물리적 한계와 Node.js 코어 엔진의 동작 원리를 꿰뚫어, 어떤 트래픽 폭주 앞에서도 무너지지 않는 엔지니어의 통제력을 완성해 드립니다.

초급

초급

JavaScript, Node.js, 컴퓨터 구조

"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1: V8과 코어 해체기강의 썸네일

"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1: V8과 코어 해체기

nhcodingstudio

Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)강의 썸네일

Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)

nhcodingstudio

「Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성」는 로컬에서만 동작하는 튜토리얼 수준을 넘어, 대규모 트래픽을 견디는 '진짜 상용 서비스(Production)' 아키텍처 설계 지침서입니다. TanStack Query와 Zustand를 결합한 무결점 상태 동기화부터, Turbopack 기반의 100KB 미만 번들 최적화 및 고급 SEO 주입, 그리고 프록시(Proxy)와 JWT 세션을 활용한 철통같은 풀스택 보안망 구축까지 현업의 핵심 기술을 모두 다룹니다. 지긋지긋한 Hydration 에러와 CORS 장벽을 스스로 허물고, 단순한 코더를 넘어 프론트엔드 시스템 전체를 지배하는 '시니어 아키텍트'로 도약하고 싶은 분들께 이 강의를 강력히 추천합니다.

초급

초급

Next.js, React, TypeScript

Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)강의 썸네일

Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)

nhcodingstudio

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)강의 썸네일

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)

nhcodingstudio

AI가 생성한 파편화된 코드와 복잡한 React 생태계 사이에서 제어권을 잃어가는 문제를, Zustand, TanStack Query, React Hook Form, Zod, React Compiler 등 핵심 React 라이브러리의 보닛을 열어 내부 동작 원리를 공학적으로 분석함으로써 근본적으로 해결해 드립니다. 도구의 단순 활용을 넘어 React 엔진의 성능과 데이터 흐름을 직접 조종하는 법을 익힘으로써, 어떤 위기 상황에서도 즉각 대응할 수 있는 단단한 '엔터프라이즈 아키텍처 설계 근육'을 갖추게 됩니다.

초급

초급

JavaScript, React, TypeScript

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)강의 썸네일

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)

nhcodingstudio

Next.js 마스터 클래스: Part 2 - 풀스택 아키텍처와 프레임워크 심화 (Server Actions, 캐시 혁명, 고급 라우팅)강의 썸네일

Next.js 마스터 클래스: Part 2 - 풀스택 아키텍처와 프레임워크 심화 (Server Actions, 캐시 혁명, 고급 라우팅)

nhcodingstudio

단순히 화면을 그려내는 것을 넘어, '진짜 시스템'을 고민해 본 적 있으신가요? 많은 개발자가 공통으로 마주하는 진짜 문제는 따로 있습니다. 겉보기엔 그럴듯한데 데이터 동기화는 수시로 꼬이고, 속도는 답답하며, 기능이 조금만 추가되어도 어디서부터 손을 댈지 모르게 되는 '가짜 풀스택'의 한계죠. 이건 단순히 Next.js의 기능을 하나 더 외운다고 해결될 문제가 아닙니다. 본 강의는 이 답답함을 뿌리부터 해결해 드릴게요. 기능을 나열하는 백과사전식 수업은 지루하잖아요? 대신 컴퓨터 과학(CS)의 근본 원리와 Next.js의 심화 아키텍처를 아주 끈끈하게 결합했습니다. 수백만 명의 트래픽이 몰려도 유연하게 버텨내고, 데이터의 일관성을 완벽하게 유지하는 엔터프라이즈급 설계 능력을 여러분의 손끝에 직접 이식해 드립니다.

초급

초급

JavaScript, React, Next.js

Next.js 마스터 클래스: Part 2 - 풀스택 아키텍처와 프레임워크 심화 (Server Actions, 캐시 혁명, 고급 라우팅)강의 썸네일

Next.js 마스터 클래스: Part 2 - 풀스택 아키텍처와 프레임워크 심화 (Server Actions, 캐시 혁명, 고급 라우팅)

nhcodingstudio

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계강의 썸네일

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계

nhcodingstudio

Next.js 15의 App Router는 서버와 클라이언트의 경계를 완벽히 제어하여 고성능 웹 서비스를 구축하는 강력한 아키텍처입니다. 본 강의는 서버 컴포넌트(RSC)의 동작 원리부터 3대 캐싱 전략(Static, Dynamic, ISR)까지 이어지는 복잡한 렌더링 메커니즘을 12개의 실무 미션을 통해 명확히 연결해 드립니다. 이를 통해 파일 시스템 라우팅과 중첩 레이아웃을 비즈니스 요구사항에 맞게 설계하는 능력을 갖추고, 원리 모를 코드를 복사하던 '바이브 코딩'의 불안함에서 완전히 벗어날 수 있습니다. 결과적으로 여러분은 AI가 생성한 코드의 맹점을 단번에 간파하고 최적의 구조를 주도적으로 지시하는 Next.js 아키텍트로 거듭나게 될 것입니다.

초급

초급

JavaScript, React, TypeScript

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계강의 썸네일

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계

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

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

이벤트부터 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

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

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

nhcodingstudio

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

초급

초급

HTML/CSS

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

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

nhcodingstudio

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트강의 썸네일

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

nhcodingstudio

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

초급

초급

JavaScript, Node.js, Express

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트강의 썸네일

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

nhcodingstudio

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

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

nhcodingstudio

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

초급

초급

express.js, Node.js, routing

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

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

nhcodingstudio

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계강의 썸네일

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계

nhcodingstudio

단순히 듣고 끝나는 강의가 아닙니다. 이 강의는 “React를 이해하는 순간”이 아니라 “React를 직접 다룰 수 있게 되는 순간”을 목표로 합니다. 매 섹션마다 강의와 함께 미션을 수행하고, 연습문제를 직접 풀며, JSX, Virtual DOM, State, useEffect 같은 핵심 개념을 손으로 구현하며 익히는 과정입니다. 완강을 마쳤을 때 당신은 단순히 React 문법을 아는 입문자가 아니라, 컴포넌트 설계부터 렌더링 흐름까지 스스로 설명하고 활용할 수 있는 개발자가 되어 있을 것입니다. “듣기만 하는 수업이 아닌, 완성해 나가는 학습.” React의 본질을 이해하고, 선언형 UI의 세계를 직접 체험하세요.

초급

초급

HTML/CSS, JavaScript, React

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계강의 썸네일

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계

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

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

JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)강의 썸네일

JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)

nhcodingstudio

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

초급

초급

HTML/CSS, JavaScript, 객체지향

JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)강의 썸네일

JavaScript 객체지향, 이론 말고 '만들면서' 배웁니다 (전략 AI 편)

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

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계강의 썸네일

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계

nhcodingstudio

단순히 듣고 끝나는 강의가 아닙니다. 이 강의는 “React를 이해하는 순간”이 아니라 “React를 직접 다룰 수 있게 되는 순간”을 목표로 합니다. 매 섹션마다 강의와 함께 미션을 수행하고, 연습문제를 직접 풀며, JSX, Virtual DOM, State, useEffect 같은 핵심 개념을 손으로 구현하며 익히는 과정입니다. 완강을 마쳤을 때 당신은 단순히 React 문법을 아는 입문자가 아니라, 컴포넌트 설계부터 렌더링 흐름까지 스스로 설명하고 활용할 수 있는 개발자가 되어 있을 것입니다. “듣기만 하는 수업이 아닌, 완성해 나가는 학습.” React의 본질을 이해하고, 선언형 UI의 세계를 직접 체험하세요.

초급

초급

HTML/CSS, JavaScript, React

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계강의 썸네일

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계

nhcodingstudio

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계강의 썸네일

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계

nhcodingstudio

Next.js 15의 App Router는 서버와 클라이언트의 경계를 완벽히 제어하여 고성능 웹 서비스를 구축하는 강력한 아키텍처입니다. 본 강의는 서버 컴포넌트(RSC)의 동작 원리부터 3대 캐싱 전략(Static, Dynamic, ISR)까지 이어지는 복잡한 렌더링 메커니즘을 12개의 실무 미션을 통해 명확히 연결해 드립니다. 이를 통해 파일 시스템 라우팅과 중첩 레이아웃을 비즈니스 요구사항에 맞게 설계하는 능력을 갖추고, 원리 모를 코드를 복사하던 '바이브 코딩'의 불안함에서 완전히 벗어날 수 있습니다. 결과적으로 여러분은 AI가 생성한 코드의 맹점을 단번에 간파하고 최적의 구조를 주도적으로 지시하는 Next.js 아키텍트로 거듭나게 될 것입니다.

초급

초급

JavaScript, React, TypeScript

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계강의 썸네일

Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계

nhcodingstudio

Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)강의 썸네일

Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)

nhcodingstudio

「Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성」는 로컬에서만 동작하는 튜토리얼 수준을 넘어, 대규모 트래픽을 견디는 '진짜 상용 서비스(Production)' 아키텍처 설계 지침서입니다. TanStack Query와 Zustand를 결합한 무결점 상태 동기화부터, Turbopack 기반의 100KB 미만 번들 최적화 및 고급 SEO 주입, 그리고 프록시(Proxy)와 JWT 세션을 활용한 철통같은 풀스택 보안망 구축까지 현업의 핵심 기술을 모두 다룹니다. 지긋지긋한 Hydration 에러와 CORS 장벽을 스스로 허물고, 단순한 코더를 넘어 프론트엔드 시스템 전체를 지배하는 '시니어 아키텍트'로 도약하고 싶은 분들께 이 강의를 강력히 추천합니다.

초급

초급

Next.js, React, TypeScript

Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)강의 썸네일

Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)

nhcodingstudio

Next.js 15로 완성하는 실전 YouTube 클론 개발강의 썸네일

Next.js 15로 완성하는 실전 YouTube 클론 개발

antonio

이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.

초급

초급

Next.js, React, PostgreSQL

Next.js 15로 완성하는 실전 YouTube 클론 개발강의 썸네일

Next.js 15로 완성하는 실전 YouTube 클론 개발

antonio

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]강의 썸네일

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

초급

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]강의 썸네일

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지강의 썸네일

타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지

수코딩

이 강의는 TypeScript 기반으로 Next.js 16+를 처음부터 실전 프로젝트 수준까지 완성하는 올인원 강의입니다. App Router, Server Components, Server Actions, Caching, Cache Components, 인증, 성능 최적화, 배포까지 최신 Next.js의 핵심 개념과 실무 패턴을 직접 구현하며 학습합니다.

입문

입문

JavaScript, React, TypeScript

타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지강의 썸네일

타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지

수코딩

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React강의 썸네일

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

MERN Stack을 활용하여 커뮤니티 어플리케이션을 제작하고, 배포합니다. (MongoDB, Express, React, Node + Firebase)

초급

초급

MongoDB, Express, React

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React강의 썸네일

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어강의 썸네일

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

초급

초급

Firebase, React

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어강의 썸네일

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

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 Native with Expo: 제로초에게 제대로 배우기강의 썸네일

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

제로초(조현영)

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

초급

초급

React, React Native, 하이브리드 앱

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

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

제로초(조현영)

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

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

신제용

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

입문

입문

React, 웹앱, Next.js

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

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

신제용

[PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기강의 썸네일

[PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기

닙스(NYBS)

개발 프로젝트를 위한 미션 콘텐츠입니다. DevTime이라는 타이머 앱을 직접 구현해보면서 프로젝트 실습을 해볼 수 있도록 PRD 기획 문서, Figma 시안, API 엔드포인트를 제공합니다. 실제 서비스와 유사한 수준의 프로젝트를 구현해 보면서 그동안 학습한 지식을 완벽하게 자신의 것으로 만들어 보세요 🚀

입문

입문

React

[PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기강의 썸네일

[PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기

닙스(NYBS)

HTML/CSS/JS만 알아도 OK! React와 Firebase로 완성하는 실전 프로젝트강의 썸네일

HTML/CSS/JS만 알아도 OK! React와 Firebase로 완성하는 실전 프로젝트

이지웹

React와 Firebase를 활용하여 로그인, 게시글 관리, 파일 업로드, 프로필 관리 등 실제 서비스에서 사용되는 핵심 기능을 구현하는 웹 애플리케이션을 만들어보는 강의입니다. Firebase Authentication을 이용한 이메일 로그인과 소셜 로그인, Firestore 기반 데이터 저장 및 실시간 데이터 처리, Firebase Storage를 활용한 파일 업로드 기능, 그리고 프로필 관리 기능까지 단계적으로 구현하면서 하나의 완성된 웹 서비스를 만들어 보실 수 있습니다. 프론트엔드 개발을 배우시는 분들이 복잡한 서버 구축 없이 Firebase를 활용하여 빠르게 웹 서비스를 구현하는 방법을 이해하실 수 있도록 구성된 강의입니다.

초급

초급

React, Firebase, firebase-firestore

HTML/CSS/JS만 알아도 OK! React와 Firebase로 완성하는 실전 프로젝트강의 썸네일

HTML/CSS/JS만 알아도 OK! React와 Firebase로 완성하는 실전 프로젝트

이지웹

[Electron #2] React + Electron 오프라인 얼굴인식 출입·출결 관리 시스템 (With DeepFace)강의 썸네일

[Electron #2] React + Electron 오프라인 얼굴인식 출입·출결 관리 시스템 (With DeepFace)

닭강정

현장에서 오프라인 환경에서도 얼굴인식이 어떻게 동작하는지 궁금했던 경험을 바탕으로, 이 강의에서는 React + Electron과 Python의 FastAPI 기반으로 구동되는 DeepFace를 활용해 얼굴인식 기반 출입·출결 관리의 기본 구조를 함께 만들어봅니다. 완성도보다는 동작 원리 이해와 개인 프로젝트로 확장할 수 있는 기초 다지기에 초점을 둡니다.

중급이상

중급이상

React, FastAPI, 인공지능(AI)

[Electron #2] React + Electron 오프라인 얼굴인식 출입·출결 관리 시스템 (With DeepFace)강의 썸네일

[Electron #2] React + Electron 오프라인 얼굴인식 출입·출결 관리 시스템 (With DeepFace)

닭강정

제로부터 TypeScript로 Claude Code 만들기강의 썸네일

제로부터 TypeScript로 Claude Code 만들기

Hiro Son

"왜 AI가 이런 코드를 짰지?", "왜 방금 말한 걸 기억 못 하지?" 클로드 코드(Claude Code)와 같은 AI 도구를 쓰다 보면 마주하는 답답함, 그 원인은 도구가 어떻게 동작하는지 모르니까입니다. 이 강의는 그 블랙박스를 투명하게 열어젖힙니다. 우리는 25강에 걸쳐 LLM에게 파일을 보는 '눈(Read)', 코드를 고치는 '손(Edit)', 명령을 수행하는 '발(Bash)'을 직접 달아주며, 실제 현업 도구와 똑같이 동작하는 나만의 Coding Agent를 밑바닥부터 구현합니다. 단순히 라이브러리 사용법을 배우는 것이 아닙니다. AI가 어떻게 프로젝트 구조를 파악하고, 왜 긴 대화에서 기억을 잃는지, 그것을 기술적으로 어떻게 해결하는지(Sliding Window, Summary) 직접 코드로 구현하며 체득합니다. 이 과정을 통해 여러분은 AI 도구의 단순한 '사용자'에서, 작동 원리를 꿰뚫고 도구를 내 입맛대로 개조하고 평가할 수 있는 'AI 공급자'의 시야를 갖게 될 것입니다.

초급

초급

React, TypeScript, vercel

제로부터 TypeScript로 Claude Code 만들기강의 썸네일

제로부터 TypeScript로 Claude Code 만들기

Hiro Son

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

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

코딩도니

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

초급

초급

React, Java, AWS

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

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

코딩도니

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

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

React + SpringAI로 만드는 안전신문고 AI 신고 서비스 개발강의 썸네일

React + SpringAI로 만드는 안전신문고 AI 신고 서비스 개발

Neo

React + SpringAI로 만드는 안전신문고 AI 신고 서비스 개발 Neo + Essential 5번째 프로젝트 강의는 정부 시스템 개선 아이디어 안전신문고 신고 시스템 구축 입니다!

입문

입문

React, Spring Boot, 인공지능(AI)

React + SpringAI로 만드는 안전신문고 AI 신고 서비스 개발강의 썸네일

React + SpringAI로 만드는 안전신문고 AI 신고 서비스 개발

Neo

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)강의 썸네일

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

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

초급

초급

React, Electron, GUI

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)강의 썸네일

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

₩30,800