@kood/claude-code 0.5.4 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +6 -2
- package/package.json +1 -1
- package/templates/.claude/agents/document-writer.md +2 -2
- package/templates/.claude/skills/docs-creator/SKILL.md +2 -2
- package/templates/.claude/skills/docs-refactor/SKILL.md +1 -1
- package/templates/.claude/skills/plan/SKILL.md +15 -15
- package/templates/hono/CLAUDE.md +28 -28
- package/templates/hono/docs/architecture.md +24 -24
- package/templates/hono/docs/deployment/cloudflare.md +18 -18
- package/templates/hono/docs/deployment/docker.md +13 -13
- package/templates/hono/docs/deployment/index.md +19 -19
- package/templates/hono/docs/deployment/railway.md +32 -32
- package/templates/hono/docs/deployment/vercel.md +29 -29
- package/templates/hono/docs/guides/conventions.md +57 -57
- package/templates/hono/docs/guides/env-setup.md +47 -47
- package/templates/hono/docs/guides/getting-started.md +27 -27
- package/templates/hono/docs/library/hono/error-handling.md +11 -11
- package/templates/hono/docs/library/hono/index.md +4 -4
- package/templates/hono/docs/library/hono/middleware.md +18 -18
- package/templates/hono/docs/library/hono/rpc.md +7 -7
- package/templates/hono/docs/library/hono/validation.md +6 -6
- package/templates/hono/docs/library/prisma/cloudflare-d1.md +29 -29
- package/templates/hono/docs/library/prisma/config.md +16 -16
- package/templates/hono/docs/library/prisma/index.md +32 -32
- package/templates/hono/docs/library/t3-env/index.md +22 -22
- package/templates/hono/docs/library/zod/index.md +31 -31
- package/templates/nextjs/CLAUDE.md +54 -54
- package/templates/nextjs/docs/architecture.md +146 -146
- package/templates/nextjs/docs/design.md +183 -183
- package/templates/nextjs/docs/guides/conventions.md +86 -86
- package/templates/nextjs/docs/guides/getting-started.md +28 -28
- package/templates/nextjs/docs/guides/routes.md +32 -32
- package/templates/nextjs/docs/library/better-auth/index.md +70 -70
- package/templates/nextjs/docs/library/nextjs/app-router.md +43 -43
- package/templates/nextjs/docs/library/nextjs/caching.md +73 -73
- package/templates/nextjs/docs/library/nextjs/index.md +51 -51
- package/templates/nextjs/docs/library/nextjs/middleware.md +41 -41
- package/templates/nextjs/docs/library/nextjs/route-handlers.md +31 -31
- package/templates/nextjs/docs/library/nextjs/server-actions.md +34 -34
- package/templates/nextjs/docs/library/prisma/cloudflare-d1.md +20 -20
- package/templates/nextjs/docs/library/prisma/config.md +18 -18
- package/templates/nextjs/docs/library/prisma/crud.md +17 -17
- package/templates/nextjs/docs/library/prisma/index.md +18 -18
- package/templates/nextjs/docs/library/prisma/relations.md +16 -16
- package/templates/nextjs/docs/library/prisma/schema.md +23 -23
- package/templates/nextjs/docs/library/prisma/setup.md +6 -6
- package/templates/nextjs/docs/library/prisma/transactions.md +10 -10
- package/templates/nextjs/docs/library/tanstack-query/index.md +6 -6
- package/templates/nextjs/docs/library/tanstack-query/invalidation.md +20 -20
- package/templates/nextjs/docs/library/tanstack-query/optimistic-updates.md +4 -4
- package/templates/nextjs/docs/library/tanstack-query/use-mutation.md +15 -15
- package/templates/nextjs/docs/library/tanstack-query/use-query.md +22 -22
- package/templates/nextjs/docs/library/zod/complex-types.md +11 -11
- package/templates/nextjs/docs/library/zod/index.md +8 -8
- package/templates/nextjs/docs/library/zod/transforms.md +11 -11
- package/templates/nextjs/docs/library/zod/validation.md +9 -9
- package/templates/npx/CLAUDE.md +38 -38
- package/templates/npx/docs/library/commander/index.md +12 -12
- package/templates/npx/docs/library/fs-extra/index.md +9 -9
- package/templates/npx/docs/library/prompts/index.md +3 -3
- package/templates/npx/docs/references/patterns.md +12 -12
- package/templates/tanstack-start/CLAUDE.md +54 -54
- package/templates/tanstack-start/docs/architecture.md +128 -128
- package/templates/tanstack-start/docs/design.md +169 -169
- package/templates/tanstack-start/docs/guides/conventions.md +43 -43
- package/templates/tanstack-start/docs/guides/env-setup.md +35 -35
- package/templates/tanstack-start/docs/guides/getting-started.md +19 -19
- package/templates/tanstack-start/docs/guides/hooks.md +45 -45
- package/templates/tanstack-start/docs/guides/routes.md +54 -54
- package/templates/tanstack-start/docs/guides/services.md +45 -45
- package/templates/tanstack-start/docs/library/prisma/cloudflare-d1.md +19 -19
- package/templates/tanstack-start/docs/library/prisma/config.md +16 -16
- package/templates/tanstack-start/docs/library/prisma/crud.md +17 -17
- package/templates/tanstack-start/docs/library/prisma/relations.md +16 -16
- package/templates/tanstack-start/docs/library/prisma/schema.md +23 -23
- package/templates/tanstack-start/docs/library/prisma/setup.md +6 -6
- package/templates/tanstack-start/docs/library/prisma/transactions.md +10 -10
- package/templates/tanstack-start/docs/library/tanstack-query/invalidation.md +19 -19
- package/templates/tanstack-start/docs/library/tanstack-query/optimistic-updates.md +4 -4
- package/templates/tanstack-start/docs/library/tanstack-query/use-mutation.md +14 -14
- package/templates/tanstack-start/docs/library/tanstack-query/use-query.md +21 -21
- package/templates/tanstack-start/docs/library/tanstack-router/error-handling.md +9 -9
- package/templates/tanstack-start/docs/library/tanstack-router/hooks.md +11 -11
- package/templates/tanstack-start/docs/library/tanstack-router/navigation.md +17 -17
- package/templates/tanstack-start/docs/library/tanstack-router/route-context.md +5 -5
- package/templates/tanstack-start/docs/library/tanstack-router/search-params.md +10 -10
- package/templates/tanstack-start/docs/library/tanstack-start/auth-patterns.md +8 -8
- package/templates/tanstack-start/docs/library/tanstack-start/middleware.md +9 -9
- package/templates/tanstack-start/docs/library/tanstack-start/routing.md +6 -6
- package/templates/tanstack-start/docs/library/tanstack-start/server-functions.md +18 -18
- package/templates/tanstack-start/docs/library/tanstack-start/setup.md +4 -4
- package/templates/tanstack-start/docs/library/zod/complex-types.md +11 -11
- package/templates/tanstack-start/docs/library/zod/transforms.md +11 -11
- package/templates/tanstack-start/docs/library/zod/validation.md +9 -9
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
# Prisma -
|
|
1
|
+
# Prisma - 스키마 정의 (Multi-File)
|
|
2
2
|
|
|
3
|
-
## ⚠️
|
|
3
|
+
## ⚠️ 필수 규칙
|
|
4
4
|
|
|
5
|
-
1. **
|
|
6
|
-
2.
|
|
5
|
+
1. **Multi-File 구조** 사용
|
|
6
|
+
2. **모든 요소에 한글 주석** (파일, 모델, 필드, enum)
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## 구조
|
|
9
9
|
|
|
10
10
|
```
|
|
11
11
|
prisma/schema/
|
|
12
12
|
├── +base.prisma # datasource, generator
|
|
13
|
-
├── +enum.prisma #
|
|
14
|
-
├── user.prisma # User
|
|
15
|
-
└── post.prisma # Post
|
|
13
|
+
├── +enum.prisma # 모든 enum
|
|
14
|
+
├── user.prisma # User 모델
|
|
15
|
+
└── post.prisma # Post 모델
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
##
|
|
18
|
+
## 예시
|
|
19
19
|
|
|
20
20
|
```prisma
|
|
21
21
|
// +base.prisma
|
|
@@ -31,24 +31,24 @@ generator client {
|
|
|
31
31
|
|
|
32
32
|
// +enum.prisma
|
|
33
33
|
enum Role {
|
|
34
|
-
USER //
|
|
35
|
-
ADMIN //
|
|
34
|
+
USER // 일반 사용자
|
|
35
|
+
ADMIN // 관리자
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
// user.prisma
|
|
39
39
|
model User {
|
|
40
40
|
id Int @id @default(autoincrement())
|
|
41
|
-
email String @unique //
|
|
42
|
-
name String? //
|
|
41
|
+
email String @unique // 로그인 이메일
|
|
42
|
+
name String? // 표시 이름
|
|
43
43
|
role Role @default(USER)
|
|
44
|
-
posts Post[] //
|
|
45
|
-
profile Profile? //
|
|
44
|
+
posts Post[] // 작성 게시글 (1:N)
|
|
45
|
+
profile Profile? // 프로필 (1:1)
|
|
46
46
|
createdAt DateTime @default(now())
|
|
47
47
|
updatedAt DateTime @updatedAt
|
|
48
48
|
}
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
##
|
|
51
|
+
## 관계 유형
|
|
52
52
|
|
|
53
53
|
```prisma
|
|
54
54
|
// 1:1
|
|
@@ -64,11 +64,11 @@ model Post {
|
|
|
64
64
|
authorId Int
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
// M:N (
|
|
67
|
+
// M:N (암묵적)
|
|
68
68
|
model Post { categories Category[] }
|
|
69
69
|
model Category { posts Post[] }
|
|
70
70
|
|
|
71
|
-
// M:N (
|
|
71
|
+
// M:N (명시적)
|
|
72
72
|
model CategoriesOnPosts {
|
|
73
73
|
post Post @relation(fields: [postId], references: [id])
|
|
74
74
|
postId Int
|
|
@@ -78,21 +78,21 @@ model CategoriesOnPosts {
|
|
|
78
78
|
}
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
##
|
|
81
|
+
## 기타
|
|
82
82
|
|
|
83
83
|
```prisma
|
|
84
|
-
//
|
|
84
|
+
// 선택적 관계
|
|
85
85
|
author User? @relation(fields: [authorId], references: [id])
|
|
86
86
|
authorId Int?
|
|
87
87
|
|
|
88
|
-
//
|
|
88
|
+
// 인덱스
|
|
89
89
|
@@index([authorId])
|
|
90
90
|
@@index([createdAt])
|
|
91
91
|
|
|
92
|
-
//
|
|
92
|
+
// 복합 키
|
|
93
93
|
@@id([postId, tagId])
|
|
94
94
|
|
|
95
|
-
//
|
|
95
|
+
// 매핑
|
|
96
96
|
@map("user_id")
|
|
97
97
|
@@map("users")
|
|
98
98
|
```
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Prisma -
|
|
1
|
+
# Prisma - 설치 및 설정
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 설치
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
6
|
yarn add @prisma/client@7
|
|
@@ -8,15 +8,15 @@ yarn add -D prisma@7
|
|
|
8
8
|
npx prisma init
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
## v6 → v7
|
|
11
|
+
## v6 → v7 업그레이드
|
|
12
12
|
|
|
13
13
|
```prisma
|
|
14
|
-
// v6 (
|
|
14
|
+
// v6 (이전)
|
|
15
15
|
generator client {
|
|
16
16
|
provider = "prisma-client-js"
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
// v7 (
|
|
19
|
+
// v7 (필수)
|
|
20
20
|
generator client {
|
|
21
21
|
provider = "prisma-client"
|
|
22
22
|
output = "../generated/prisma"
|
|
@@ -34,7 +34,7 @@ export const prisma = globalForPrisma.prisma ?? new PrismaClient({ log: ['query'
|
|
|
34
34
|
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
## TanStack Start
|
|
37
|
+
## TanStack Start 연동
|
|
38
38
|
|
|
39
39
|
```typescript
|
|
40
40
|
import { createServerFn } from '@tanstack/react-start'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# Prisma -
|
|
1
|
+
# Prisma - 트랜잭션
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 배열 기반 트랜잭션
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
하나라도 실패하면 모두 롤백.
|
|
6
6
|
|
|
7
7
|
```typescript
|
|
8
8
|
const deletePosts = prisma.post.deleteMany({ where: { authorId: 7 } })
|
|
@@ -10,9 +10,9 @@ const deleteUser = prisma.user.delete({ where: { id: 7 } })
|
|
|
10
10
|
await prisma.$transaction([deletePosts, deleteUser])
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
##
|
|
13
|
+
## 인터랙티브 트랜잭션
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
복잡한 로직, 조건부 처리.
|
|
16
16
|
|
|
17
17
|
```typescript
|
|
18
18
|
const result = await prisma.$transaction(async (tx) => {
|
|
@@ -26,17 +26,17 @@ const result = await prisma.$transaction(async (tx) => {
|
|
|
26
26
|
})
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
##
|
|
29
|
+
## 옵션
|
|
30
30
|
|
|
31
31
|
```typescript
|
|
32
32
|
await prisma.$transaction(async (tx) => { ... }, {
|
|
33
|
-
maxWait: 5000, //
|
|
34
|
-
timeout: 10000, //
|
|
33
|
+
maxWait: 5000, // 최대 대기 (ms)
|
|
34
|
+
timeout: 10000, // 타임아웃 (ms)
|
|
35
35
|
isolationLevel: 'Serializable', // ReadUncommitted | ReadCommitted | RepeatableRead | Serializable
|
|
36
36
|
})
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
##
|
|
39
|
+
## 에러 처리
|
|
40
40
|
|
|
41
41
|
```typescript
|
|
42
42
|
try {
|
|
@@ -45,6 +45,6 @@ try {
|
|
|
45
45
|
if (someCondition) throw new Error('Rollback')
|
|
46
46
|
})
|
|
47
47
|
} catch (error) {
|
|
48
|
-
//
|
|
48
|
+
// 전체 롤백됨
|
|
49
49
|
}
|
|
50
50
|
```
|
|
@@ -40,12 +40,12 @@ const mutation = useMutation({
|
|
|
40
40
|
},
|
|
41
41
|
})
|
|
42
42
|
|
|
43
|
-
//
|
|
43
|
+
// 설정
|
|
44
44
|
const queryClient = new QueryClient({
|
|
45
45
|
defaultOptions: {
|
|
46
46
|
queries: {
|
|
47
|
-
staleTime: 1000 * 60 * 5, // 5
|
|
48
|
-
gcTime: 1000 * 60 * 30, // 30
|
|
47
|
+
staleTime: 1000 * 60 * 5, // 5분
|
|
48
|
+
gcTime: 1000 * 60 * 30, // 30분
|
|
49
49
|
retry: 3,
|
|
50
50
|
},
|
|
51
51
|
},
|
|
@@ -58,9 +58,9 @@ const App = () => (
|
|
|
58
58
|
)
|
|
59
59
|
|
|
60
60
|
// Query Keys
|
|
61
|
-
['todos'] //
|
|
62
|
-
['todo', { id: 5 }] //
|
|
63
|
-
['todos', 'list', { filters }] //
|
|
61
|
+
['todos'] // 단순
|
|
62
|
+
['todo', { id: 5 }] // 파라미터
|
|
63
|
+
['todos', 'list', { filters }] // 계층적
|
|
64
64
|
```
|
|
65
65
|
|
|
66
66
|
</quick_reference>
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
# TanStack Query - Query
|
|
1
|
+
# TanStack Query - Query 무효화
|
|
2
2
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
5
5
|
```typescript
|
|
6
6
|
const queryClient = useQueryClient()
|
|
7
7
|
|
|
8
|
-
//
|
|
8
|
+
// 단일
|
|
9
9
|
queryClient.invalidateQueries({ queryKey: ['todos'] })
|
|
10
10
|
|
|
11
|
-
//
|
|
11
|
+
// 다중
|
|
12
12
|
await Promise.all([
|
|
13
13
|
queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
|
14
14
|
queryClient.invalidateQueries({ queryKey: ['reminders'] }),
|
|
15
15
|
])
|
|
16
16
|
|
|
17
|
-
//
|
|
17
|
+
// 전체
|
|
18
18
|
queryClient.invalidateQueries()
|
|
19
19
|
|
|
20
|
-
//
|
|
20
|
+
// 옵션
|
|
21
21
|
queryClient.invalidateQueries({
|
|
22
22
|
queryKey: ['posts'],
|
|
23
|
-
exact: true, //
|
|
23
|
+
exact: true, // 정확한 키 매칭만
|
|
24
24
|
refetchType: 'active', // 'active' | 'inactive' | 'all' | 'none'
|
|
25
25
|
})
|
|
26
26
|
|
|
27
|
-
// Query
|
|
28
|
-
queryClient.invalidateQueries({ queryKey: ['todos'] }) // prefix
|
|
29
|
-
queryClient.invalidateQueries({ queryKey: ['todos', 'list'], exact: true }) //
|
|
27
|
+
// Query Key 매칭
|
|
28
|
+
queryClient.invalidateQueries({ queryKey: ['todos'] }) // prefix 매칭
|
|
29
|
+
queryClient.invalidateQueries({ queryKey: ['todos', 'list'], exact: true }) // 정확한 매칭
|
|
30
30
|
|
|
31
|
-
//
|
|
31
|
+
// Mutation과 함께
|
|
32
32
|
useMutation({
|
|
33
33
|
mutationFn: addTodo,
|
|
34
34
|
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
|
35
|
-
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }), //
|
|
35
|
+
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }), // 성공/실패 무관
|
|
36
36
|
})
|
|
37
37
|
|
|
38
|
-
//
|
|
39
|
-
queryClient.setQueryData(['todos'], (old) => [...old, newTodo]) //
|
|
40
|
-
queryClient.invalidateQueries({ queryKey: ['todos'] }) //
|
|
38
|
+
// 직접 업데이트 vs 무효화
|
|
39
|
+
queryClient.setQueryData(['todos'], (old) => [...old, newTodo]) // 더 빠름
|
|
40
|
+
queryClient.invalidateQueries({ queryKey: ['todos'] }) // 서버 데이터 보장
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
</patterns>
|
|
44
44
|
|
|
45
45
|
<options>
|
|
46
46
|
|
|
47
|
-
| refetchType |
|
|
48
|
-
|
|
49
|
-
| active |
|
|
50
|
-
| inactive |
|
|
51
|
-
| all |
|
|
52
|
-
| none |
|
|
47
|
+
| refetchType | 설명 |
|
|
48
|
+
|-------------|------|
|
|
49
|
+
| active | 렌더링 중인 쿼리만 재조회 (기본) |
|
|
50
|
+
| inactive | 비활성 쿼리만 |
|
|
51
|
+
| all | 모든 매칭 쿼리 |
|
|
52
|
+
| none | 무효화만, 재조회 안함 |
|
|
53
53
|
|
|
54
54
|
</options>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
|
-
//
|
|
6
|
+
// 추가
|
|
7
7
|
useMutation({
|
|
8
8
|
mutationFn: addTodo,
|
|
9
9
|
onMutate: async (newTodo) => {
|
|
@@ -20,7 +20,7 @@ useMutation({
|
|
|
20
20
|
},
|
|
21
21
|
})
|
|
22
22
|
|
|
23
|
-
//
|
|
23
|
+
// 삭제
|
|
24
24
|
useMutation({
|
|
25
25
|
mutationFn: deleteTodo,
|
|
26
26
|
onMutate: async (todoId) => {
|
|
@@ -37,7 +37,7 @@ useMutation({
|
|
|
37
37
|
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
|
38
38
|
})
|
|
39
39
|
|
|
40
|
-
//
|
|
40
|
+
// 토글
|
|
41
41
|
useMutation({
|
|
42
42
|
mutationFn: toggleTodo,
|
|
43
43
|
onMutate: async (todoId) => {
|
|
@@ -56,7 +56,7 @@ useMutation({
|
|
|
56
56
|
onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
|
|
57
57
|
})
|
|
58
58
|
|
|
59
|
-
//
|
|
59
|
+
// 단일 항목
|
|
60
60
|
useMutation({
|
|
61
61
|
mutationFn: updateTodo,
|
|
62
62
|
onMutate: async (newTodo) => {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
|
-
//
|
|
6
|
+
// 기본
|
|
7
7
|
const queryClient = useQueryClient()
|
|
8
8
|
const mutation = useMutation({
|
|
9
9
|
mutationFn: postTodo,
|
|
@@ -11,12 +11,12 @@ const mutation = useMutation({
|
|
|
11
11
|
})
|
|
12
12
|
mutation.mutate({ title: 'New Todo' })
|
|
13
13
|
|
|
14
|
-
//
|
|
14
|
+
// 콜백
|
|
15
15
|
useMutation({
|
|
16
16
|
mutationFn: updateTodo,
|
|
17
17
|
onMutate: async (newTodo) => {
|
|
18
|
-
//
|
|
19
|
-
return { previousData } //
|
|
18
|
+
// mutation 시작 전 (optimistic update용)
|
|
19
|
+
return { previousData } // context로 전달
|
|
20
20
|
},
|
|
21
21
|
onSuccess: (data, variables, context) => {},
|
|
22
22
|
onError: (error, variables, context) => {},
|
|
@@ -35,7 +35,7 @@ try {
|
|
|
35
35
|
const result = await mutation.mutateAsync(data)
|
|
36
36
|
} catch (error) { ... }
|
|
37
37
|
|
|
38
|
-
//
|
|
38
|
+
// 캐시 업데이트
|
|
39
39
|
useMutation({
|
|
40
40
|
mutationFn: patchTodo,
|
|
41
41
|
onSuccess: (data) => {
|
|
@@ -49,15 +49,15 @@ useMutation({
|
|
|
49
49
|
|
|
50
50
|
<returns>
|
|
51
51
|
|
|
52
|
-
|
|
|
53
|
-
|
|
54
|
-
| data |
|
|
55
|
-
| error |
|
|
56
|
-
| isPending |
|
|
57
|
-
| isSuccess/isError |
|
|
58
|
-
| mutate |
|
|
59
|
-
| mutateAsync |
|
|
60
|
-
| reset |
|
|
61
|
-
| variables |
|
|
52
|
+
| 속성 | 설명 |
|
|
53
|
+
|------|------|
|
|
54
|
+
| data | mutation 결과 |
|
|
55
|
+
| error | 에러 객체 |
|
|
56
|
+
| isPending | 실행 중 |
|
|
57
|
+
| isSuccess/isError | 상태 |
|
|
58
|
+
| mutate | 실행 (비동기) |
|
|
59
|
+
| mutateAsync | 실행 (Promise) |
|
|
60
|
+
| reset | 상태 초기화 |
|
|
61
|
+
| variables | 전달된 변수 |
|
|
62
62
|
|
|
63
63
|
</returns>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
|
-
//
|
|
6
|
+
// 기본
|
|
7
7
|
const { data, isLoading, error } = useQuery({
|
|
8
8
|
queryKey: ['todos'],
|
|
9
9
|
queryFn: getTodos,
|
|
@@ -11,28 +11,28 @@ const { data, isLoading, error } = useQuery({
|
|
|
11
11
|
if (isLoading) return <div>Loading...</div>
|
|
12
12
|
if (error) return <div>Error: {error.message}</div>
|
|
13
13
|
|
|
14
|
-
//
|
|
14
|
+
// 옵션
|
|
15
15
|
useQuery({
|
|
16
16
|
queryKey: ['todos'],
|
|
17
17
|
queryFn: fetchTodos,
|
|
18
|
-
staleTime: 1000 * 60 * 5, //
|
|
19
|
-
gcTime: 1000 * 60 * 30, //
|
|
20
|
-
refetchOnWindowFocus: true, //
|
|
21
|
-
refetchInterval: 1000 * 60, //
|
|
22
|
-
retry: 3, //
|
|
23
|
-
enabled: !!userId, //
|
|
24
|
-
initialData: [], //
|
|
25
|
-
select: (data) => data.filter(t => t.done), //
|
|
18
|
+
staleTime: 1000 * 60 * 5, // fresh 유지 시간
|
|
19
|
+
gcTime: 1000 * 60 * 30, // 가비지 컬렉션 시간
|
|
20
|
+
refetchOnWindowFocus: true, // 포커스 시 리페치
|
|
21
|
+
refetchInterval: 1000 * 60, // 자동 리페치 간격
|
|
22
|
+
retry: 3, // 재시도 횟수
|
|
23
|
+
enabled: !!userId, // 조건부 실행
|
|
24
|
+
initialData: [], // 초기 데이터
|
|
25
|
+
select: (data) => data.filter(t => t.done), // 데이터 변환
|
|
26
26
|
})
|
|
27
27
|
|
|
28
|
-
//
|
|
28
|
+
// 파라미터
|
|
29
29
|
useQuery({
|
|
30
30
|
queryKey: ['todo', todoId],
|
|
31
31
|
queryFn: () => fetchTodoById(todoId),
|
|
32
32
|
enabled: !!todoId,
|
|
33
33
|
})
|
|
34
34
|
|
|
35
|
-
//
|
|
35
|
+
// 의존적 쿼리
|
|
36
36
|
const { data: user } = useQuery({ queryKey: ['user', userId], queryFn: ... })
|
|
37
37
|
const { data: posts } = useQuery({
|
|
38
38
|
queryKey: ['posts', user?.id],
|
|
@@ -40,11 +40,11 @@ const { data: posts } = useQuery({
|
|
|
40
40
|
enabled: !!user?.id,
|
|
41
41
|
})
|
|
42
42
|
|
|
43
|
-
//
|
|
43
|
+
// 병렬
|
|
44
44
|
const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
|
|
45
45
|
const postsQuery = useQuery({ queryKey: ['posts'], queryFn: fetchPosts })
|
|
46
46
|
|
|
47
|
-
//
|
|
47
|
+
// 동적 병렬
|
|
48
48
|
const userQueries = useQueries({
|
|
49
49
|
queries: userIds.map((id) => ({
|
|
50
50
|
queryKey: ['user', id],
|
|
@@ -57,14 +57,14 @@ const userQueries = useQueries({
|
|
|
57
57
|
|
|
58
58
|
<returns>
|
|
59
59
|
|
|
60
|
-
|
|
|
61
|
-
|
|
62
|
-
| data |
|
|
63
|
-
| error |
|
|
64
|
-
| isLoading |
|
|
65
|
-
| isFetching |
|
|
66
|
-
| isError/isSuccess |
|
|
67
|
-
| refetch |
|
|
60
|
+
| 속성 | 설명 |
|
|
61
|
+
|------|------|
|
|
62
|
+
| data | 쿼리 결과 |
|
|
63
|
+
| error | 에러 객체 |
|
|
64
|
+
| isLoading | 첫 로딩 중 |
|
|
65
|
+
| isFetching | 백그라운드 페칭 중 |
|
|
66
|
+
| isError/isSuccess | 상태 |
|
|
67
|
+
| refetch | 수동 리페치 |
|
|
68
68
|
| status | 'pending' \| 'error' \| 'success' |
|
|
69
69
|
|
|
70
70
|
</returns>
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
# Zod -
|
|
1
|
+
# Zod - 복합 타입
|
|
2
2
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
5
5
|
```typescript
|
|
6
|
-
//
|
|
6
|
+
// 객체
|
|
7
7
|
const UserSchema = z.object({
|
|
8
8
|
name: z.string(),
|
|
9
9
|
email: z.email(),
|
|
10
10
|
age: z.number().optional(),
|
|
11
11
|
})
|
|
12
12
|
|
|
13
|
-
UserSchema.partial() //
|
|
14
|
-
UserSchema.required() //
|
|
15
|
-
UserSchema.pick({ name: true }) //
|
|
16
|
-
UserSchema.omit({ email: true }) //
|
|
13
|
+
UserSchema.partial() // 모든 필드 optional
|
|
14
|
+
UserSchema.required() // 모든 필드 required
|
|
15
|
+
UserSchema.pick({ name: true }) // 특정 필드만
|
|
16
|
+
UserSchema.omit({ email: true }) // 특정 필드 제외
|
|
17
17
|
UserSchema.extend({ role: z.enum(['admin', 'user']) })
|
|
18
18
|
UserSchema.merge(AnotherSchema)
|
|
19
19
|
|
|
20
|
-
z.strictObject({ name: z.string() }) // v4:
|
|
21
|
-
z.looseObject({ name: z.string() }) // v4:
|
|
20
|
+
z.strictObject({ name: z.string() }) // v4: 추가 키 에러
|
|
21
|
+
z.looseObject({ name: z.string() }) // v4: 추가 키 통과
|
|
22
22
|
|
|
23
|
-
//
|
|
23
|
+
// 배열/튜플
|
|
24
24
|
z.array(z.string())
|
|
25
25
|
z.array(z.number()).min(1).max(10).length(5).nonempty()
|
|
26
26
|
z.tuple([z.string(), z.number()]) // [string, number]
|
|
27
27
|
|
|
28
|
-
//
|
|
28
|
+
// 유니온
|
|
29
29
|
z.union([z.string(), z.number()])
|
|
30
30
|
z.string().or(z.number())
|
|
31
31
|
|
|
@@ -46,7 +46,7 @@ z.record(z.string(), z.object({ name: z.string() })) // { [key: string]: { name
|
|
|
46
46
|
z.map(z.string(), z.number()) // Map<string, number>
|
|
47
47
|
z.set(z.number()) // Set<number>
|
|
48
48
|
|
|
49
|
-
//
|
|
49
|
+
// 재귀
|
|
50
50
|
type Json = string | number | boolean | null | { [key: string]: Json } | Json[]
|
|
51
51
|
|
|
52
52
|
const jsonSchema: z.ZodType<Json> = z.lazy(() =>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<quick_reference>
|
|
12
12
|
|
|
13
13
|
```typescript
|
|
14
|
-
//
|
|
14
|
+
// 기본
|
|
15
15
|
const schema = z.object({
|
|
16
16
|
email: z.email(), // v4!
|
|
17
17
|
name: z.string().min(1).trim(),
|
|
@@ -20,7 +20,7 @@ const schema = z.object({
|
|
|
20
20
|
})
|
|
21
21
|
type Input = z.infer<typeof schema>
|
|
22
22
|
|
|
23
|
-
schema.parse(data) //
|
|
23
|
+
schema.parse(data) // 실패 시 throw
|
|
24
24
|
schema.safeParse(data) // { success, data/error }
|
|
25
25
|
|
|
26
26
|
// TanStack Start
|
|
@@ -34,7 +34,7 @@ export const createUser = createServerFn({ method: 'POST' })
|
|
|
34
34
|
<v4_changes>
|
|
35
35
|
|
|
36
36
|
```typescript
|
|
37
|
-
// ✅ v4
|
|
37
|
+
// ✅ v4 새 API
|
|
38
38
|
z.email() z.url() z.uuid()
|
|
39
39
|
z.iso.date() z.iso.datetime() z.iso.duration()
|
|
40
40
|
z.stringbool() // "true"/"yes"/"1" → true
|
|
@@ -42,13 +42,13 @@ z.stringbool() // "true"/"yes"/"1" → true
|
|
|
42
42
|
// ❌ v3 deprecated
|
|
43
43
|
z.string().email() z.string().url()
|
|
44
44
|
|
|
45
|
-
//
|
|
45
|
+
// 변경사항
|
|
46
46
|
z.string().min(5, { error: "Too short." }) // message → error
|
|
47
|
-
z.strictObject({ name: z.string() }) //
|
|
48
|
-
z.looseObject({ name: z.string() }) //
|
|
49
|
-
z.string().refine(val => val.includes("@")).min(5) // refinement
|
|
47
|
+
z.strictObject({ name: z.string() }) // 추가 키 에러
|
|
48
|
+
z.looseObject({ name: z.string() }) // 추가 키 통과
|
|
49
|
+
z.string().refine(val => val.includes("@")).min(5) // refinement 체이닝
|
|
50
50
|
|
|
51
|
-
//
|
|
51
|
+
// 템플릿 리터럴
|
|
52
52
|
const css = z.templateLiteral([z.number(), z.enum(["px", "em", "rem"])])
|
|
53
53
|
// `${number}px` | `${number}em` | `${number}rem`
|
|
54
54
|
```
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Zod -
|
|
1
|
+
# Zod - 변환
|
|
2
2
|
|
|
3
3
|
<patterns>
|
|
4
4
|
|
|
@@ -10,7 +10,7 @@ stringToLength.parse('hello') // => 5
|
|
|
10
10
|
type In = z.input<typeof stringToLength> // string
|
|
11
11
|
type Out = z.output<typeof stringToLength> // number
|
|
12
12
|
|
|
13
|
-
// Pipe (
|
|
13
|
+
// Pipe (검증 후 변환)
|
|
14
14
|
const stringToNumber = z.string()
|
|
15
15
|
.transform((val) => parseInt(val, 10))
|
|
16
16
|
.pipe(z.number().min(0).max(100))
|
|
@@ -18,20 +18,20 @@ const stringToNumber = z.string()
|
|
|
18
18
|
stringToNumber.parse('50') // => 50
|
|
19
19
|
stringToNumber.parse('150') // throws
|
|
20
20
|
|
|
21
|
-
// Coerce (
|
|
22
|
-
z.coerce.string() //
|
|
23
|
-
z.coerce.number() //
|
|
24
|
-
z.coerce.boolean() //
|
|
25
|
-
z.coerce.date() //
|
|
26
|
-
z.coerce.bigint() //
|
|
21
|
+
// Coerce (강제 변환)
|
|
22
|
+
z.coerce.string() // 모든 값 → 문자열
|
|
23
|
+
z.coerce.number() // 모든 값 → 숫자
|
|
24
|
+
z.coerce.boolean() // 모든 값 → 불리언
|
|
25
|
+
z.coerce.date() // 모든 값 → 날짜
|
|
26
|
+
z.coerce.bigint() // 모든 값 → BigInt
|
|
27
27
|
|
|
28
28
|
z.coerce.number().parse("42") // => 42
|
|
29
29
|
z.coerce.date().parse("2021-01-01") // => Date
|
|
30
30
|
|
|
31
|
-
// v4:
|
|
31
|
+
// v4: 입력 타입이 unknown으로 변경
|
|
32
32
|
type In = z.input<typeof z.coerce.string()> // unknown
|
|
33
33
|
|
|
34
|
-
// v4
|
|
34
|
+
// v4 환경변수 불리언
|
|
35
35
|
z.stringbool() // "true"/"yes"/"1" → true, "false"/"no"/"0" → false
|
|
36
36
|
|
|
37
37
|
// Preprocess
|
|
@@ -40,7 +40,7 @@ const trimmed = z.preprocess(
|
|
|
40
40
|
z.string()
|
|
41
41
|
)
|
|
42
42
|
|
|
43
|
-
//
|
|
43
|
+
// 입력/출력 타입 분리
|
|
44
44
|
const Schema = z.object({
|
|
45
45
|
createdAt: z.string().transform((str) => new Date(str)),
|
|
46
46
|
})
|