@kood/claude-code 0.4.1 → 0.5.0

package/templates/.claude/skills/nextjs-react-best-practices/rules/rendering-svg-precision.md

@@ -5,23 +5,23 @@ impactDescription: reduces file size
 tags: rendering, svg, optimization, svgo
 ---
 
-## Optimize SVG Precision
+## SVG 정밀도 최적화
 
-Reduce SVG coordinate precision to decrease file size. The optimal precision depends on the viewBox size, but in general reducing precision should be considered.
+SVG 좌표 정밀도를 줄여 파일 크기를 감소시키세요. 최적의 정밀도는 viewBox 크기에 따라 다르지만, 일반적으로 정밀도 감소를 고려해야 합니다.
 
-**Incorrect (excessive precision):**
+**❌ 잘못된 예시 (과도한 정밀도):**
 
 ```svg
 <path d="M 10.293847 20.847362 L 30.938472 40.192837" />
 ```
 
-**Correct (1 decimal place):**
+**✅ 올바른 예시 (소수점 1자리):**
 
 ```svg
 <path d="M 10.3 20.8 L 30.9 40.2" />
 ```
 
-**Automate with SVGO:**
+**SVGO로 자동화:**
 
 ```bash
 npx svgo --precision=1 --multipass icon.svg

package/templates/.claude/skills/nextjs-react-best-practices/rules/rerender-defer-reads.md

@@ -5,11 +5,11 @@ impactDescription: avoids unnecessary subscriptions
 tags: rerender, searchParams, localStorage, optimization
 ---
 
-## Defer State Reads to Usage Point
+## 상태 읽기를 사용 시점으로 지연
 
-Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.
+콜백 내부에서만 읽는 경우 동적 상태(searchParams, localStorage)를 구독하지 마세요.
 
-**Incorrect (subscribes to all searchParams changes):**
+**❌ 잘못된 예시 (모든 searchParams 변경에 구독):**
 
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {
@@ -24,7 +24,7 @@ function ShareButton({ chatId }: { chatId: string }) {
 }
 ```
 
