docs(blog): 9차 배치 팁 포스트 5개 추가 (3개 언어)

Author: realcoding2003

_posts/2026-02-06-react-usedeferredvalue-rendering-optimization-en.md

@@ -0,0 +1,87 @@
+---
+layout: post
+title: "React useDeferredValue: Optimize Search Without Debounce"
+date: 2026-02-06 09:00:00 +0900
+categories: [Development, Tips]
+tags: [React, useDeferredValue, performance, rendering]
+author: "Kevin Park"
+lang: en
+excerpt: "Keep input responsive while deferring expensive list rendering — no debounce needed"
+---
+
+## Problem
+
+A search filter over a large list causes janky typing because every keystroke triggers a full re-render. Debounce helps, but introduces a fixed delay and hides the input value while typing.
+
+```jsx
+function SearchList({ items }) {
+  const [query, setQuery] = useState('');
+
+  // With 10,000 items, filtering runs on every keystroke
+  const filtered = items.filter(item =>
+    item.name.toLowerCase().includes(query.toLowerCase())
+  );
+
+  return (
+    <>
+      <input value={query} onChange={e => setQuery(e.target.value)} />
+      <List items={filtered} />
+    </>
+  );
+}
+```
+
+## Solution
+
+`useDeferredValue` keeps the input instantly responsive while deferring the expensive rendering.
+
+```jsx
+import { useState, useDeferredValue, memo } from 'react';
+
+function SearchList({ items }) {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+
+  // Input reflects query immediately, list uses deferredQuery
+  const filtered = items.filter(item =>
+    item.name.toLowerCase().includes(deferredQuery.toLowerCase())
+  );
+
+  const isStale = query !== deferredQuery;
+
+  return (
+    <>
+      <input value={query} onChange={e => setQuery(e.target.value)} />
+      <div style={{ opacity: isStale ? 0.7 : 1 }}>
+        <SlowList items={filtered} />
+      </div>
+    </>
+  );
+}
+
+// Must wrap with memo for the deferral to actually work
+const SlowList = memo(function SlowList({ items }) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+});
+```
+
+The difference from debounce:
+
+```
+debounce: typing stops → wait 300ms → start filtering
+useDeferredValue: input updates instantly → filtering updates when browser is idle
+```
+
+User input is never delayed. React automatically defers only the expensive re-render.
+
+## Key Points
+
+- `useDeferredValue` separates urgent updates (input) from non-urgent updates (list rendering)
+- Must be used with `memo` — without it, the component re-renders every time regardless
+- Unlike debounce, there's no fixed delay — fast devices see near-instant updates, slow devices get graceful degradation

_posts/2026-02-06-react-usedeferredvalue-rendering-optimization-ja.md

@@ -0,0 +1,87 @@
+---
+layout: post
+title: "React useDeferredValueでdebounceなしに検索を最適化する"
+date: 2026-02-06 09:00:00 +0900
+categories: [Development, Tips]
+tags: [React, useDeferredValue, パフォーマンス, レンダリング]
+author: "Kevin Park"
+lang: ja
+excerpt: "入力はすぐに反映しつつ、重いリストのレンダリングだけ遅延させます"
+---
+
+## 問題
+
+検索フィルター付きのリストを作りましたが、データが多いとキーストロークのたびに再レンダリングが走り、入力がカクつきます。`debounce`で対応はできますが、入力中に値が見えない固定の遅延が気になります。
+
+```jsx
+function SearchList({ items }) {
+  const [query, setQuery] = useState('');
+
+  // itemsが10000件あると、毎回のタイピングで全件フィルタリング
+  const filtered = items.filter(item =>
+    item.name.toLowerCase().includes(query.toLowerCase())
+  );
+
+  return (
+    <>
+      <input value={query} onChange={e => setQuery(e.target.value)} />
+      <List items={filtered} />
+    </>
+  );
+}
+```
+
+## 解決方法
+
+`useDeferredValue`を使えば、入力は即座に反映しつつ、重いレンダリングは後回しにできます。
+
+```jsx
+import { useState, useDeferredValue, memo } from 'react';
+
+function SearchList({ items }) {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+
+  // 入力はqueryで即時反映、リストはdeferredQueryで遅延レンダリング
+  const filtered = items.filter(item =>
+    item.name.toLowerCase().includes(deferredQuery.toLowerCase())
+  );
+
+  const isStale = query !== deferredQuery;
+
+  return (
+    <>
+      <input value={query} onChange={e => setQuery(e.target.value)} />
+      <div style={{ opacity: isStale ? 0.7 : 1 }}>
+        <SlowList items={filtered} />
+      </div>
+    </>
+  );
+}
+
+// memoで囲まないと遅延効果が正しく動作しません
+const SlowList = memo(function SlowList({ items }) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+});
+```
+
+`debounce`との違いはこうです：
+
+```
+debounce: 入力停止 → 300ms待機 → フィルタリング開始
+useDeferredValue: 入力は即時反映 → ブラウザの空き時間にフィルタリング更新
+```
+
+ユーザーの入力は一切遅延せず、重い再レンダリングだけをReactが自動的に後回しにします。
+
+## ポイント
+
+- `useDeferredValue`は緊急な更新（入力）と非緊急な更新（リスト描画）を分離します
+- `memo`と一緒に使う必要があります — 使わないと毎回再レンダリングされてしまいます
+- `debounce`と違い固定の遅延がないので、高速なデバイスではほぼ即時に反映され、低速なデバイスでのみ遅延が発生します

