← 모든 태그

#react

24개의 글

웹 개발21분 읽기

13장: 실전 프로젝트 - Next.js 풀스택 앱 구축

Link Shortener 앱을 구축하며 Next.js App Router의 모든 기능을 실전에 적용합니다. 프로젝트 구조 설계부터 배포까지 전 과정을 다룹니다.

웹 개발16분 읽기

11장: 실전 프로젝트 - React 19 풀스택 앱 구축

React 19의 핵심 기능을 모두 활용한 풀스택 북마크 앱을 구축합니다. Server Components, Server Actions, 새로운 훅, Suspense 패턴을 실전에 적용합니다.

웹 개발15분 읽기

12장: 모니터링, 보안, 프로덕션 배포

Next.js의 프로덕션 배포를 다룹니다. instrumentation.ts, OpenTelemetry, 보안 헤더, Docker 배포, Build Adapters, 셀프 호스팅 전략을 살펴봅니다.

웹 개발14분 읽기

10장: React 18에서 19로 마이그레이션

React 18에서 19로 안전하게 업그레이드하는 단계별 가이드입니다. 제거된 API, 타입 변경, 동작 변화, 자동 마이그레이션 도구를 다룹니다.

웹 개발17분 읽기

11장: 이미지, 폰트, 메타데이터 최적화

Next.js의 이미지, 폰트, 메타데이터 최적화를 다룹니다. next/image, next/font, generateMetadata, OG 이미지 생성, Core Web Vitals 전략을 살펴봅니다.

웹 개발15분 읽기

9장: 성능 최적화 전략과 베스트 프랙티스

React 19 애플리케이션의 성능을 극대화하는 전략을 다룹니다. 번들 최적화, 렌더링 성능, Core Web Vitals 개선, 측정 도구 활용법을 배웁���다.

웹 개발17분 읽기

10장: 미들웨어와 Proxy 고급 패턴

Next.js의 미들웨어 진화를 다룹니다. middleware.ts에서 proxy.ts로의 전환, 인증, i18n, A/B 테스팅, 속도 제한 등 고급 패턴을 살펴봅니다.

웹 개발16분 읽기

8장: ref 개선, 메타데이터, 리소스 로딩 API

React 19의 DX 개선사항을 다룹니다. ref를 일반 props로 전달하는 방법, 컴포넌트 내 메타데이터 태그, 리소스 프리로딩 API를 살펴봅니다.

웹 개발20분 읽기

9장: Turbopack - 차세대 번들러의 시대

Next.js의 차세대 번들러 Turbopack을 다룹니다. Rust 기반 아키텍처, 성능 벤치마크, FS 캐싱, Webpack 마이그레이션, 설정 방법을 살펴봅니다.

웹 개발15분 읽기

7장: React Compiler - 자동 최적화의 시대

React Compiler의 동작 원리, HIR 기반 분석, 자동 메모이제이션, 설치와 설정, ESLint 통합, 실전 적용 전략을 다룹니다.

웹 개발21분 읽기

8장: Server Actions와 폼 처리 고급 패턴

Next.js의 Server Actions와 폼 처리를 다룹니다. next/form, useActionState, 보안, revalidation 통합, after() API, 고급 뮤테이션 패턴을 살펴봅니다.

웹 개발16분 읽기

6장: Suspense 고급 패턴과 스트리밍 SSR

React 19에서 강화된 Suspense의 고급 패턴, 스트리밍 SSR, 중첩 Suspense 전략, 배칭 동작, Partial Pre-rendering을 다룹니다.

웹 개발17분 읽기

7장: 스트리밍 SSR과 로딩 UI 전략

Next.js의 스트리밍 SSR 동작 원리를 살펴봅니다. loading.tsx, Suspense 경계, 스켈레톤 설계, 프로그레시브 렌더링 전략과 성능 지표 영향을 다룹니다.

웹 개발16분 읽기

5장: 새로운 훅 - useActionState, useFormStatus, useOptimistic

React 19의 새로운 훅 3종을 심층 분석합니다. 폼 상태 관리, 제출 상태 추적, 낙관적 UI 업데이트의 실전 패턴을 다룹니다.

웹 개발17분 읽기

6장: Cache Components와 'use cache' 디렉티브

Next.js 16의 Cache Components 시스템을 다룹니다. 'use cache' 디렉티브, cacheLife 프로필, cacheTag 무효화, 세 가지 캐시 변형을 살펴봅니다.

웹 개발15분 읽기

4장: use() API와 새로운 데이터 패턴

React 19의 use() API로 Promise와 Context를 조건부로 소비하는 방법, 서버-클라이언트 스트리밍 패턴, 기존 훅과의 차이를 다룹니다.

웹 개발20분 읽기

5장: 데이터 페칭과 캐싱 전략의 대전환

Next.js 14에서 16까지 캐싱 전략이 어떻게 변화했는지 살펴봅니다. 네 가지 캐싱 레이어, fetch() 기본값 변경, 재검증 전략을 다룹니다.

웹 개발22분 읽기

3장: Server Actions로 서버-클라이언트 통합하기

Server Actions의 동작 원리, 폼 처리 패턴, 데이터 뮤테이션, 에러 핸들링, 보안 고려사항을 실전 코드와 함께 다룹니다.

웹 개발12분 읽기

4장: 인터셉팅 라우트와 모달 패턴

Next.js의 인터셉팅 라우트로 모달, 사진 갤러리, 미리보기 패턴을 구현합니다. 병렬 라우트와의 조합, 딥 링킹, 공유 가능한 URL을 다룹니다.

웹 개발23분 읽기

2장: React Server Components 아키텍처 심층 분석

React Server Components의 동작 원리, 직렬화 프로토콜, 번들 전략, 합성 규칙을 심층적으로 분석합니다. 서버와 클라이언트의 경계를 이해합니다.

웹 개발10분 읽기

3장: 동적 라우팅과 병렬 라우트

Next.js의 동적 세그먼트, catch-all 라우트, 병렬 라우트(@slot)의 동작 원리와 대시보드, 조건부 렌더링 등 실전 패턴을 다룹니다.

웹 개발16분 읽기

1장: React 19의 등장과 새로운 패러다임

React 19가 가져온 근본적인 변화를 살펴봅니다. Actions, Server Components, 새로운 훅, React Compiler까지 React의 새로운 패러다임을 이해합니다.

웹 개발15분 읽기

2장: App Router 아키텍처 - 레이아웃, 템플릿, 라우트 그룹

Next.js App Router의 파일 기반 라우팅, 레이아웃 계층, 템플릿, 라우트 그룹, 에러/로딩 경계의 동작 원리와 실전 패턴을 다룹니다.

웹 개발10분 읽기

1장: Next.js 15의 등장과 App Router의 진화

Next.js 15부터 16까지의 진화를 조망합니다. App Router의 완성, 캐싱 전략 변화, Turbopack, Cache Components 등 핵심 변경사항을 개괄합니다.