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

Author: realcoding2003

_posts/2026-02-02-nodejs-abortcontroller-fetch-timeout-en.md

@@ -0,0 +1,78 @@
+---
+layout: post
+title: "Handling Fetch Timeouts with Node.js AbortController"
+date: 2026-02-02 09:00:00 +0900
+categories: [Development, Tips]
+tags: [Node.js, AbortController, fetch, timeout]
+author: "Kevin Park"
+lang: en
+excerpt: "A clean pattern for adding timeouts to fetch requests using AbortController in Node.js."
+---
+
+## Problem
+
+When calling external APIs, requests can hang indefinitely if the server doesn't respond. A slow or failing third-party API takes your service down with it. The `setTimeout` + `Promise.race` workaround results in messy code.
+
+## Solution
+
+`AbortController` provides a clean way to add timeouts to fetch requests.
+
+```javascript
+async function fetchWithTimeout(url, timeoutMs = 5000) {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+    return await response.json();
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      throw new Error(`Request timed out after ${timeoutMs}ms`);
+    }
+    throw error;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+// Usage
+const data = await fetchWithTimeout('https://api.example.com/users', 3000);
+```
+
+Node.js 20+ offers an even simpler approach with `AbortSignal.timeout()`:
+
+```javascript
+// One line is all you need
+const response = await fetch('https://api.example.com/users', {
+  signal: AbortSignal.timeout(3000),
+});
+```
+
+Cancelling multiple requests at once is also straightforward:
+
+```javascript
+async function fetchMultiple(urls) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 5000);
+
+  try {
+    const results = await Promise.all(
+      urls.map((url) =>
+        fetch(url, { signal: controller.signal }).then((r) => r.json())
+      )
+    );
+    return results;
+  } catch (error) {
+    controller.abort(); // Cancel all remaining requests if one fails
+    throw error;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+```
+
+## Key Points
+
+- `AbortController` works with more than fetch — it's supported by `addEventListener`, `ReadableStream`, and more
+- `AbortSignal.timeout()` (Node.js 20+) requires no manual cleanup, eliminating memory leak concerns
+- A single controller can cancel multiple requests simultaneously, making it ideal for parallel request management

_posts/2026-02-02-nodejs-abortcontroller-fetch-timeout-ja.md

@@ -0,0 +1,78 @@
+---
+layout: post
+title: "Node.js AbortControllerでfetchのタイムアウトを処理する方法"
+date: 2026-02-02 09:00:00 +0900
+categories: [Development, Tips]
+tags: [Node.js, AbortController, fetch, timeout]
+author: "Kevin Park"
+lang: ja
+excerpt: "Node.jsでAbortControllerを活用して、fetchリクエストにタイムアウトを設定するクリーンなパターンをご紹介します。"
+---
+
+## 問題
+
+外部APIを呼び出す際、レスポンスが返ってこないとリクエストが永遠に待機してしまう問題がありました。サードパーティAPIが遅くなったり障害が発生すると、自分たちのサービスまで一緒に止まってしまいます。`setTimeout` + `Promise.race`の組み合わせで解決しようとすると、コードが煩雑になります。
+
+## 解決方法
+
+`AbortController`を使えば、fetchリクエストにタイムアウトをクリーンに設定できます。
+
+```javascript
+async function fetchWithTimeout(url, timeoutMs = 5000) {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+    return await response.json();
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      throw new Error(`Request timed out after ${timeoutMs}ms`);
+    }
+    throw error;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+// 使用例
+const data = await fetchWithTimeout('https://api.example.com/users', 3000);
+```
+
+Node.js 20+では`AbortSignal.timeout()`でさらに簡単に書けます：
+
+```javascript
+// 一行で完結
+const response = await fetch('https://api.example.com/users', {
+  signal: AbortSignal.timeout(3000),
+});
+```
+
+複数のリクエストを一括でキャンセルするパターンも便利です：
+
+```javascript
+async function fetchMultiple(urls) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 5000);
+
+  try {
+    const results = await Promise.all(
+      urls.map((url) =>
+        fetch(url, { signal: controller.signal }).then((r) => r.json())
+      )
+    );
+    return results;
+  } catch (error) {
+    controller.abort(); // 一つでも失敗したら残りを全てキャンセル
+    throw error;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+```
+
+## ポイント
+
+- `AbortController`はfetchだけでなく、`addEventListener`や`ReadableStream`などでも使用できます
+- `AbortSignal.timeout()`はNode.js 20+でサポートされており、手動のクリーンアップが不要なのでメモリリークの心配がありません
+- 一つのcontrollerで複数のリクエストを同時にキャンセルできるので、並行リクエストの管理に最適です

