docs(blog): 검색 유입용 기술 팁 포스트 2차 배치 (5개, 3개 언어)

- PM2 cluster mode로 Next.js 성능 올리기
- JavaScript Intl.NumberFormat 숫자 포맷팅
- fetch API Bearer Token 인증 헬퍼
- Docker Compose Redis healthcheck 설정
- Next.js HttpOnly Cookie JWT 인증

Author: realcoding2003

_posts/2025-05-15-pm2-cluster-mode-nextjs-en.md

@@ -0,0 +1,52 @@
+---
+layout: post
+title: "PM2 Cluster Mode for Next.js Production Performance"
+date: 2025-05-15 09:00:00 +0900
+categories: [Development, Tips]
+tags: [PM2, Node.js, Next.js, cluster, production]
+author: "Kevin Park"
+lang: en
+excerpt: "Use PM2 cluster mode to leverage multi-core CPUs and boost Next.js throughput in production."
+---
+
+## Problem
+
+Node.js is single-threaded. Even with 4 CPU cores, only one gets used. When traffic spikes, a single process handles everything.
+
+## Solution
+
+```javascript
+// ecosystem.config.js
+module.exports = {
+  apps: [{
+    name: 'my-app',
+    script: 'node_modules/next/dist/bin/next',
+    args: 'start --port 3000',
+    instances: 2,           // number of CPU cores (or 'max')
+    exec_mode: 'cluster',   // enable cluster mode
+    max_memory_restart: '800M',
+    env: {
+      NODE_ENV: 'production',
+    },
+    // restart policy
+    exp_backoff_restart_delay: 100,
+    max_restarts: 10,
+    min_uptime: '10s',
+    // logging
+    log_date_format: 'YYYY-MM-DD HH:mm:ss',
+    merge_logs: true,
+  }]
+};
+```
+
+```bash
+pm2 start ecosystem.config.js
+pm2 monit    # real-time monitoring
+pm2 reload my-app  # zero-downtime restart
+```
+
+## Key Points
+
+- `instances: 'max'` uses all cores, but on small servers like Raspberry Pi, limit to 2. The OS and other services (Redis, etc.) need cores too.
+- `exp_backoff_restart_delay: 100` starts at 100ms and increases the restart interval progressively, preventing infinite restart loops.
+- `pm2 reload` differs from `restart` — it replaces processes one at a time for zero downtime.

_posts/2025-05-15-pm2-cluster-mode-nextjs-ja.md

@@ -0,0 +1,52 @@
+---
+layout: post
+title: "PM2 clusterモードでNext.jsプロダクション性能を向上させる"
+date: 2025-05-15 09:00:00 +0900
+categories: [Development, Tips]
+tags: [PM2, Node.js, Next.js, cluster, production]
+author: "Kevin Park"
+lang: ja
+excerpt: "PM2のclusterモード設定でマルチコアを活用し、Next.jsアプリのスループットを向上させる方法をご紹介します。"
+---
+
+## 問題
+
+Node.jsはシングルスレッドのため、CPUコアが4つあっても1つしか使いません。トラフィックが集中すると、1つのプロセスがすべてを処理しなければなりません。
+
+## 解決方法
+
+```javascript
+// ecosystem.config.js
+module.exports = {
+  apps: [{
+    name: 'my-app',
+    script: 'node_modules/next/dist/bin/next',
+    args: 'start --port 3000',
+    instances: 2,           // CPUコア数分（または'max'）
+    exec_mode: 'cluster',   // clusterモード有効化
+    max_memory_restart: '800M',
+    env: {
+      NODE_ENV: 'production',
+    },
+    // 再起動ポリシー
+    exp_backoff_restart_delay: 100,
+    max_restarts: 10,
+    min_uptime: '10s',
+    // ログ
+    log_date_format: 'YYYY-MM-DD HH:mm:ss',
+    merge_logs: true,
+  }]
+};
+```
+
+```bash
+pm2 start ecosystem.config.js
+pm2 monit    # リアルタイム監視
+pm2 reload my-app  # ゼロダウンタイム再起動
+```
+
+## ポイント
+
+- `instances: 'max'`にすると全コアを使いますが、Raspberry Piのような小型サーバーでは2つ程度に制限するのが安定的です。OSやRedisなど他のサービスにもコアが必要です。
+- `exp_backoff_restart_delay: 100`はアプリがクラッシュした際、100msから始めて段階的に間隔を広げて再起動します。無限再起動ループを防ぎます。
+- `pm2 reload`は`restart`と異なり、プロセスを1つずつ順番に入れ替えるため、ダウンタイムがありません。

_posts/2025-05-15-pm2-cluster-mode-nextjs.md

