@kood/claude-code 0.4.1 → 0.5.0

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-combine-iterations.md

@@ -5,11 +5,11 @@ impactDescription: reduces iterations
 tags: javascript, arrays, loops, performance
 ---
 
-## Combine Multiple Array Iterations
+## 여러 배열 반복 결합
 
-Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine into one loop.
+여러 개의 `.filter()` 또는 `.map()` 호출은 배열을 여러 번 반복합니다. 하나의 루프로 결합하세요.
 
-**Incorrect (3 iterations):**
+**❌ 잘못된 예시 (3번 반복):**
 
 ```typescript
 const admins = users.filter(u => u.isAdmin)
@@ -17,7 +17,7 @@ const testers = users.filter(u => u.isTester)
 const inactive = users.filter(u => !u.isActive)
 ```
 
-**Correct (1 iteration):**
+**✅ 올바른 예시 (1번 반복):**
 
 ```typescript
 const admins: User[] = []

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-early-exit.md

@@ -5,17 +5,17 @@ impactDescription: avoids unnecessary computation
 tags: javascript, functions, optimization, early-return
 ---
 
-## Early Return from Functions
+## 함수에서 조기 반환
 
-Return early when result is determined to skip unnecessary processing.
+결과가 결정되면 불필요한 처리를 건너뛰기 위해 조기 반환하세요.
 
-**Incorrect (processes all items even after finding answer):**
+**잘못된 예 (답을 찾은 후에도 모든 항목 처리):**
 
 ```typescript
 function validateUsers(users: User[]) {
   let hasError = false
   let errorMessage = ''
-  
+
   for (const user of users) {
     if (!user.email) {
       hasError = true
@@ -25,14 +25,14 @@ function validateUsers(users: User[]) {
       hasError = true
       errorMessage = 'Name required'
     }
-    // Continues checking all users even after error found
+    // 오류를 찾은 후에도 모든 사용자를 계속 확인함
   }
-  
+
   return hasError ? { valid: false, error: errorMessage } : { valid: true }
 }
 ```
 
-**Correct (returns immediately on first error):**
+**올바른 예 (첫 번째 오류에서 즉시 반환):**
 
 ```typescript
 function validateUsers(users: User[]) {

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-hoist-regexp.md

@@ -5,11 +5,11 @@ impactDescription: avoids recreation
 tags: javascript, regexp, optimization, memoization
 ---
 
-## Hoist RegExp Creation
+## RegExp 생성 호이스팅
 
-Don't create RegExp inside render. Hoist to module scope or memoize with `useMemo()`.
+렌더 내부에서 RegExp를 생성하지 마세요. 모듈 스코프로 호이스트하거나 `useMemo()`로 메모이제이션하세요.
 
-**Incorrect (new RegExp every render):**
+**잘못된 예 (매 렌더마다 새로운 RegExp):**
 
 ```tsx
 function Highlighter({ text, query }: Props) {
@@ -19,7 +19,7 @@ function Highlighter({ text, query }: Props) {
 }
 ```
 
-**Correct (memoize or hoist):**
+**올바른 예 (메모이제이션 또는 호이스팅):**
 
 ```tsx
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
@@ -34,9 +34,9 @@ function Highlighter({ text, query }: Props) {
 }
 ```
 
-**Warning (global regex has mutable state):**
+**주의 (전역 정규식은 가변 상태를 가짐):**
 
-Global regex (`/g`) has mutable `lastIndex` state:
+전역 정규식(`/g`)은 가변적인 `lastIndex` 상태를 가집니다:
 
 ```typescript
 const regex = /foo/g

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-index-maps.md

@@ -5,11 +5,11 @@ impactDescription: 1M ops to 2K ops
 tags: javascript, map, indexing, optimization, performance
 ---
 
-## Build Index Maps for Repeated Lookups
+## 반복 조회를 위한 인덱스 맵 구축
 
-Multiple `.find()` calls by the same key should use a Map.
+동일한 키로 여러 번 `.find()`를 호출하는 경우 Map을 사용하세요.
 
-**Incorrect (O(n) per lookup):**
+**❌ 잘못된 예시 (조회당 O(n)):**
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
@@ -20,7 +20,7 @@ function processOrders(orders: Order[], users: User[]) {
 }
 ```
 
-**Correct (O(1) per lookup):**
+**✅ 올바른 예시 (조회당 O(1)):**
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
@@ -33,5 +33,5 @@ function processOrders(orders: Order[], users: User[]) {
 }
 ```
 
-Build map once (O(n)), then all lookups are O(1).
-For 1000 orders × 1000 users: 1M ops → 2K ops.
+맵을 한 번 구축(O(n))하면 모든 조회가 O(1)입니다.
+1000개의 주문 × 1000명의 사용자: 1M 연산 → 2K 연산.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-length-check-first.md

@@ -5,32 +5,32 @@ impactDescription: avoids expensive operations when lengths differ
 tags: javascript, arrays, performance, optimization, comparison
 ---
 
-## Early Length Check for Array Comparisons
+## 배열 비교 시 길이를 먼저 확인
 
-When comparing arrays with expensive operations (sorting, deep equality, serialization), check lengths first. If lengths differ, the arrays cannot be equal.
+배열을 비교할 때 비용이 큰 연산(정렬, 깊은 동등성 비교, 직렬화)을 수행하기 전에 길이를 먼저 확인하세요. 길이가 다르면 배열이 같을 수 없습니다.
 
-In real-world applications, this optimization is especially valuable when the comparison runs in hot paths (event handlers, render loops).
+실제 애플리케이션에서 이 최적화는 핫 패스(이벤트 핸들러, 렌더 루프)에서 비교가 실행될 때 특히 유용합니다.
 
-**Incorrect (always runs expensive comparison):**
+**잘못된 예 (항상 비용이 큰 비교 실행):**
 
 ```typescript
 function hasChanges(current: string[], original: string[]) {
-  // Always sorts and joins, even when lengths differ
+  // 길이가 다를 때도 항상 정렬하고 조인함
   return current.sort().join() !== original.sort().join()
 }
 ```
 
-Two O(n log n) sorts run even when `current.length` is 5 and `original.length` is 100. There is also overhead of joining the arrays and comparing the strings.
+`current.length`가 5이고 `original.length`가 100일 때도 두 번의 O(n log n) 정렬이 실행됩니다. 배열을 조인하고 문자열을 비교하는 오버헤드도 있습니다.
 
-**Correct (O(1) length check first):**
+**올바른 예 (O(1) 길이 확인 먼저):**
 
 ```typescript
 function hasChanges(current: string[], original: string[]) {
-  // Early return if lengths differ
+  // 길이가 다르면 조기 반환
   if (current.length !== original.length) {
     return true
   }
-  // Only sort/join when lengths match
+  // 길이가 같을 때만 정렬/조인
   const currentSorted = current.toSorted()
   const originalSorted = original.toSorted()
   for (let i = 0; i < currentSorted.length; i++) {
@@ -42,8 +42,8 @@ function hasChanges(current: string[], original: string[]) {
 }
 ```
 
-This new approach is more efficient because:
-- It avoids the overhead of sorting and joining the arrays when lengths differ
-- It avoids consuming memory for the joined strings (especially important for large arrays)
-- It avoids mutating the original arrays
-- It returns early when a difference is found
+이 새로운 접근 방식이 더 효율적인 이유:
+- 길이가 다를 때 정렬과 조인의 오버헤드를 회피
+- 조인된 문자열을 위한 메모리 소비를 회피 (특히 큰 배열에서 중요)
+- 원본 배열을 변경하지 않음
+- 차이를 발견하면 조기 반환

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-min-max-loop.md

@@ -5,11 +5,11 @@ impactDescription: O(n) instead of O(n log n)
 tags: javascript, arrays, performance, sorting, algorithms
 ---
 
-## Use Loop for Min/Max Instead of Sort
+## 최소/최대값은 정렬 대신 루프 사용
 
-Finding the smallest or largest element only requires a single pass through the array. Sorting is wasteful and slower.
+가장 작거나 큰 요소를 찾는 것은 배열을 한 번만 순회하면 됩니다. 정렬은 낭비적이고 느립니다.
 
-**Incorrect (O(n log n) - sort to find latest):**
+**잘못된 예 (O(n log n) - 최신 항목을 찾기 위해 정렬):**
 
 ```typescript
 interface Project {
@@ -24,9 +24,9 @@ function getLatestProject(projects: Project[]) {
 }
 ```
 
-Sorts the entire array just to find the maximum value.
+최댓값을 찾기 위해 전체 배열을 정렬합니다.
 
-**Incorrect (O(n log n) - sort for oldest and newest):**
+**잘못된 예 (O(n log n) - 가장 오래된 것과 최신 것을 찾기 위해 정렬):**
 
 ```typescript
 function getOldestAndNewest(projects: Project[]) {
@@ -35,43 +35,43 @@ function getOldestAndNewest(projects: Project[]) {
 }
 ```
 
-Still sorts unnecessarily when only min/max are needed.
+최소/최대값만 필요한데도 불필요하게 정렬합니다.
 
-**Correct (O(n) - single loop):**
+**올바른 예 (O(n) - 단일 루프):**
 
 ```typescript
 function getLatestProject(projects: Project[]) {
   if (projects.length === 0) return null
-  
+
   let latest = projects[0]
-  
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt > latest.updatedAt) {
       latest = projects[i]
     }
   }
-  
+
   return latest
 }
 
 function getOldestAndNewest(projects: Project[]) {
   if (projects.length === 0) return { oldest: null, newest: null }
-  
+
   let oldest = projects[0]
   let newest = projects[0]
-  
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
     if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
   }
-  
+
   return { oldest, newest }
 }
 ```
 
-Single pass through the array, no copying, no sorting.
+배열을 한 번만 순회하며, 복사도 정렬도 없습니다.
 
-**Alternative (Math.min/Math.max for small arrays):**
+**대안 (작은 배열에는 Math.min/Math.max):**
 
 ```typescript
 const numbers = [5, 2, 8, 1, 9]
@@ -79,4 +79,4 @@ const min = Math.min(...numbers)
 const max = Math.max(...numbers)
 ```
 
-This works for small arrays but can be slower for very large arrays due to spread operator limitations. Use the loop approach for reliability.
+이는 작은 배열에서는 작동하지만 스프레드 연산자의 제한으로 인해 매우 큰 배열에서는 느릴 수 있습니다. 신뢰성을 위해 루프 방식을 사용하세요.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-set-map-lookups.md

@@ -5,18 +5,18 @@ impactDescription: O(n) to O(1)
 tags: javascript, set, map, data-structures, performance
 ---
 
-## Use Set/Map for O(1) Lookups
+## O(1) 조회를 위해 Set/Map 사용
 
-Convert arrays to Set/Map for repeated membership checks.
+반복적인 멤버십 확인을 위해 배열을 Set/Map으로 변환하세요.
 
-**Incorrect (O(n) per check):**
+**잘못된 예 (확인당 O(n)):**
 
 ```typescript
 const allowedIds = ['a', 'b', 'c', ...]
 items.filter(item => allowedIds.includes(item.id))
 ```
 
-**Correct (O(1) per check):**
+**올바른 예 (확인당 O(1)):**
 
 ```typescript
 const allowedIds = new Set(['a', 'b', 'c', ...])

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/js-tosorted-immutable.md

@@ -5,15 +5,15 @@ impactDescription: prevents mutation bugs in React state
 tags: javascript, arrays, immutability, react, state, mutation
 ---
 
-## Use toSorted() Instead of sort() for Immutability
+## 불변성을 위해 sort() 대신 toSorted() 사용
 
-`.sort()` mutates the array in place, which can cause bugs with React state and props. Use `.toSorted()` to create a new sorted array without mutation.
+`.sort()`는 배열을 제자리에서 변경하여 React 상태와 props에서 버그를 일으킬 수 있습니다. 변경 없이 새로운 정렬된 배열을 생성하려면 `.toSorted()`를 사용하세요.
 
-**Incorrect (mutates original array):**
+**잘못된 예 (원본 배열 변경):**
 
 ```typescript
 function UserList({ users }: { users: User[] }) {
-  // Mutates the users prop array!
+  // users prop 배열을 변경함!
   const sorted = useMemo(
     () => users.sort((a, b) => a.name.localeCompare(b.name)),
     [users]
@@ -22,11 +22,11 @@ function UserList({ users }: { users: User[] }) {
 }
 ```
 
-**Correct (creates new array):**
+**올바른 예 (새 배열 생성):**
 
 ```typescript
 function UserList({ users }: { users: User[] }) {
-  // Creates new sorted array, original unchanged
+  // 새로운 정렬된 배열 생성, 원본은 변경 없음
   const sorted = useMemo(
     () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
     [users]
@@ -35,23 +35,23 @@ function UserList({ users }: { users: User[] }) {
 }
 ```
 
-**Why this matters in React:**
+**React에서 이것이 중요한 이유:**
 
-1. Props/state mutations break React's immutability model - React expects props and state to be treated as read-only
-2. Causes stale closure bugs - Mutating arrays inside closures (callbacks, effects) can lead to unexpected behavior
+1. Props/state 변경은 React의 불변성 모델을 깨뜨림 - React는 props와 state가 읽기 전용으로 취급되길 기대함
+2. 오래된 클로저 버그 발생 - 클로저(콜백, 이펙트) 내부에서 배열을 변경하면 예상치 못한 동작을 일으킬 수 있음
 
-**Browser support (fallback for older browsers):**
+**브라우저 지원 (구형 브라우저를 위한 폴백):**
 
-`.toSorted()` is available in all modern browsers (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+). For older environments, use spread operator:
+`.toSorted()`는 모든 최신 브라우저(Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+)에서 사용할 수 있습니다. 구형 환경의 경우 스프레드 연산자를 사용하세요:
 
 ```typescript
-// Fallback for older browsers
+// 구형 브라우저를 위한 폴백
 const sorted = [...items].sort((a, b) => a.value - b.value)
 ```
 
-**Other immutable array methods:**
+**다른 불변 배열 메서드:**
 
-- `.toSorted()` - immutable sort
-- `.toReversed()` - immutable reverse
-- `.toSpliced()` - immutable splice
-- `.with()` - immutable element replacement
+- `.toSorted()` - 불변 정렬
+- `.toReversed()` - 불변 역순
+- `.toSpliced()` - 불변 스플라이스
+- `.with()` - 불변 요소 교체

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/rendering-animate-svg-wrapper.md

@@ -5,19 +5,19 @@ impactDescription: enables hardware acceleration
 tags: rendering, svg, css, animation, performance
 ---
 
-## Animate SVG Wrapper Instead of SVG Element
+## SVG 요소 대신 SVG 래퍼 애니메이션 적용
 
-Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead.
+많은 브라우저에서 SVG 요소에 대한 CSS3 애니메이션의 하드웨어 가속을 지원하지 않습니다. SVG를 `<div>`로 감싸고 래퍼에 애니메이션을 적용하세요.
 
-**Incorrect (animating SVG directly - no hardware acceleration):**
+**잘못된 방법 (SVG에 직접 애니메이션 - 하드웨어 가속 없음):**
 
 ```tsx
 function LoadingSpinner() {
   return (
-    <svg 
+    <svg
       className="animate-spin"
-      width="24" 
-      height="24" 
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
     >
       <circle cx="12" cy="12" r="10" stroke="currentColor" />
@@ -26,15 +26,15 @@ function LoadingSpinner() {
 }
 ```
 
-**Correct (animating wrapper div - hardware accelerated):**
+**올바른 방법 (래퍼 div에 애니메이션 - 하드웨어 가속 적용):**
 
 ```tsx
 function LoadingSpinner() {
   return (
     <div className="animate-spin">
-      <svg 
-        width="24" 
-        height="24" 
+      <svg
+        width="24"
+        height="24"
         viewBox="0 0 24 24"
       >
         <circle cx="12" cy="12" r="10" stroke="currentColor" />
@@ -44,4 +44,4 @@ function LoadingSpinner() {
 }
 ```
 
-This applies to all CSS transforms and transitions (`transform`, `opacity`, `translate`, `scale`, `rotate`). The wrapper div allows browsers to use GPU acceleration for smoother animations.
+이는 모든 CSS 변형 및 전환(`transform`, `opacity`, `translate`, `scale`, `rotate`)에 적용됩니다. 래퍼 div를 사용하면 브라우저가 GPU 가속을 활용하여 더 부드러운 애니메이션을 제공할 수 있습니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/rendering-conditional-render.md

@@ -5,11 +5,11 @@ impactDescription: prevents rendering 0 or NaN
 tags: rendering, conditional, jsx, falsy-values
 ---
 
-## Use Explicit Conditional Rendering
+## 명시적 조건부 렌더링 사용
 
-Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering when the condition can be `0`, `NaN`, or other falsy values that render.
+조건이 `0`, `NaN` 또는 렌더링되는 다른 falsy 값일 수 있는 경우, `&&` 대신 명시적 삼항 연산자(`? :`)를 사용하세요.
 
-**Incorrect (renders "0" when count is 0):**
+**잘못된 방법 (count가 0일 때 "0"을 렌더링):**
 
 ```tsx
 function Badge({ count }: { count: number }) {
@@ -20,11 +20,11 @@ function Badge({ count }: { count: number }) {
   )
 }
 
-// When count = 0, renders: <div>0</div>
-// When count = 5, renders: <div><span class="badge">5</span></div>
+// count = 0일 때, 렌더링 결과: <div>0</div>
+// count = 5일 때, 렌더링 결과: <div><span class="badge">5</span></div>
 ```
 
-**Correct (renders nothing when count is 0):**
+**올바른 방법 (count가 0일 때 아무것도 렌더링하지 않음):**
 
 ```tsx
 function Badge({ count }: { count: number }) {
@@ -35,6 +35,6 @@ function Badge({ count }: { count: number }) {
   )
 }
 
-// When count = 0, renders: <div></div>
-// When count = 5, renders: <div><span class="badge">5</span></div>
+// count = 0일 때, 렌더링 결과: <div></div>
+// count = 5일 때, 렌더링 결과: <div><span class="badge">5</span></div>
 ```

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/rendering-content-visibility.md

@@ -5,9 +5,9 @@ impactDescription: faster initial render
 tags: rendering, css, content-visibility, long-lists
 ---
 
-## CSS content-visibility for Long Lists
+## 긴 목록에 CSS content-visibility 적용
 
-Apply `content-visibility: auto` to defer off-screen rendering.
+`content-visibility: auto`를 적용하여 화면 밖 렌더링을 지연시킵니다.
 
 **CSS:**
 
@@ -18,7 +18,7 @@ Apply `content-visibility: auto` to defer off-screen rendering.
 }
 ```
 
-**Example:**
+**예시:**
 
 ```tsx
 function MessageList({ messages }: { messages: Message[] }) {
@@ -35,4 +35,4 @@ function MessageList({ messages }: { messages: Message[] }) {
 }
 ```
 
-For 1000 messages, browser skips layout/paint for ~990 off-screen items (10× faster initial render).
+1000개의 메시지가 있을 때, 브라우저는 화면 밖 약 990개 항목의 레이아웃/페인트를 건너뛰어 초기 렌더링 속도가 10배 빨라집니다.

package/templates/.claude/skills/tanstack-start-react-best-practices/rules/rendering-hoist-jsx.md

@@ -5,11 +5,11 @@ impactDescription: avoids re-creation
 tags: rendering, jsx, static, optimization
 ---
 
-## Hoist Static JSX Elements
+## 정적 JSX 요소 호이스팅
 
-Extract static JSX outside components to avoid re-creation.
+정적 JSX를 컴포넌트 외부로 추출하여 재생성을 방지합니다.
 
-**Incorrect (recreates element every render):**
+**잘못된 방법 (매 렌더링마다 요소 재생성):**
 
 ```tsx
 function LoadingSkeleton() {
@@ -25,7 +25,7 @@ function Container() {
 }
 ```
 
-**Correct (reuses same element):**
+**올바른 방법 (동일한 요소 재사용):**
 
 ```tsx
 const loadingSkeleton = (
@@ -41,6 +41,6 @@ function Container() {
 }
 ```
 
-This is especially helpful for large and static SVG nodes, which can be expensive to recreate on every render.
+이는 매 렌더링마다 재생성하는 비용이 큰 대형 정적 SVG 노드에 특히 유용합니다.
 
-**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.
+**참고:** 프로젝트에 [React Compiler](https://react.dev/learn/react-compiler)가 활성화되어 있다면, 컴파일러가 자동으로 정적 JSX 요소를 호이스팅하고 컴포넌트 재렌더링을 최적화하므로 수동 호이스팅이 불필요합니다.

package/templates/.claude/skills/tanstack-start-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/tanstack-start-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/tanstack-start-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) {