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

Author: realcoding2003

_posts/2026-01-29-python-dataclass-frozen-immutable-en.md

@@ -0,0 +1,67 @@
+---
+layout: post
+title: "Create Immutable Data Objects with Python dataclass(frozen=True)"
+date: 2026-01-29 09:00:00 +0900
+categories: [Development, Tips]
+tags: [Python, dataclass, Type-Safety, Backend]
+author: "Kevin Park"
+lang: en
+excerpt: "Use Python's frozen dataclass to create immutable objects with built-in validation and hashability."
+---
+
+## Problem
+
+You create objects to hold configuration or API response data, but accidental mutations somewhere in the code lead to painful debugging sessions. Dictionaries lack type hints, and making regular classes immutable requires boilerplate.
+
+## Solution
+
+`dataclass(frozen=True)` solves this in one line.
+
+```python
+from dataclasses import dataclass
+
+@dataclass(frozen=True)
+class DatabaseConfig:
+    host: str
+    port: int
+    name: str
+    max_connections: int = 10
+
+config = DatabaseConfig(host="localhost", port=5432, name="myapp")
+
+config.port = 3306  # FrozenInstanceError!
+```
+
+Add creation-time validation with `__post_init__`:
+
+```python
+@dataclass(frozen=True)
+class PriceRange:
+    min_price: float
+    max_price: float
+
+    def __post_init__(self):
+        if self.min_price < 0:
+            raise ValueError("min_price must be >= 0")
+        if self.min_price > self.max_price:
+            raise ValueError("min_price cannot exceed max_price")
+```
+
+Frozen dataclasses are hashable, so they work as dictionary keys or set members:
+
+```python
+@dataclass(frozen=True)
+class Coordinate:
+    x: float
+    y: float
+
+visited = set()
+visited.add(Coordinate(1.0, 2.0))  # Works as a set member
+```
+
+## Key Points
+
+- `@dataclass(frozen=True)` creates immutable objects with minimal boilerplate
+- Any mutation attempt raises `FrozenInstanceError`
+- Use `__post_init__` for creation-time validation
+- Frozen dataclasses are hashable — usable as dict keys and set members

_posts/2026-01-29-python-dataclass-frozen-immutable-ja.md

@@ -0,0 +1,67 @@
+---
+layout: post
+title: "Python dataclass(frozen=True)で不変データオブジェクトを作成する"
+date: 2026-01-29 09:00:00 +0900
+categories: [Development, Tips]
+tags: [Python, dataclass, 型安全, バックエンド]
+author: "Kevin Park"
+lang: ja
+excerpt: "Pythonのfrozen dataclassを使って、不変オブジェクトを簡単に作成する方法を解説します。"
+---
+
+## 問題
+
+設定値やAPIレスポンスデータを保持するオブジェクトを作成したものの、コードのどこかで誤って値が変更されると、デバッグが非常に困難になります。辞書型ではタイプヒントが効かず、通常のクラスで不変にするにはボイラープレートが必要です。
+
+## 解決方法
+
+`dataclass(frozen=True)`を使えば、1行で解決できます。
+
+```python
+from dataclasses import dataclass
+
+@dataclass(frozen=True)
+class DatabaseConfig:
+    host: str
+    port: int
+    name: str
+    max_connections: int = 10
+
+config = DatabaseConfig(host="localhost", port=5432, name="myapp")
+
+config.port = 3306  # FrozenInstanceError!
+```
+
+`__post_init__`で生成時のバリデーションも可能です。
+
+```python
+@dataclass(frozen=True)
+class PriceRange:
+    min_price: float
+    max_price: float
+
+    def __post_init__(self):
+        if self.min_price < 0:
+            raise ValueError("min_priceは0以上である必要があります")
+        if self.min_price > self.max_price:
+            raise ValueError("min_priceがmax_priceを超えることはできません")
+```
+
+frozen dataclassはハッシュ可能なので、辞書のキーやsetの要素としても使えます。
+
+```python
+@dataclass(frozen=True)
+class Coordinate:
+    x: float
+    y: float
+
+visited = set()
+visited.add(Coordinate(1.0, 2.0))  # setに追加可能
+```
+
+## ポイント
+
+- `@dataclass(frozen=True)`で最小限のコードで不変オブジェクトを作成できます
+- 属性の変更を試みると`FrozenInstanceError`が発生します
+- `__post_init__`で生成時のバリデーションが可能です
+- frozen dataclassはハッシュ可能なので、dictのキーやsetの要素として使用できます