@@ -0,0 +1,52 @@
+---
+layout: post
+title: "PM2 cluster mode로 Next.js 프로덕션 성능 올리기"
+date: 2025-05-15 09:00:00 +0900
+categories: [Development, Tips]
+tags: [PM2, Node.js, Next.js, cluster, production]
+author: "Kevin Park"
+lang: ko
+excerpt: "PM2 cluster mode 설정으로 멀티코어를 활용해 Next.js 앱의 처리량을 높이는 방법."
+---
+
+## 문제
+
+Node.js는 싱글 스레드라서 CPU 코어가 4개여도 1개만 쓴다. 트래픽이 몰리면 하나의 프로세스가 다 감당해야 한다.
+
+## 해결
+
+```javascript
+// ecosystem.config.js
+module.exports = {
+  apps: [{
+    name: 'my-app',
+    script: 'node_modules/next/dist/bin/next',
+    args: 'start --port 3000',
+    instances: 2,           // CPU 코어 수만큼 (또는 'max')
+    exec_mode: 'cluster',   // cluster 모드 활성화
+    max_memory_restart: '800M',
+    env: {
+      NODE_ENV: 'production',
+    },
+    // 재시작 정책
+    exp_backoff_restart_delay: 100,
+    max_restarts: 10,
+    min_uptime: '10s',
+    // 로그
+    log_date_format: 'YYYY-MM-DD HH:mm:ss',
+    merge_logs: true,
+  }]
+};
+```
+
+```bash
+pm2 start ecosystem.config.js
+pm2 monit    # 실시간 모니터링
+pm2 reload my-app  # 무중단 재시작
+```
+
+## 핵심 포인트
+
+- `instances: 'max'`로 하면 전체 코어를 다 쓰는데, 라즈베리파이 같은 소형 서버에서는 2개 정도로 제한하는 게 안정적이다. OS랑 Redis 같은 다른 서비스에도 코어가 필요하니까.
+- `exp_backoff_restart_delay: 100`은 앱이 죽었을 때 100ms부터 시작해서 점점 간격을 늘리며 재시작한다. 무한 재시작 루프를 방지한다.
+- `pm2 reload`는 `restart`와 다르게 프로세스를 하나씩 순차적으로 교체해서 다운타임이 없다.

_posts/2025-06-25-javascript-intl-numberformat-en.md

@@ -0,0 +1,50 @@
+---
+layout: post
+title: "JavaScript Intl.NumberFormat - Format Numbers Without Libraries"
+date: 2025-06-25 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Intl, NumberFormat, formatting, i18n]
+author: "Kevin Park"
+lang: en
+excerpt: "Use the built-in Intl.NumberFormat API for currency, thousands separators, and percentage formatting without external libraries."
+---
+
+## Problem
+
+Installing numeral.js or accounting.js just to display "1,000" or "$1,234.56". There's a built-in browser API that handles this already.
+
+## Solution
+
+```javascript
+// Korean Won
+new Intl.NumberFormat('ko-KR', {
+  style: 'currency',
+  currency: 'KRW',
+  minimumFractionDigits: 0,
+}).format(15000);
+// → "₩15,000"
+
+// Thousands separator
+new Intl.NumberFormat('ko-KR').format(1234567);
+// → "1,234,567"
+
+// US Dollar
+new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+}).format(1234.5);
+// → "$1,234.50"
+
+// Percentage
+new Intl.NumberFormat('ko-KR', {
+  style: 'percent',
+  minimumFractionDigits: 1,
+}).format(0.1234);
+// → "12.3%"
+```
+
+## Key Points
+
+- `Intl.NumberFormat` is supported in all modern browsers and Node.js. Even IE11 handles the basics.
+- `currency: 'KRW'` displays without decimals, while `'USD'` automatically adds 2 decimal places. Each currency follows its own conventions.
+- For repeated use, store the formatter instance in a variable. Creating `new` instances every time is wasteful.

_posts/2025-06-25-javascript-intl-numberformat-ja.md

@@ -0,0 +1,50 @@
+---
+layout: post
+title: "JavaScript Intl.NumberFormat - ライブラリなしで数値フォーマット"
+date: 2025-06-25 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Intl, NumberFormat, formatting, i18n]
+author: "Kevin Park"
+lang: ja
+excerpt: "JavaScript内蔵のIntl.NumberFormatで通貨、桁区切り、パーセントフォーマットをライブラリなしで処理する方法をご紹介します。"
+---
+
+## 問題
+
+数値を「1,000円」や「$1,234.56」のように表示するためにnumeral.jsやaccounting.jsをインストールしていました。しかし、ブラウザにはすでに内蔵機能がありました。
+
+## 解決方法
+
+```javascript
+// 韓国ウォン
+new Intl.NumberFormat('ko-KR', {
+  style: 'currency',
+  currency: 'KRW',
+  minimumFractionDigits: 0,
+}).format(15000);
+// → "₩15,000"
+
+// 桁区切り
+new Intl.NumberFormat('ko-KR').format(1234567);
+// → "1,234,567"
+
+// 米ドル
+new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+}).format(1234.5);
+// → "$1,234.50"
+
+// パーセント
+new Intl.NumberFormat('ko-KR', {
+  style: 'percent',
+  minimumFractionDigits: 1,
+}).format(0.1234);
+// → "12.3%"
+```
+
+## ポイント
+
+- `Intl.NumberFormat`はすべてのモダンブラウザとNode.jsでサポートされています。IE11でも基本機能は動作します。
+- `currency: 'KRW'`にすると小数点なしで表示され、`'USD'`にすると自動的に小数点2桁が付きます。各通貨の慣例に自動的に従います。
+- 同じフォーマットを繰り返し使う場合は、インスタンスを変数に保存しておくとパフォーマンスが向上します。毎回`new`するのは無駄です。