_posts/2026-02-02-nodejs-abortcontroller-fetch-timeout.md

@@ -0,0 +1,78 @@
+---
+layout: post
+title: "Node.js AbortController로 fetch 타임아웃 처리하기"
+date: 2026-02-02 09:00:00 +0900
+categories: [Development, Tips]
+tags: [Node.js, AbortController, fetch, timeout]
+author: "Kevin Park"
+lang: ko
+excerpt: "Node.js에서 AbortController를 활용해 fetch 요청에 타임아웃을 거는 깔끔한 패턴을 정리했다."
+---
+
+## 문제
+
+외부 API를 호출할 때 응답이 안 오면 요청이 영원히 대기하는 문제가 있었다. 서드파티 API가 느려지거나 장애가 나면 우리 서비스까지 같이 멈추는 거다. `setTimeout` + Promise.race 조합으로 해결하려니 코드가 지저분해졌다.
+
+## 해결
+
+`AbortController`를 쓰면 fetch 요청에 타임아웃을 깔끔하게 걸 수 있다.
+
+```javascript
+async function fetchWithTimeout(url, timeoutMs = 5000) {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+    return await response.json();
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      throw new Error(`Request timed out after ${timeoutMs}ms`);
+    }
+    throw error;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+// 사용
+const data = await fetchWithTimeout('https://api.example.com/users', 3000);
+```
+
+Node.js 20+에서는 `AbortSignal.timeout()`으로 더 간단하게 쓸 수 있다:
+
+```javascript
+// 한 줄이면 끝
+const response = await fetch('https://api.example.com/users', {
+  signal: AbortSignal.timeout(3000),
+});
+```
+
+여러 요청을 한번에 취소하는 패턴도 유용하다:
+
+```javascript
+async function fetchMultiple(urls) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 5000);
+
+  try {
+    const results = await Promise.all(
+      urls.map((url) =>
+        fetch(url, { signal: controller.signal }).then((r) => r.json())
+      )
+    );
+    return results;
+  } catch (error) {
+    controller.abort(); // 하나라도 실패하면 나머지 전부 취소
+    throw error;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+```
+
+## 핵심 포인트
+
+- `AbortController`는 fetch뿐 아니라 `addEventListener`, `ReadableStream` 등에서도 쓸 수 있다
+- `AbortSignal.timeout()`은 Node.js 20+에서 지원하고, 별도 cleanup이 필요 없어서 메모리 누수 걱정이 없다
+- 하나의 controller로 여러 요청을 동시에 취소할 수 있어서 병렬 요청 관리에 딱이다

_posts/2026-02-03-object-groupby-array-grouping-en.md