-**Correct (reads on demand, no subscription):**
+**✅ 올바른 예시 (필요할 때만 읽기, 구독 없음):**
 
 ```tsx
 function ShareButton({ chatId }: { chatId: string }) {

package/templates/.claude/skills/nextjs-react-best-practices/rules/rerender-dependencies.md

@@ -5,11 +5,11 @@ impactDescription: minimizes effect re-runs
 tags: rerender, useEffect, dependencies, optimization
 ---
 
-## Narrow Effect Dependencies
+## Effect 의존성 좁히기
 
-Specify primitive dependencies instead of objects to minimize effect re-runs.
+객체 대신 원시 타입 의존성을 지정하여 effect 재실행을 최소화하세요.
 
-**Incorrect (re-runs on any user field change):**
+**❌ 잘못된 예시 (user의 모든 필드 변경 시 재실행):**
 
 ```tsx
 useEffect(() => {
@@ -17,7 +17,7 @@ useEffect(() => {
 }, [user])
 ```
 
-**Correct (re-runs only when id changes):**
+**✅ 올바른 예시 (id 변경 시에만 재실행):**
 
 ```tsx
 useEffect(() => {
@@ -25,17 +25,17 @@ useEffect(() => {
 }, [user.id])
 ```
 
-**For derived state, compute outside effect:**
+**파생 상태의 경우, effect 밖에서 계산:**
 
 ```tsx
-// Incorrect: runs on width=767, 766, 765...
+// ❌ 잘못된 예시: width=767, 766, 765... 모든 변경 시 실행
 useEffect(() => {
   if (width < 768) {
     enableMobileMode()
   }
 }, [width])
 
-// Correct: runs only on boolean transition
+// ✅ 올바른 예시: boolean 전환 시에만 실행
 const isMobile = width < 768
 useEffect(() => {
   if (isMobile) {

package/templates/.claude/skills/nextjs-react-best-practices/rules/rerender-derived-state.md

@@ -5,21 +5,21 @@ impactDescription: reduces re-render frequency
 tags: rerender, derived-state, media-query, optimization
 ---
 
-## Subscribe to Derived State
+## 파생 상태 구독
 
-Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
+연속적인 값 대신 파생된 boolean 상태를 구독하여 리렌더링 빈도를 줄이세요.
 
-**Incorrect (re-renders on every pixel change):**
+**❌ 잘못된 예시 (픽셀 변경마다 리렌더링):**
 
 ```tsx
 function Sidebar() {
-  const width = useWindowWidth()  // updates continuously
+  const width = useWindowWidth()  // 연속적으로 업데이트
   const isMobile = width < 768
   return <nav className={isMobile ? 'mobile' : 'desktop'}>
 }
 ```
 
-**Correct (re-renders only when boolean changes):**
+**✅ 올바른 예시 (boolean 변경 시에만 리렌더링):**
 
 ```tsx
 function Sidebar() {

package/templates/.claude/skills/nextjs-react-best-practices/rules/rerender-functional-setstate.md

@@ -5,70 +5,70 @@ impactDescription: prevents stale closures and unnecessary callback recreations
 tags: react, hooks, useState, useCallback, callbacks, closures
 ---
 
-## Use Functional setState Updates
+## 함수형 setState 업데이트 사용
 
-When updating state based on the current state value, use the functional update form of setState instead of directly referencing the state variable. This prevents stale closures, eliminates unnecessary dependencies, and creates stable callback references.
+현재 상태 값을 기반으로 상태를 업데이트할 때, 상태 변수를 직접 참조하는 대신 setState의 함수형 업데이트 형태를 사용하세요. 이는 오래된 클로저를 방지하고, 불필요한 의존성을 제거하며, 안정적인 콜백 참조를 생성합니다.
 
-**Incorrect (requires state as dependency):**
+**❌ 잘못된 예시 (상태를 의존성으로 요구):**
 
 ```tsx
 function TodoList() {
   const [items, setItems] = useState(initialItems)
-  
-  // Callback must depend on items, recreated on every items change
+
+  // 콜백이 items에 의존해야 하며, items 변경마다 재생성됨
   const addItems = useCallback((newItems: Item[]) => {
     setItems([...items, ...newItems])
-  }, [items])  // ❌ items dependency causes recreations
-  
-  // Risk of stale closure if dependency is forgotten
+  }, [items])  // ❌ items 의존성이 재생성을 유발
+
+  // 의존성을 잊으면 오래된 클로저 위험
   const removeItem = useCallback((id: string) => {
     setItems(items.filter(item => item.id !== id))
-  }, [])  // ❌ Missing items dependency - will use stale items!
-  
+  }, [])  // ❌ items 의존성 누락 - 오래된 items를 사용!
+
   return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
 }
 ```
 
-The first callback is recreated every time `items` changes, which can cause child components to re-render unnecessarily. The second callback has a stale closure bug—it will always reference the initial `items` value.
+첫 번째 콜백은 `items`가 변경될 때마다 재생성되어 자식 컴포넌트의 불필요한 리렌더링을 유발할 수 있습니다. 두 번째 콜백은 오래된 클로저 버그가 있습니다—항상 초기 `items` 값을 참조합니다.
 
-**Correct (stable callbacks, no stale closures):**
+**✅ 올바른 예시 (안정적인 콜백, 오래된 클로저 없음):**
 
 ```tsx
 function TodoList() {
   const [items, setItems] = useState(initialItems)
-  
-  // Stable callback, never recreated
+
+  // 안정적인 콜백, 재생성 안 됨
   const addItems = useCallback((newItems: Item[]) => {
     setItems(curr => [...curr, ...newItems])
-  }, [])  // ✅ No dependencies needed
-  
-  // Always uses latest state, no stale closure risk
+  }, [])  // ✅ 의존성 불필요
+
+  // 항상 최신 상태 사용, 오래된 클로저 위험 없음
   const removeItem = useCallback((id: string) => {
     setItems(curr => curr.filter(item => item.id !== id))
-  }, [])  // ✅ Safe and stable
-  
+  }, [])  // ✅ 안전하고 안정적
+
   return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
 }
 ```
 
-**Benefits:**
+**장점:**
 
-1. **Stable callback references** - Callbacks don't need to be recreated when state changes
-2. **No stale closures** - Always operates on the latest state value
-3. **Fewer dependencies** - Simplifies dependency arrays and reduces memory leaks
-4. **Prevents bugs** - Eliminates the most common source of React closure bugs
+1. **안정적인 콜백 참조** - 상태 변경 시 콜백을 재생성할 필요가 없음
+2. **오래된 클로저 없음** - 항상 최신 상태 값에서 작동
+3. **더 적은 의존성** - 의존성 배열을 단순화하고 메모리 누수 감소
+4. **버그 방지** - React 클로저 버그의 가장 일반적인 원인 제거
 
-**When to use functional updates:**
+**함수형 업데이트를 사용해야 하는 경우:**
 
-- Any setState that depends on the current state value
-- Inside useCallback/useMemo when state is needed
-- Event handlers that reference state
-- Async operations that update state
+- 현재 상태 값에 의존하는 모든 setState
+- 상태가 필요한 경우 useCallback/useMemo 내부
+- 상태를 참조하는 이벤트 핸들러
+- 상태를 업데이트하는 비동기 작업
 
-**When direct updates are fine:**
+**직접 업데이트가 괜찮은 경우:**
 
-- Setting state to a static value: `setCount(0)`
-- Setting state from props/arguments only: `setName(newName)`
-- State doesn't depend on previous value
+- 정적 값으로 상태 설정: `setCount(0)`
+- props/인수로만 상태 설정: `setName(newName)`
+- 상태가 이전 값에 의존하지 않음
 
-**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler can automatically optimize some cases, but functional updates are still recommended for correctness and to prevent stale closure bugs.
+**참고:** 프로젝트에 [React Compiler](https://react.dev/learn/react-compiler)가 활성화되어 있다면, 컴파일러가 일부 케이스를 자동으로 최적화할 수 있지만, 정확성을 위해 그리고 오래된 클로저 버그를 방지하기 위해 함수형 업데이트를 여전히 권장합니다.

package/templates/.claude/skills/nextjs-react-best-practices/rules/rerender-lazy-state-init.md

@@ -5,54 +5,54 @@ impactDescription: wasted computation on every render
 tags: react, hooks, useState, performance, initialization
 ---
 
-## Use Lazy State Initialization
+## 지연 상태 초기화 사용
 
-Pass a function to `useState` for expensive initial values. Without the function form, the initializer runs on every render even though the value is only used once.
+비용이 큰 초기값에는 `useState`에 함수를 전달하세요. 함수 형태가 없으면 초기화 함수가 한 번만 사용되더라도 모든 렌더링마다 실행됩니다.
 
-**Incorrect (runs on every render):**
+**❌ 잘못된 예시 (모든 렌더링마다 실행):**
 
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
-  // buildSearchIndex() runs on EVERY render, even after initialization
+  // buildSearchIndex()가 초기화 후에도 모든 렌더링마다 실행됨
   const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
   const [query, setQuery] = useState('')
-  
-  // When query changes, buildSearchIndex runs again unnecessarily
+
+  // query가 변경되면 buildSearchIndex가 불필요하게 다시 실행됨
   return <SearchResults index={searchIndex} query={query} />
 }
 
 function UserProfile() {
-  // JSON.parse runs on every render
+  // JSON.parse가 모든 렌더링마다 실행됨
   const [settings, setSettings] = useState(
     JSON.parse(localStorage.getItem('settings') || '{}')
   )
-  
+
   return <SettingsForm settings={settings} onChange={setSettings} />
 }
 ```
 