_posts/2026-01-29-python-dataclass-frozen-immutable.md

@@ -0,0 +1,73 @@
+---
+layout: post
+title: "Python dataclass(frozen=True)로 불변 데이터 객체 만들기"
+date: 2026-01-29 09:00:00 +0900
+categories: [Development, Tips]
+tags: [Python, dataclass, 타입안전, 백엔드]
+author: "Kevin Park"
+lang: ko
+excerpt: "Python dataclass에 frozen=True를 쓰면 불변 객체를 간단하게 만들 수 있다. 설정값이나 상수 객체에 딱이다."
+---
+
+## 문제
+
+설정값이나 API 응답 데이터를 담는 객체를 만들었는데, 코드 어딘가에서 실수로 값이 변경되면 디버깅이 지옥이 된다. 딕셔너리로 넘기면 타입 힌트도 안 되고, 일반 클래스로 만들면 `__setattr__` 오버라이드하고 난리를 쳐야 한다.
+
+## 해결
+
+`dataclass(frozen=True)`를 쓰면 한 줄로 해결된다.
+
+```python
+from dataclasses import dataclass
+
+@dataclass(frozen=True)
+class DatabaseConfig:
+    host: str
+    port: int
+    name: str
+    max_connections: int = 10
+
+config = DatabaseConfig(
+    host="localhost",
+    port=5432,
+    name="myapp"
+)
+
+# 값 변경 시도하면 에러 발생
+config.port = 3306  # FrozenInstanceError!
+```
+
+`__post_init__`으로 생성 시점 검증도 가능하다.
+
+```python
+@dataclass(frozen=True)
+class PriceRange:
+    min_price: float
+    max_price: float
+
+    def __post_init__(self):
+        if self.min_price < 0:
+            # frozen이라 object.__setattr__ 사용
+            raise ValueError("min_price는 0 이상이어야 한다")
+        if self.min_price > self.max_price:
+            raise ValueError("min_price가 max_price보다 클 수 없다")
+```
+
+frozen dataclass는 해시 가능해서 딕셔너리 키나 set 원소로도 쓸 수 있다.
+
+```python
+@dataclass(frozen=True)
+class Coordinate:
+    x: float
+    y: float
+
+visited = set()
+visited.add(Coordinate(1.0, 2.0))  # set에 넣을 수 있다
+```
+
+## 핵심 포인트
+
+- `@dataclass(frozen=True)`로 불변 객체를 간단하게 생성
+- 속성 변경 시도 시 `FrozenInstanceError` 발생
+- `__post_init__`으로 생성 시점 검증 가능
+- frozen dataclass는 hashable이라 dict 키나 set 원소로 사용 가능

_posts/2026-01-30-css-is-where-selector-nesting-en.md

