#실전 빌드
15 편의 글
Next.js로 쇼핑몰 만들기 #4 체크아웃과 결제 시뮬레이션
Server Actions 로 주문을 생성하고, 가짜 결제 게이트웨이로 성공/실패를 시뮬레이션합니다. useActionState 와 useFormStatus 로 폼 상태를 다루는 실전 패턴까지 정리합니다.
Next.js로 쇼핑몰 만들기 #3 장바구니
Client Context 와 localStorage 로 장바구니 상태를 관리합니다. 새로고침해도 유지되는 영속 카트, 수량 변경, 합계 계산, hydration 안전 패턴까지 정리합니다.
Next.js로 쇼핑몰 만들기 #2 상품 카탈로그
Server Component로 상품 목록과 상세 페이지를 만들고, searchParams 로 카테고리 필터를 붙입니다. next/image, generateStaticParams, notFound 까지 한 번에 정리합니다.
Next.js로 쇼핑몰 만들기 #1 시작과 설계
Next.js App Router로 쇼핑몰을 처음부터 만듭니다. 첫 글은 요구사항, 기술 결정, 라우트 구조, 상품 데이터 모델, 프로젝트 셋업까지 정리합니다.
Next.js로 블로그 만들기 #4 댓글 (Server Actions)
글마다 댓글을 달 수 있게 합니다. Server Actions로 폼 제출과 검증을 처리하고, useActionState로 UX를 다듬는 패턴을 실전에 적용합니다.
Next.js로 블로그 만들기 #3 태그와 검색
태그별 글 모음 페이지와 URL 쿼리 파라미터로 동작하는 검색 기능을 추가합니다. 동적 라우트의 두 가지 패턴(generateStaticParams vs searchParams)이 한 번에 등장합니다.
Next.js로 블로그 만들기 #2 글 목록과 상세 페이지
Server Component에서 fs로 MDX 파일을 직접 읽고, 동적 라우트에서 본문을 컴파일해 화면에 그리는 핵심 흐름을 만듭니다.
Next.js로 블로그 만들기 #1 시작과 설계
모던 리액트 시리즈에서 배운 Server Components와 Server Actions를 실전 프로젝트에 적용해봅니다. 첫 글은 요구사항, 데이터 모델, 폴더 구조, MDX 셋업까지 정리합니다.
리액트로 Todo 앱 만들기 #5 영속화와 마무리
localStorage로 데이터를 영속화하고 새로고침해도 유지되도록 마무리합니다. 시리즈 전체를 회고하며 다음 단계도 안내합니다.
리액트로 Todo 앱 만들기 #4 편집 기능
항목을 더블클릭하면 인라인 편집 모드로 진입하고, Enter로 저장 / Escape로 취소하는 편집 기능을 만들면서 useRef도 처음으로 사용해봅니다.