키모스토리

1. Zustand란?Zustand는 React에서 전역 상태를 매우 간단하게 관리할 수 있는 라이브러리입니다.특징Redux처럼 복잡한 보일러플레이트가 거의 없습니다.Context Provider를 필수로 만들지 않아도 됩니다(대부분의 경우).Store가 작고 가벼우며, 필요한 컴포넌트만 선택적으로 구독할 수 있습니다.전역 상태를 “훅 형태”로 바로 불러다 쓰는 방식이 직관적입니다.2. 설치 방법아래 중 프로젝트에서 사용하는 패키지 매니저로 설치하시면 됩니다.pnpmpnpm add zustandnpmnpm i zustandyarnyarn add zustand3. Zustand 기본 개념Zustand는 크게 2가지만 이해하시면 됩니다.Store 생성: create()로 전역 상태와 액션(변경 함수)을 정의..

이전 강의에 이어서 테스트를 위해 json-server 설치 (useMutation 테스트용) json-server 설치npm i json-server db.json 파일 추가 (테스트용 db파일){ "posts": [ { "id": 1, "title": "첫 번째 포스트", }, { "id": 2, "title": "두 번째 포스트", } ]} 파일 저장후 npx json-server db.json 으로 json server 실행npx json-server db.jsonJSON Server started on PORT :3000Press CTRL-C to stopWatching db.json...♡( ◡‿◡ )Index:http://loca..

TanStack Query(이전 명칭: React Query)는 웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 매우 간편하게 만들어 줍니다. 클라이언트 상태 (Client State)사용자 인터페이스(ui)와 관련 된 상태(e.g. 모달의 오픈여부, 언어, 테마 등)useState 훅을 주로 사용서버에서 일어나는 일과 관련 없음.주로 유저 액션에 의해 변경, 클라이언트 내부에서만 관리되고 업데이트 됨 서버상태 (Server State)서버에 저장되지만 클라이언트에 노출하는데 필요한 데이터 (e.g. DB의 상품정보)서버 => 클라이언트로 전송(GET)클라이언트 => 서버로 전송 (POST, PUT, DELETE) 주요 기능 간편한 데이터 fetching 훅 이용,..

Next.js 16(App Router) 기준으로, Server Action이 객체를 return하고 그 결과를 useActionState로 UI에 바로 반영하는 “등록/삭제 + 목록 조회” 전체 예시입니다.(메모리 DB 사용)목표메모리 DB: { id, title, comment, createdAt }목록 조회: Server Component에서 렌더등록/삭제: + useActionState액션 결과: { ok, message }를 return → 화면에 메시지 표시액션 후 목록 갱신: revalidatePath("/memos")1) 메모리 DB 실서비스에서는 DB(Postgres/MSSQL 등)로 바뀌지만, 개념 설명엔 메모리 DB가 가장 직관적입니다./lib/memo-db.tsexport type..

0) 프로젝트 생성 pnpm create next-app@latest member-demo --ts --src-dir --tailwind --eslint --appcd member-demo 프로젝트 폴더구조src/ app/ members/ page.tsx // 회원목록 (Server Component) actions.ts // 서버액션모음 (등록/수정/삭제) register/ page.tsx // 회원가입 페이지 SignupForm.tsx // 회원가입 폼 (Client Component) [id]/ edit/ page.ts..

폼 제출 2가지 방식 비교: form action(Server Actions) vs onSubmit(Client Handler)1) 핵심 차이: “어디서 처리하나?”Server Actions ()폼 제출이 곧바로 서버 함수 실행으로 연결됩니다.DB 처리/권한 체크/캐시 무효화까지 서버에서 끝냅니다.Client Handler ()제출을 JS로 가로채서(preventDefault) 클라이언트에서 fetch/axios로 API를 호출합니다.UI 제어(로딩/검증/토스트/optimistic)가 매우 자유롭습니다.2) Server Actions 방식이 유리한 경우장점코드가 단순: API 라우트 없이도 CRUD 구현 가능보안에 유리: DB/비밀키를 브라우저로 내보낼 필요 없음캐시/ISR 연동이 자연스러움: updat..

