docs(blog): SEO 기술 팁 포스트 추가 - JavaScript Set intersection/union/difference (3개 언어)

Author: okai

_posts/2026-03-22-javascript-set-methods-intersection-union-en.md

@@ -0,0 +1,94 @@
+---
+layout: post
+title: "JavaScript Set New Methods - intersection, union, difference Practical Guide"
+date: 2026-03-22 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Set, intersection, union, difference, ES2025]
+author: "Kevin Park"
+lang: en
+excerpt: "JavaScript Set finally gets intersection, union, difference, and symmetricDifference methods. Native set operations without filter + includes hacks."
+---
+
+## Problem
+
+Finding common elements, merging, or computing differences between two arrays used to require clunky `filter` + `includes` combinations.
+
+```javascript
+// The old way - verbose and slow
+const common = arr1.filter(x => arr2.includes(x));
+const merged = [...new Set([...arr1, ...arr2])];
+const diff = arr1.filter(x => !arr2.includes(x));
+```
+
+Since `includes` does an O(n) scan each time, the overall complexity is O(n²). It doesn't scale.
+
+## Solution
+
+Use the new Set composition methods. They shipped in all major browsers in 2024 and are available in Node.js 22+.
+
+```javascript
+const frontend = new Set(['React', 'Vue', 'Svelte', 'Angular']);
+const liked = new Set(['React', 'Svelte', 'Rust', 'Go']);
+
+// Intersection - elements in both
+frontend.intersection(liked);
+// Set {'React', 'Svelte'}
+
+// Union - all elements combined
+frontend.union(liked);
+// Set {'React', 'Vue', 'Svelte', 'Angular', 'Rust', 'Go'}
+
+// Difference - only in frontend
+frontend.difference(liked);
+// Set {'Vue', 'Angular'}
+
+// Symmetric difference - in one but not both
+frontend.symmetricDifference(liked);
+// Set {'Vue', 'Angular', 'Rust', 'Go'}
+```
+
+There are also comparison methods:
+
+```javascript
+const all = new Set([1, 2, 3, 4, 5]);
+const sub = new Set([2, 3]);
+const other = new Set([6, 7]);
+
+sub.isSubsetOf(all);       // true
+all.isSupersetOf(sub);     // true
+all.isDisjointFrom(other); // true
+```
+
+## Practical Patterns
+
+Permission checking becomes much cleaner:
+
+```javascript
+function hasRequiredPermissions(userPerms, requiredPerms) {
+  const user = new Set(userPerms);
+  const required = new Set(requiredPerms);
+  return required.isSubsetOf(user);
+}
+
+const myPerms = ['read', 'write', 'delete'];
+const needed = ['read', 'write'];
+
+hasRequiredPermissions(myPerms, needed); // true
+```
+
+Tag filtering is also straightforward:
+
+```javascript
+const selectedTags = new Set(['JavaScript', 'TypeScript']);
+const postTags = new Set(['JavaScript', 'React', 'Node.js']);
+
+selectedTags.intersection(postTags).size > 0; // true
+```
+
+## Key Points
+
+- Four core methods: `intersection`, `union`, `difference`, `symmetricDifference`
+- All return a new Set without mutating the original (immutable)
+- Hash-based O(n) internally — significantly faster than `filter` + `includes`
+- Supported in Node.js 22+, Chrome 122+, Safari 17+, Firefox 127+
+- `isSubsetOf`, `isSupersetOf`, `isDisjointFrom` for set relationship checks

_posts/2026-03-22-javascript-set-methods-intersection-union-ja.md

@@ -0,0 +1,102 @@
+---
+layout: post
+title: "JavaScript Setの新メソッド完全ガイド - intersection, union, differenceの実践活用"
+date: 2026-03-22 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Set, intersection, union, difference, ES2025]
+author: "Kevin Park"
+lang: ja
+excerpt: "JavaScript Setにintersection、union、differenceメソッドが追加されました。filterとincludesの組み合わせから卒業し、ネイティブの集合演算を活用する方法をご紹介します。"
+---
+
+## 問題
+
+2つの配列から共通要素を抽出したり、結合したり、差分を求める場面は頻繁にあります。
+従来は`filter` + `includes`の組み合わせで処理していましたが、コードが冗長で性能も良くありませんでした。
+
+```javascript
+// 従来の方法 - 冗長で遅い
+const common = arr1.filter(x => arr2.includes(x));
+const merged = [...new Set([...arr1, ...arr2])];
+const diff = arr1.filter(x => !arr2.includes(x));
+```
+
+`includes`が毎回O(n)の探索を行うため、全体的にO(n²)になります。
+データが大きくなると明らかに遅くなります。
+
+## 解決方法
+
+Setに新しく追加された集合演算メソッドを使います。
+2024年に主要ブラウザすべてでサポートが完了し、Node.js 22以降で利用可能です。
+
+```javascript
+const frontend = new Set(['React', 'Vue', 'Svelte', 'Angular']);
+const liked = new Set(['React', 'Svelte', 'Rust', 'Go']);
+
+// 積集合 - 両方に含まれるもの
+frontend.intersection(liked);
+// Set {'React', 'Svelte'}
+
+// 和集合 - すべてを結合
+frontend.union(liked);
+// Set {'React', 'Vue', 'Svelte', 'Angular', 'Rust', 'Go'}
+
+// 差集合 - frontendにだけあるもの
+frontend.difference(liked);
+// Set {'Vue', 'Angular'}
+
+// 対称差集合 - 片方にだけあるもの
+frontend.symmetricDifference(liked);
+// Set {'Vue', 'Angular', 'Rust', 'Go'}
+```
+
+比較メソッドも用意されています。
+
+```javascript
+const all = new Set([1, 2, 3, 4, 5]);
+const sub = new Set([2, 3]);
+const other = new Set([6, 7]);
+
+// 部分集合の確認
+sub.isSubsetOf(all);       // true
+
+// 上位集合の確認
+all.isSupersetOf(sub);     // true
+
+// 互いに素の確認（共通要素なし）
+all.isDisjointFrom(other); // true
+```
+
+## 実践的なパターン
+
+権限チェックなどですぐに活用できます。
+
+```javascript
+function hasRequiredPermissions(userPerms, requiredPerms) {
+  const user = new Set(userPerms);
+  const required = new Set(requiredPerms);
+  return required.isSubsetOf(user);
+}
+
+const myPerms = ['read', 'write', 'delete'];
+const needed = ['read', 'write'];
+
+hasRequiredPermissions(myPerms, needed); // true
+```
+
+タグフィルタリングもシンプルになります。
+
+```javascript
+const selectedTags = new Set(['JavaScript', 'TypeScript']);
+const postTags = new Set(['JavaScript', 'React', 'Node.js']);
+
+selectedTags.intersection(postTags).size > 0; // true
+```
+
+## ポイント
+
+- `intersection`、`union`、`difference`、`symmetricDifference`の4つが核心です
+- 元のSetを変更せず、新しいSetを返します（イミュータブル）
+- `filter` + `includes`よりも高速 - 内部的にハッシュベースのO(n)処理
+- Node.js 22+、Chrome 122+、Safari 17+、Firefox 127+でサポート
+- `isSubsetOf`、`isSupersetOf`、`isDisjointFrom`で集合の関係も確認可能