_posts/2026-02-06-react-usedeferredvalue-rendering-optimization.md

@@ -0,0 +1,87 @@
+---
+layout: post
+title: "React useDeferredValue로 debounce 없이 검색 최적화하기"
+date: 2026-02-06 09:00:00 +0900
+categories: [Development, Tips]
+tags: [React, useDeferredValue, 성능 최적화, 렌더링]
+author: "Kevin Park"
+lang: ko
+excerpt: "검색 입력할 때마다 버벅대는 리스트, debounce 대신 React 네이티브 방식으로 해결한다"
+---
+
+## 문제
+
+검색 필터가 있는 리스트를 만들었는데, 데이터가 많으니까 입력할 때마다 리렌더링이 걸려서 타이핑이 버벅거렸다. `debounce`를 걸면 되긴 하는데, 타이핑 중에 입력값이 안 보이는 게 거슬렸다.
+
+```jsx
+function SearchList({ items }) {
+  const [query, setQuery] = useState('');
+
+  // items가 10000개면 매 타이핑마다 전부 필터링
+  const filtered = items.filter(item =>
+    item.name.toLowerCase().includes(query.toLowerCase())
+  );
+
+  return (
+    <>
+      <input value={query} onChange={e => setQuery(e.target.value)} />
+      <List items={filtered} />
+    </>
+  );
+}
+```
+
+## 해결
+
+`useDeferredValue`를 쓰면 입력은 즉시 반영하고, 무거운 렌더링은 뒤로 미룰 수 있다.
+
+```jsx
+import { useState, useDeferredValue, memo } from 'react';
+
+function SearchList({ items }) {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+
+  // 입력은 query로 즉시 반영, 리스트는 deferredQuery로 지연 렌더링
+  const filtered = items.filter(item =>
+    item.name.toLowerCase().includes(deferredQuery.toLowerCase())
+  );
+
+  const isStale = query !== deferredQuery;
+
+  return (
+    <>
+      <input value={query} onChange={e => setQuery(e.target.value)} />
+      <div style={{ opacity: isStale ? 0.7 : 1 }}>
+        <SlowList items={filtered} />
+      </div>
+    </>
+  );
+}
+
+// memo로 감싸야 지연 효과가 제대로 동작한다
+const SlowList = memo(function SlowList({ items }) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+});
+```
+
+`debounce`와의 차이는 이렇다:
+
+```
+debounce: 입력 멈춤 → 300ms 대기 → 필터링 시작
+useDeferredValue: 입력 즉시 반영 → 브라우저 여유 시 필터링 업데이트
+```
+
+사용자 입력은 절대 지연되지 않고, 무거운 리렌더링만 React가 알아서 뒤로 미뤄준다.
+
+## 핵심 포인트
+
+- `useDeferredValue`는 긴급한 업데이트(입력)와 느린 업데이트(리스트)를 분리해준다
+- `memo`와 같이 써야 효과가 있다 — 안 쓰면 어차피 매번 리렌더링된다
+- `debounce`와 달리 고정 딜레이가 없어서, 빠른 기기에서는 거의 즉시 반영되고 느린 기기에서만 지연된다

_posts/2026-03-09-nodejs-crypto-randomuuid-native-en.md

@@ -0,0 +1,69 @@
+---
+layout: post
+title: "Generate UUIDs in Node.js Without the uuid Package"
+date: 2026-03-09 09:00:00 +0900
+categories: [Development, Tips]
+tags: [Node.js, UUID, crypto, dependencies]
+author: "Kevin Park"
+lang: en
+excerpt: "crypto.randomUUID() is built-in — no need for the uuid package anymore"
+---
+
+## Problem
+
+Every project that needs UUIDs pulls in the `uuid` package. Adding an external dependency just for UUID v4 generation feels unnecessary.
+
+```bash
+npm install uuid
+```
+
+```javascript
+const { v4: uuidv4 } = require('uuid');
+const id = uuidv4();
+```
+
+## Solution
+
+Since Node.js 19 (and LTS 20+), `crypto.randomUUID()` is available globally. No package install needed.
+
+```javascript
+// Node.js 19+ / all modern browsers
+const id = crypto.randomUUID();
+// 'a1b2c3d4-e5f6-4a7b-8c9d-0e1f2a3b4c5d'
+```
+
+No `require` needed — `crypto` is on the global object.
+
+For older versions (Node 14.17–18), you need the require:
+
+```javascript
+// Node 14.17 – 18
+const { randomUUID } = require('crypto');
+const id = randomUUID();
+```
+
+Works in browsers too:
+
+```javascript
+// All modern browsers
+const id = self.crypto.randomUUID();
+```
+
+A compatibility helper if you need one:
+
+```javascript
+function generateUUID() {
+  // Global crypto (Node 19+ / browsers)
+  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  // Node 14.17+
+  return require('crypto').randomUUID();
+}
+```
+
+## Key Points
+
+- `crypto.randomUUID()` generates RFC 4122 compliant UUID v4 — identical output to the `uuid` package
+- Available globally on Node.js 20 LTS and above — zero external dependencies
+- Supported in all modern browsers, so you can use the same approach across your full stack