_posts/2025-06-25-javascript-intl-numberformat.md

@@ -0,0 +1,50 @@
+---
+layout: post
+title: "JavaScript Intl.NumberFormat - 숫자 포맷팅 라이브러리 없이 해결"
+date: 2025-06-25 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Intl, NumberFormat, formatting, i18n]
+author: "Kevin Park"
+lang: ko
+excerpt: "JavaScript 내장 Intl.NumberFormat으로 통화, 천단위 구분, 퍼센트 포맷팅을 라이브러리 없이 처리하는 방법."
+---
+
+## 문제
+
+숫자를 "1,000원"이나 "$1,234.56" 같은 형식으로 표시하려고 numeral.js나 accounting.js를 설치하고 있었다. 근데 브라우저에 이미 내장된 기능이 있었다.
+
+## 해결
+
+```javascript
+// 한국 원화
+new Intl.NumberFormat('ko-KR', {
+  style: 'currency',
+  currency: 'KRW',
+  minimumFractionDigits: 0,
+}).format(15000);
+// → "₩15,000"
+
+// 천단위 구분
+new Intl.NumberFormat('ko-KR').format(1234567);
+// → "1,234,567"
+
+// 미국 달러
+new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+}).format(1234.5);
+// → "$1,234.50"
+
+// 퍼센트
+new Intl.NumberFormat('ko-KR', {
+  style: 'percent',
+  minimumFractionDigits: 1,
+}).format(0.1234);
+// → "12.3%"
+```
+
+## 핵심 포인트
+
+- `Intl.NumberFormat`은 모든 모던 브라우저와 Node.js에서 지원된다. IE11도 기본 기능은 된다.
+- `currency: 'KRW'`로 하면 소수점 없이 표시되고, `'USD'`면 자동으로 소수점 2자리가 붙는다. 각 통화의 관례를 알아서 따른다.
+- 같은 포맷을 반복 사용하면 인스턴스를 변수에 저장해두는 게 성능상 좋다. 매번 `new` 하는 건 낭비다.

_posts/2025-07-10-fetch-api-bearer-token-auth-en.md

@@ -0,0 +1,58 @@
+---
+layout: post
+title: "Auto-Inject Bearer Token with a fetch API Auth Helper"
+date: 2025-07-10 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, fetch, Bearer Token, authentication, API]
+author: "Kevin Park"
+lang: en
+excerpt: "Stop repeating Authorization headers — build a fetch wrapper that auto-injects Bearer tokens."
+---
+
+## Problem
+
+Manually adding `headers: { 'Authorization': 'Bearer ...' }` to every API call. Token refresh and error handling duplicated across each function.
+
+## Solution
+
+```typescript
+let authToken: string | null = null;
+
+export function setAuthToken(token: string | null) {
+  authToken = token;
+  if (token) localStorage.setItem('auth_token', token);
+  else localStorage.removeItem('auth_token');
+}
+
+function getAuthToken(): string | null {
+  if (!authToken) authToken = localStorage.getItem('auth_token');
+  return authToken;
+}
+
+async function fetchWithAuth<T>(
+  endpoint: string,
+  options: RequestInit = {}
+): Promise<T> {
+  const token = getAuthToken();
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...(options.headers as Record<string, string>),
+  };
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+
+  const res = await fetch(`${API_URL}${endpoint}`, { ...options, headers });
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ message: 'Unknown error' }));
+    throw new Error(err.message || `HTTP ${res.status}`);
+  }
+
+  return res.json();
+}
+```
+
+## Key Points
+
+- Dual-layer token storage: in-memory variable first, `localStorage` as fallback. Faster than calling `localStorage.getItem` every time.
+- All API functions reduce to `fetchWithAuth<ResponseType>('/endpoint')`. Token management logic lives in one place — easy to add refresh logic later.
+- `res.json().catch()` gracefully handles non-JSON responses (like HTML error pages from the server).