Next.js 16(App Router) + Prisma v7 + SQLite 기준으로설치 → DB 생성(migrate) → seed 목록/상세 CRUD UI → 캐시/ISR(revalidate) 전략 + Data Fetching 패턴 비교까지 한 번에 들어있는 예제입니다.Prisma v7 변경점: schema.prisma의 datasource.url 제거 + prisma.config.ts로 이동.Next 16 변경점: revalidateTag(tag, profile) 형태로 2번째 인자가 필요Server Action에서는 즉시 반영용 updateTag 권장Next.js+4Prisma+4Prisma+40) 전제Node 런타임에서 Prisma를 사용합니다(Edge 런타임 X).패키지 매니저는 pnpm 기..

Data Fetching Pattern 정리Sequential Data Fetching vs Parallel Data Fetching (Server Component 기준)Next.js(App Router)의 Server Component 환경에서는 fetch()를 서버에서 실행할 수 있고, 그 결과를 JSX로 바로 렌더링할 수 있습니다.이때 “여러 데이터를 가져오는 방식”은 크게 두 가지 패턴으로 설명할 수 있습니다.Sequential Data Fetching(순차 요청): A를 받은 후 B를 요청Parallel Data Fetching(병렬 요청): A/B/C를 동시에 요청 후 결과를 모아서 렌더링아래는 jsonplaceholder API를 활용한 실습 예제를 기준으로 각각을 설명합니다.1) Sequ..

Next.js(App Router) 렌더링 완전 정리 (RSC 중심) — Static/Dynamic/Streaming/컴포지션 패턴까지 (v16 기준)이 글은 Next.js App Router(최신 v16 계열) 기준으로, “왜 이 페이지는 즉시 뜨지?”, “어떤 순간에 동적 렌더링이 되지?”, “RSC에서 Client/Server 컴포넌트는 어떻게 섞어야 하지?” 같은 렌더링 관련 핵심을 한 번에 정리한 포스팅입니다.1) RSC(React Server Components) 관점에서 “렌더링”을 다시 보기App Router에서 page / layout은 기본이 Server Component입니다. 즉, “일단 서버에서 렌더링 가능한 건 서버에서” 처리하고, 필요한 부분만 클라이언트로 내려보내는 구조가 기..

Interleaving Server and Client Components (Next.js App Router)App Router에서는 page.tsx, layout.tsx가 기본적으로 Server Component입니다.브라우저 상호작용(상태, 이벤트, 브라우저 API)이 필요할 때만 파일 상단에 'use client'를 붙여 Client Component 경계(boundary) 를 만듭니다.핵심 규칙은 2줄로 요약됩니다.Server Component는 Server/Client를 모두 import 가능Client Component는 Client만 import 가능 (Server import 불가)이 규칙을 바탕으로, 요청하신 4가지 케이스를 정리합니다.1) Client Component 내에서 다른 C..

아래 내용은 Next.js App Router(v15~v16) 기준으로, react-slick 같은 서드파티 UI 패키지를 “클라이언트 라우트(=Client Component 영역)”와 “서버 라우트(=Server Component/Route Handler 영역)”에서 안전하게 쓰는 패턴 + Context Providers까지 한 번에 정리한 글입니다.1) “서드파티 UI 패키지”는 어디에서 써야 하나?App Router에서 page.tsx / layout.tsx는 기본이 Server Component입니다. 서버 컴포넌트는 DB 접근/시크릿 사용/JS 번들 감소/스트리밍에 유리하고, 브라우저 API나 상호작용이 필요하면 Client Component를 섞어서 씁니다. Next.js따라서 서드파티 패키지..

1) Streaming이란?기본 SSR은 “데이터 다 받고 → HTML 만들고 → 내려보내고 → Hydration”이 순차(블로킹) 로 진행돼서, 느린 데이터 하나가 있으면 페이지 전체가 늦어질 수 있습니다. Next.js의 Streaming은 HTML을 작은 청크로 나눠 준비되는 부분부터 점진적으로 전송해, 사용자가 더 빨리 화면을 보기 시작하도록 만드는 방식입니다. Next.jsStreaming은 React의 와 결합되어 “fallback UI를 먼저 보여주고 → 준비되면 교체”하는 흐름으로 동작합니다. Next.js+1또한 App Router에서 페이지/레이아웃은 기본적으로 Server Component이며, 서버에서 렌더링된 결과를 (필요하면 캐시하고) 클라이언트로 스트리밍할 수 있습니다. Ne..