-**Correct (runs only once):**
+**✅ 올바른 예시 (한 번만 실행):**
 
 ```tsx
 function FilteredList({ items }: { items: Item[] }) {
-  // buildSearchIndex() runs ONLY on initial render
+  // buildSearchIndex()가 초기 렌더링에만 실행됨
   const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
   const [query, setQuery] = useState('')
-  
+
   return <SearchResults index={searchIndex} query={query} />
 }
 
 function UserProfile() {
-  // JSON.parse runs only on initial render
+  // JSON.parse가 초기 렌더링에만 실행됨
   const [settings, setSettings] = useState(() => {
     const stored = localStorage.getItem('settings')
     return stored ? JSON.parse(stored) : {}
   })
-  
+
   return <SettingsForm settings={settings} onChange={setSettings} />
 }
 ```
 
-Use lazy initialization when computing initial values from localStorage/sessionStorage, building data structures (indexes, maps), reading from the DOM, or performing heavy transformations.
+localStorage/sessionStorage에서 초기값을 계산하거나, 데이터 구조(인덱스, 맵)를 구축하거나, DOM에서 읽거나, 무거운 변환을 수행할 때 지연 초기화를 사용하세요.
 
-For simple primitives (`useState(0)`), direct references (`useState(props.value)`), or cheap literals (`useState({})`), the function form is unnecessary.
+단순 원시 타입(`useState(0)`), 직접 참조(`useState(props.value)`), 또는 저렴한 리터럴(`useState({})`)의 경우 함수 형태는 불필요합니다.

