강의

N
챌린지

멘토링

N
클립

커뮤니티

NEW
개발 · 프로그래밍

/

프론트엔드

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

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

8명 이 수강하고 있어요.

난이도 초급

수강기한 무제한

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

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

  • 수만 개의 실시간 데이터가 쏟아져도 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가 설치되어 있고, 에디터와 터미널을 다루는 데 거부감이 없는 분

안녕하세요
입니다.

535

명

수강생

39

개

수강평

10

개

답변

4.7

점

강의 평점

13

개

강의

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

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

해당 강의에서 제공:

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

얼리버드 할인 중

₩26,400

70%

₩88,000

nhcodingstudio님의 다른 강의

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

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

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

nhcodingstudio

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

Basic

Basic

HTML/CSS, JavaScript, React

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

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

nhcodingstudio

Vanilla JavaScript로 직접 구현하는 NotionCourse Thumbnail

Vanilla JavaScript로 직접 구현하는 Notion

nhcodingstudio

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

Basic

Basic

JavaScript, React, 웹앱

Vanilla JavaScript로 직접 구현하는 NotionCourse Thumbnail

Vanilla JavaScript로 직접 구현하는 Notion

nhcodingstudio

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

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

nhcodingstudio

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

Basic

Basic

HTML/CSS, JavaScript, React

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

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

nhcodingstudio

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

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

nhcodingstudio

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

Basic

Basic

HTML/CSS, JavaScript, React

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

DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 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

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

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

nhcodingstudio

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

Beginner

Beginner

HTML/CSS, JavaScript, React

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

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

nhcodingstudio

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

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

nhcodingstudio

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

Basic

Basic

JavaScript, Node.js, Express

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

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

nhcodingstudio

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

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

nhcodingstudio

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

Basic

Basic

JavaScript, HTML/CSS, 객체지향

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

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

nhcodingstudio

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

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

nhcodingstudio

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

Basic

Basic

express.js, Node.js, routing

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

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

nhcodingstudio

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

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

nhcodingstudio

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

Beginner

Beginner

JavaScript, HTML/CSS, 웹앱

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

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

nhcodingstudio

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

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

nhcodingstudio

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

Basic

Basic

HTML/CSS

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

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

nhcodingstudio

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

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

nhcodingstudio

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

Beginner

Beginner

HTML/CSS

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

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

nhcodingstudio

비슷한 강의

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

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

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

nhcodingstudio

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

Basic

Basic

HTML/CSS, JavaScript, React

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

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

nhcodingstudio

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

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

nhcodingstudio

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

Basic

Basic

HTML/CSS, JavaScript, React

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

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

nhcodingstudio

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

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

nhcodingstudio

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

Basic

Basic

HTML/CSS, JavaScript, React

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

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

nhcodingstudio

프론트엔드 개발의 Kick, Web API (feat. React)Course Thumbnail

프론트엔드 개발의 Kick, Web API (feat. React)

박용주

실무에 적용할 수 있는 Web API를 다룹니다. 한 번쯤 꼭 마주치게 될 요구사항들을 풀어낼 무기를 얻어가시길 바랍니다.

Basic

Basic

JavaScript, React, Web API

프론트엔드 개발의 Kick, Web API (feat. React)Course Thumbnail

프론트엔드 개발의 Kick, Web API (feat. React)

박용주

실전 AI SaaS 풀스택 개발: 화상채팅 앱 만들기Course Thumbnail

실전 AI SaaS 풀스택 개발: 화상채팅 앱 만들기

antonio

실시간 AI 에이전트, 회의 내용 요약, 그리고 통화 후 기능이 있는 AI 기반의 화상 회의 애플리케이션을 만들어요.

Basic

Basic

React, Next.js, TailwindCSS

실전 AI SaaS 풀스택 개발: 화상채팅 앱 만들기Course Thumbnail

실전 AI SaaS 풀스택 개발: 화상채팅 앱 만들기

antonio

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

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

제주코딩베이스캠프

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

Basic

Basic

Firebase, React

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

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

제주코딩베이스캠프

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)Course Thumbnail

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

Basic

Basic

REST API, GraphQL, React

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)Course Thumbnail

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

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

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

코딩도니

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

Basic

Basic

React, Java, AWS

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

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

코딩도니

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

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

닭강정

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

Basic

Basic

React, Electron, GUI

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

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

닭강정

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지 (with 커서 AI)

짐코딩

탐색 → 계획 → 구현 → 커밋. 검증된 AI 개발 워크플로우를 클로드 코드로 마스터하세요. MCP, 서브에이전트, 프롬프트 엔지니어링까지 23개 미션으로 익히고, 3개 실전 프로젝트를 완성합니다.

Beginner

Beginner

React, Next.js, cursor

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지 (with 커서 AI)

짐코딩

리액트 공식문서 함께 공부하기Course Thumbnail

리액트 공식문서 함께 공부하기

정재남

2023년 리뉴얼된 React 공식 문서를 함께 학습해요.

Beginner

Beginner

React, JavaScript, react.js

리액트 공식문서 함께 공부하기Course Thumbnail

리액트 공식문서 함께 공부하기

정재남

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

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

Wintho

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

Basic

Basic

React Native, React, ES6

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

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

Wintho

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

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

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

신제용

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

Beginner

Beginner

React, 웹앱, Next.js

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

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

신제용

[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기Course Thumbnail

[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기

닙스(NYBS)

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

Beginner

Beginner

React

[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기Course Thumbnail

[PROKIT] 프론트엔드 프로젝트 키트: 타이머 앱 만들기

닙스(NYBS)

SpringAI + React로 만들어보는 나만의 감정일기 서비스Course Thumbnail

SpringAI + React로 만들어보는 나만의 감정일기 서비스

Neo

SpringAI + React로 만들어보는 나만의 감정일기 서비스 Neo + Essential과 함께 만들어보는 4번째 프로젝트 시간입니다!

Basic

Basic

React, Kotlin, Spring Boot

SpringAI + React로 만들어보는 나만의 감정일기 서비스Course Thumbnail

SpringAI + React로 만들어보는 나만의 감정일기 서비스

Neo

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

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

제로초(조현영)

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

Basic

Basic

React, React Native, 하이브리드 앱

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

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

제로초(조현영)

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)Course Thumbnail

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

Intermediate

Intermediate

React, Next.js, cursor

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)Course Thumbnail

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

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

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

코드캠프

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

Basic

Basic

React, Next.js, expo

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

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

코드캠프

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)Course Thumbnail

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

Intermediate

Intermediate

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)Course Thumbnail

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi