키모스토리

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..