package/templates/.claude/skills/nextjs-react-best-practices/rules/rerender-memo.md

@@ -5,11 +5,11 @@ impactDescription: enables early returns
 tags: rerender, memo, useMemo, optimization
 ---
 
-## Extract to Memoized Components
+## 메모이제이션된 컴포넌트로 추출
 
-Extract expensive work into memoized components to enable early returns before computation.
+비용이 큰 작업을 메모이제이션된 컴포넌트로 추출하여 계산 전 조기 반환을 활성화하세요.
 
-**Incorrect (computes avatar even when loading):**
+**❌ 잘못된 예시 (로딩 중에도 avatar 계산):**
 
 ```tsx
 function Profile({ user, loading }: Props) {
@@ -23,7 +23,7 @@ function Profile({ user, loading }: Props) {
 }
 ```
 
-**Correct (skips computation when loading):**
+**✅ 올바른 예시 (로딩 중 계산 건너뛰기):**
 
 ```tsx
 const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
@@ -41,4 +41,4 @@ function Profile({ user, loading }: Props) {
 }
 ```
 
-**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is not necessary. The compiler automatically optimizes re-renders.
+**참고:** 프로젝트에 [React Compiler](https://react.dev/learn/react-compiler)가 활성화되어 있다면, `memo()`와 `useMemo()`를 사용한 수동 메모이제이션은 필요하지 않습니다. 컴파일러가 자동으로 리렌더링을 최적화합니다.

package/templates/.claude/skills/nextjs-react-best-practices/rules/rerender-transitions.md

@@ -5,11 +5,11 @@ impactDescription: maintains UI responsiveness
 tags: rerender, transitions, startTransition, performance
 ---
 
-## Use Transitions for Non-Urgent Updates
+## 긴급하지 않은 업데이트에 Transition 사용
 
-Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
+빈번하고 긴급하지 않은 상태 업데이트를 transition으로 표시하여 UI 응답성을 유지하세요.
 
-**Incorrect (blocks UI on every scroll):**
+**❌ 잘못된 예시 (모든 스크롤마다 UI 차단):**
 
 ```tsx
 function ScrollTracker() {
@@ -22,7 +22,7 @@ function ScrollTracker() {
 }
 ```
 
-**Correct (non-blocking updates):**
+**✅ 올바른 예시 (논블로킹 업데이트):**
 
 ```tsx
 import { startTransition } from 'react'

package/templates/.claude/skills/nextjs-react-best-practices/rules/server-after-nonblocking.md

@@ -5,23 +5,23 @@ impactDescription: faster response times
 tags: server, async, logging, analytics, side-effects
 ---
 
-## Use after() for Non-Blocking Operations
+## 논블로킹 작업을 위한 after() 사용
 
-Use Next.js's `after()` to schedule work that should execute after a response is sent. This prevents logging, analytics, and other side effects from blocking the response.
+Next.js의 `after()`를 사용하여 응답이 전송된 후 실행되어야 하는 작업을 예약하세요. 이를 통해 로깅, 분석, 기타 부수 효과가 응답을 차단하는 것을 방지할 수 있습니다.
 
-**Incorrect (blocks response):**
+**잘못된 예 (응답 차단):**
 
 ```tsx
 import { logUserAction } from '@/app/utils'
 
 export async function POST(request: Request) {
-  // Perform mutation
+  // 변경 수행
   await updateDatabase(request)
-  
-  // Logging blocks the response
+
+  // 로깅이 응답을 차단함
   const userAgent = request.headers.get('user-agent') || 'unknown'
   await logUserAction({ userAgent })
-  
+
   return new Response(JSON.stringify({ status: 'success' }), {
     status: 200,
     headers: { 'Content-Type': 'application/json' }
@@ -29,7 +29,7 @@ export async function POST(request: Request) {
 }
 ```
 
-**Correct (non-blocking):**
+**올바른 예 (논블로킹):**
 
 ```tsx
 import { after } from 'next/server'
@@ -37,17 +37,17 @@ import { headers, cookies } from 'next/headers'
 import { logUserAction } from '@/app/utils'
 
 export async function POST(request: Request) {
-  // Perform mutation
+  // 변경 수행
   await updateDatabase(request)
-  
-  // Log after response is sent
+
+  // 응답 전송 후 로깅
   after(async () => {
     const userAgent = (await headers()).get('user-agent') || 'unknown'
     const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
-    
+
     logUserAction({ sessionCookie, userAgent })
   })
-  
+
   return new Response(JSON.stringify({ status: 'success' }), {
     status: 200,
     headers: { 'Content-Type': 'application/json' }
@@ -55,19 +55,19 @@ export async function POST(request: Request) {
 }
 ```
 
-The response is sent immediately while logging happens in the background.
+응답은 즉시 전송되고 로깅은 백그라운드에서 실행됩니다.
 
-**Common use cases:**
+**일반적인 사용 사례:**
 
-- Analytics tracking
-- Audit logging
-- Sending notifications
-- Cache invalidation
-- Cleanup tasks
+- 분석 추적
+- 감사 로깅
+- 알림 전송
+- 캐시 무효화
+- 정리 작업
 
-**Important notes:**
+**중요 사항:**
 
-- `after()` runs even if the response fails or redirects
-- Works in Server Actions, Route Handlers, and Server Components
+- `after()`는 응답이 실패하거나 리다이렉트되어도 실행됩니다
+- Server Action, Route Handler, Server Component에서 작동합니다
 
-Reference: [https://nextjs.org/docs/app/api-reference/functions/after](https://nextjs.org/docs/app/api-reference/functions/after)
+참고: [https://nextjs.org/docs/app/api-reference/functions/after](https://nextjs.org/docs/app/api-reference/functions/after)

package/templates/.claude/skills/nextjs-react-best-practices/rules/server-cache-lru.md

@@ -5,18 +5,18 @@ impactDescription: caches across requests
 tags: server, cache, lru, cross-request
 ---
 
-## Cross-Request LRU Caching
+## 요청 간 LRU 캐싱
 
-`React.cache()` only works within one request. For data shared across sequential requests (user clicks button A then button B), use an LRU cache.
+`React.cache()`는 단일 요청 내에서만 동작합니다. 연속된 요청 간 데이터 공유가 필요한 경우(사용자가 버튼 A를 클릭한 후 버튼 B를 클릭하는 경우)에는 LRU 캐시를 사용하세요.
 
-**Implementation:**
+**구현:**
 
 ```typescript
 import { LRUCache } from 'lru-cache'
 
 const cache = new LRUCache<string, any>({
   max: 1000,
-  ttl: 5 * 60 * 1000  // 5 minutes
+  ttl: 5 * 60 * 1000  // 5분
 })
 
 export async function getUser(id: string) {
@@ -28,14 +28,14 @@ export async function getUser(id: string) {
   return user
 }
 
-// Request 1: DB query, result cached
-// Request 2: cache hit, no DB query
+// 요청 1: DB 쿼리, 결과 캐시됨
+// 요청 2: 캐시 히트, DB 쿼리 없음
 ```
 
-Use when sequential user actions hit multiple endpoints needing the same data within seconds.
+연속된 사용자 행동이 몇 초 내에 동일한 데이터가 필요한 여러 엔드포인트를 호출할 때 사용하세요.
 
-**With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute):** LRU caching is especially effective because multiple concurrent requests can share the same function instance and cache. This means the cache persists across requests without needing external storage like Redis.
+**Vercel의 [Fluid Compute](https://vercel.com/docs/fluid-compute)를 사용하는 경우:** LRU 캐싱은 특히 효과적입니다. 여러 동시 요청이 동일한 함수 인스턴스와 캐시를 공유할 수 있기 때문입니다. 이는 Redis와 같은 외부 스토리지 없이도 요청 간 캐시가 유지됨을 의미합니다.
 
-**In traditional serverless:** Each invocation runs in isolation, so consider Redis for cross-process caching.
+**전통적인 서버리스 환경에서는:** 각 호출이 격리된 환경에서 실행되므로 프로세스 간 캐싱을 위해 Redis 사용을 고려하세요.
 
-Reference: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)
+참고: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)

package/templates/.claude/skills/nextjs-react-best-practices/rules/server-cache-react.md

@@ -5,11 +5,11 @@ impactDescription: deduplicates within request
 tags: server, cache, react-cache, deduplication
 ---
 
-## Per-Request Deduplication with React.cache()
+## React.cache()를 사용한 요청별 중복 제거
 
-Use `React.cache()` for server-side request deduplication. Authentication and database queries benefit most.
+서버 사이드 요청 중복 제거를 위해 `React.cache()`를 사용하세요. 인증과 데이터베이스 쿼리에서 가장 큰 효과를 봅니다.
 
-**Usage:**
+**사용법:**
 
 ```typescript
 import { cache } from 'react'
@@ -23,4 +23,4 @@ export const getCurrentUser = cache(async () => {
 })
 ```
 
-Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
+단일 요청 내에서 `getCurrentUser()`를 여러 번 호출해도 쿼리는 한 번만 실행됩니다.

package/templates/.claude/skills/nextjs-react-best-practices/rules/server-parallel-fetching.md

@@ -5,11 +5,11 @@ impactDescription: eliminates server-side waterfalls
 tags: server, rsc, parallel-fetching, composition
 ---
 
-## Parallel Data Fetching with Component Composition
+## 컴포넌트 조합을 통한 병렬 데이터 페칭
 
-React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
+React Server Component는 트리 내에서 순차적으로 실행됩니다. 컴포지션을 활용해 재구성하여 데이터 페칭을 병렬화하세요.
 
-**Incorrect (Sidebar waits for Page's fetch to complete):**
+**잘못된 예 (Sidebar가 Page의 fetch 완료를 기다림):**
 
 ```tsx
 export default async function Page() {
@@ -28,7 +28,7 @@ async function Sidebar() {
 }
 ```
 
-**Correct (both fetch simultaneously):**
+**올바른 예 (둘 다 동시에 fetch):**
 
 ```tsx
 async function Header() {
@@ -51,7 +51,7 @@ export default function Page() {
 }
 ```
 
-**Alternative with children prop:**
+**children prop을 사용한 대안:**
 
 ```tsx
 async function Layout({ children }: { children: ReactNode }) {

package/templates/.claude/skills/nextjs-react-best-practices/rules/server-serialization.md

@@ -5,25 +5,25 @@ impactDescription: reduces data transfer size
 tags: server, rsc, serialization, props
 ---
 
-## Minimize Serialization at RSC Boundaries
+## RSC 경계에서 직렬화 최소화
 
-The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.
+React Server/Client 경계는 모든 객체 속성을 문자열로 직렬화하여 HTML 응답과 후속 RSC 요청에 포함시킵니다. 이 직렬화된 데이터는 페이지 크기와 로드 시간에 직접적인 영향을 미치므로 **크기가 매우 중요합니다**. 클라이언트가 실제로 사용하는 필드만 전달하세요.
 
-**Incorrect (serializes all 50 fields):**
+**잘못된 예 (50개 필드 모두 직렬화):**
 
 ```tsx
 async function Page() {
-  const user = await fetchUser()  // 50 fields
+  const user = await fetchUser()  // 50개 필드
   return <Profile user={user} />
 }
 
 'use client'
 function Profile({ user }: { user: User }) {
-  return <div>{user.name}</div>  // uses 1 field
+  return <div>{user.name}</div>  // 1개 필드만 사용
 }
 ```
 
-**Correct (serializes only 1 field):**
+**올바른 예 (1개 필드만 직렬화):**
 
 ```tsx
 async function Page() {