@@ -0,0 +1,76 @@
+---
+layout: post
+title: "Array Grouping in One Line with Object.groupBy"
+date: 2026-02-03 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Object.groupBy, array, ES2024]
+author: "Kevin Park"
+lang: en
+excerpt: "Stop writing reduce boilerplate for grouping arrays. Object.groupBy does it in one line."
+---
+
+## Problem
+
+Every time you needed to group an array by some criteria, you had to write a `reduce` with initial value setup, key existence checks, and array pushes. A simple grouping operation shouldn't require 5+ lines of code.
+
+```javascript
+// The old way
+const grouped = items.reduce((acc, item) => {
+  const key = item.category;
+  if (!acc[key]) acc[key] = [];
+  acc[key].push(item);
+  return acc;
+}, {});
+```
+
+## Solution
+
+ES2024's `Object.groupBy` does it in one line.
+
+```javascript
+const items = [
+  { name: 'Apple', category: 'fruit' },
+  { name: 'Carrot', category: 'vegetable' },
+  { name: 'Banana', category: 'fruit' },
+  { name: 'Spinach', category: 'vegetable' },
+];
+
+const grouped = Object.groupBy(items, (item) => item.category);
+// {
+//   fruit: [{ name: 'Apple', ... }, { name: 'Banana', ... }],
+//   vegetable: [{ name: 'Carrot', ... }, { name: 'Spinach', ... }]
+// }
+```
+
+Common real-world patterns:
+
+```javascript
+// Group orders by status
+const orders = [
+  { id: 1, status: 'pending' },
+  { id: 2, status: 'shipped' },
+  { id: 3, status: 'pending' },
+];
+const byStatus = Object.groupBy(orders, (o) => o.status);
+
+// Group logs by date
+const logs = [
+  { msg: 'error', date: '2026-03-14' },
+  { msg: 'info', date: '2026-03-14' },
+  { msg: 'warn', date: '2026-03-13' },
+];
+const byDate = Object.groupBy(logs, (log) => log.date);
+
+// Conditional grouping
+const users = [
+  { name: 'Kim', age: 25 },
+  { name: 'Lee', age: 17 },
+];
+const byAge = Object.groupBy(users, (u) => u.age >= 18 ? 'adult' : 'minor');
+```
+
+## Key Points
+
+- `Object.groupBy` returns a null-prototype object — no need for `hasOwnProperty` checks
+- Use `Map.groupBy` if you need symbol keys or non-string keys
+- Supported in Node.js 21+, Chrome 117+, Safari 17.4+. Use core-js polyfill for older browsers

_posts/2026-02-03-object-groupby-array-grouping-ja.md

@@ -0,0 +1,76 @@
+---
+layout: post
+title: "Object.groupByで配列グルーピングを一行で完結する"
+date: 2026-02-03 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Object.groupBy, array, ES2024]
+author: "Kevin Park"
+lang: ja
+excerpt: "reduceで複雑にグルーピングする時代は終わりました。Object.groupBy一つで完結します。"
+---
+
+## 問題
+
+配列を特定の基準でグルーピングするたびに`reduce`を書く必要がありました。毎回初期値を設定し、キーの存在チェックをして、配列にpushして... 単純なグルーピングなのにコードが5行以上になるのは少し煩わしいものです。
+
+```javascript
+// 毎回これを書いていました
+const grouped = items.reduce((acc, item) => {
+  const key = item.category;
+  if (!acc[key]) acc[key] = [];
+  acc[key].push(item);
+  return acc;
+}, {});
+```
+
+## 解決方法
+
+ES2024で追加された`Object.groupBy`を使えば一行で済みます。
+
+```javascript
+const items = [
+  { name: 'りんご', category: '果物' },
+  { name: 'にんじん', category: '野菜' },
+  { name: 'バナナ', category: '果物' },
+  { name: 'ほうれん草', category: '野菜' },
+];
+
+const grouped = Object.groupBy(items, (item) => item.category);
+// {
+//   '果物': [{ name: 'りんご', ... }, { name: 'バナナ', ... }],
+//   '野菜': [{ name: 'にんじん', ... }, { name: 'ほうれん草', ... }]
+// }
+```
+
+実務でよく使うパターンです：
+
+```javascript
+// ステータス別に注文を分類
+const orders = [
+  { id: 1, status: 'pending' },
+  { id: 2, status: 'shipped' },
+  { id: 3, status: 'pending' },
+];
+const byStatus = Object.groupBy(orders, (o) => o.status);
+
+// 日付別にログをグルーピング
+const logs = [
+  { msg: 'error', date: '2026-03-14' },
+  { msg: 'info', date: '2026-03-14' },
+  { msg: 'warn', date: '2026-03-13' },
+];
+const byDate = Object.groupBy(logs, (log) => log.date);
+
+// 条件付きグルーピング（成人/未成年）
+const users = [
+  { name: 'Kim', age: 25 },
+  { name: 'Lee', age: 17 },
+];
+const byAge = Object.groupBy(users, (u) => u.age >= 18 ? 'adult' : 'minor');
+```
+
+## ポイント
+
+- `Object.groupBy`はnullプロトタイプオブジェクトを返します。`hasOwnProperty`チェックは不要です
+- キーにシンボルを使いたい場合は`Map.groupBy`を使います
+- Node.js 21+、Chrome 117+、Safari 17.4+でサポートされています。古いブラウザにはcore-jsポリフィルで対応できます