_posts/2026-03-22-javascript-set-methods-intersection-union.md

@@ -0,0 +1,103 @@
+---
+layout: post
+title: "JavaScript Set 새 메서드 총정리 - intersection, union, difference 실전 활용"
+date: 2026-03-22 09:00:00 +0900
+categories: [Development, Tips]
+tags: [JavaScript, Set, intersection, union, difference, ES2025]
+author: "Kevin Park"
+lang: ko
+excerpt: "JavaScript Set에 드디어 intersection, union, difference 메서드가 추가됐다. 배열 중복 제거를 넘어서 집합 연산을 네이티브로 처리하는 방법 정리."
+---
+
+## 문제
+
+배열 두 개에서 공통 요소를 뽑거나, 합치거나, 차이를 구해야 하는 상황.
+매번 `filter` + `includes` 조합으로 처리했는데 코드가 지저분하고 성능도 별로였다.
+
+```javascript
+// 예전 방식 - 읽기도 귀찮다
+const common = arr1.filter(x => arr2.includes(x));
+const merged = [...new Set([...arr1, ...arr2])];
+const diff = arr1.filter(x => !arr2.includes(x));
+```
+
+`includes`가 매번 O(n) 탐색을 하니까 전체적으로 O(n²)인 거다.
+데이터가 좀만 커져도 느려진다.
+
+## 해결
+
+Set에 새로 추가된 집합 연산 메서드를 쓰면 된다.
+2024년에 모든 주요 브라우저에서 지원이 완료됐고, Node.js 22부터 사용 가능하다.
+
+```javascript
+const frontend = new Set(['React', 'Vue', 'Svelte', 'Angular']);
+const liked = new Set(['React', 'Svelte', 'Rust', 'Go']);
+
+// 교집합 - 둘 다 포함된 것
+frontend.intersection(liked);
+// Set {'React', 'Svelte'}
+
+// 합집합 - 전부 합치기
+frontend.union(liked);
+// Set {'React', 'Vue', 'Svelte', 'Angular', 'Rust', 'Go'}
+
+// 차집합 - frontend에만 있는 것
+frontend.difference(liked);
+// Set {'Vue', 'Angular'}
+
+// 대칭차집합 - 한쪽에만 있는 것
+frontend.symmetricDifference(liked);
+// Set {'Vue', 'Angular', 'Rust', 'Go'}
+```
+
+비교 메서드도 있다.
+
+```javascript
+const all = new Set([1, 2, 3, 4, 5]);
+const sub = new Set([2, 3]);
+const other = new Set([6, 7]);
+
+// 부분집합 확인
+sub.isSubsetOf(all);       // true
+
+// 상위집합 확인
+all.isSupersetOf(sub);     // true
+
+// 서로소 확인 (공통 요소 없음)
+all.isDisjointFrom(other); // true
+```
+
+## 실전에서 쓸만한 패턴
+
+권한 체크 같은 데서 바로 써먹을 수 있다.
+
+```javascript
+function hasRequiredPermissions(userPerms, requiredPerms) {
+  const user = new Set(userPerms);
+  const required = new Set(requiredPerms);
+  return required.isSubsetOf(user);
+}
+
+const myPerms = ['read', 'write', 'delete'];
+const needed = ['read', 'write'];
+
+hasRequiredPermissions(myPerms, needed); // true
+```
+
+태그 필터링도 깔끔해진다.
+
+```javascript
+const selectedTags = new Set(['JavaScript', 'TypeScript']);
+const postTags = new Set(['JavaScript', 'React', 'Node.js']);
+
+// 선택한 태그 중 하나라도 포함되어 있는지
+selectedTags.intersection(postTags).size > 0; // true
+```
+
+## 핵심 포인트
+
+- `intersection`, `union`, `difference`, `symmetricDifference` 4개가 핵심이다
+- 원본 Set을 변경하지 않고 새 Set을 반환한다 (immutable)
+- `filter` + `includes` 조합보다 성능이 훨씬 좋다 - 내부적으로 해시 기반 O(n) 처리
+- Node.js 22+, Chrome 122+, Safari 17+, Firefox 127+에서 지원
+- `isSubsetOf`, `isSupersetOf`, `isDisjointFrom`으로 집합 관계도 확인 가능