@@ -0,0 +1,74 @@
+---
+layout: post
+title: "Reduce Selector Repetition with CSS :is() and :where()"
+date: 2026-01-30 09:00:00 +0900
+categories: [Development, Tips]
+tags: [CSS, Selectors, Frontend, Web-Development]
+author: "Kevin Park"
+lang: en
+excerpt: "How to use CSS :is() and :where() to eliminate repetitive selectors, and the key specificity difference between them."
+---
+
+## Problem
+
+Applying similar styles to multiple elements requires listing out selectors repeatedly:
+
+```css
+.article h1,
+.article h2,
+.article h3,
+.article h4 {
+  color: #333;
+  line-height: 1.4;
+}
+```
+
+This gets tedious fast, especially with nested contexts.
+
+## Solution
+
+`:is()` lets you group selector lists:
+
+```css
+.article :is(h1, h2, h3, h4) {
+  color: #333;
+  line-height: 1.4;
+}
+
+/* Group both sides */
+:is(.article, .sidebar) :is(h1, h2, h3, h4) {
+  line-height: 1.4;
+}
+```
+
+`:where()` has the same syntax but **always has zero specificity**:
+
+```css
+/* :is() - takes the highest specificity argument */
+:is(.class, #id) p { } /* specificity: (1,0,1) */
+
+/* :where() - always zero specificity */
+:where(.class, #id) p { } /* specificity: (0,0,1) */
+```
+
+This makes `:where()` ideal for default styles that should be easy to override:
+
+```css
+/* Base styles - easily overridable */
+:where(.btn) {
+  padding: 8px 16px;
+  border-radius: 4px;
+}
+
+/* Simple class override works */
+.my-btn {
+  padding: 12px 24px;
+}
+```
+
+## Key Points
+
+- Both `:is()` and `:where()` group selector lists to reduce repetition
+- `:is()` adopts the highest specificity among its arguments
+- `:where()` always contributes zero specificity, making overrides easy
+- Use `:where()` for resets/libraries, `:is()` for component styles

_posts/2026-01-30-css-is-where-selector-nesting-ja.md

@@ -0,0 +1,74 @@
+---
+layout: post
+title: "CSS :is()と:where()セレクタで重複セレクタを減らす方法"
+date: 2026-01-30 09:00:00 +0900
+categories: [Development, Tips]
+tags: [CSS, セレクタ, フロントエンド, Web開発]
+author: "Kevin Park"
+lang: ja
+excerpt: "CSS :is()と:where()で繰り返しのセレクタをスッキリ減らす方法と、両者のspecificity の違いを解説します。"
+---
+
+## 問題
+
+CSSで似たようなスタイルを複数の要素に適用するには、セレクタを長々と列挙する必要があります。
+
+```css
+.article h1,
+.article h2,
+.article h3,
+.article h4 {
+  color: #333;
+  line-height: 1.4;
+}
+```
+
+見ているだけで疲れてしまいます。
+
+## 解決方法
+
+`:is()`を使えば、セレクタリストをグループ化できます。
+
+```css
+.article :is(h1, h2, h3, h4) {
+  color: #333;
+  line-height: 1.4;
+}
+
+/* 両方をグループ化することも可能 */
+:is(.article, .sidebar) :is(h1, h2, h3, h4) {
+  line-height: 1.4;
+}
+```
+
+`:where()`も構文は同じですが、**specificityが常に0**という違いがあります。
+
+```css
+/* :is() - 最も高いspecificityの引数に従う */
+:is(.class, #id) p { } /* specificity: (1,0,1) */
+
+/* :where() - 常にspecificity 0 */
+:where(.class, #id) p { } /* specificity: (0,0,1) */
+```
+
+そのため、`:where()`は簡単にオーバーライドできるデフォルトスタイルに最適です。
+
+```css
+/* ベーススタイル - 後から簡単に上書き可能 */
+:where(.btn) {
+  padding: 8px 16px;
+  border-radius: 4px;
+}
+
+/* このシンプルなクラスで上書きできます */
+.my-btn {
+  padding: 12px 24px;
+}
+```
+
+## ポイント
+
+- `:is()`と`:where()`はセレクタリストをグループ化して重複を減らします
+- `:is()`は引数の中で最も高いspecificityを採用します
+- `:where()`はspecificityが常に0なので、オーバーライドが簡単です
+- リセットCSS/ライブラリには`:where()`、コンポーネントスタイルには`:is()`が適しています