ECMAScript 2025 Set 메서드 시각화 + 미지원 환경 폴백
한 줄 요약 - 두 집합의 원소를 토글하면 합집합/교집합/차집합/대칭차가 실시간으로 갱신됩니다. ES2025 Set 메서드를 눈으로 확인해요.
권한 집합 비교, 태그 필터, 중복 제거 등 집합 연산을 코드로 자주 다룰 때.
a.union(b)/a.intersection(b)/a.difference(b)/a.symmetricDifference(b)를 그대로 호출.
구형 환경 대비로 메서드가 없으면 [...a].filter 등으로 폴백.
그동안 직접 구현하던 집합 연산이 언어 표준 메서드로 들어왔습니다. 가독성과 의도가 분명해집니다.
Iterator 헬퍼 등 일부 ES2025 기능은 최신 환경에서만.
원본 Set은 불변으로 유지되고 새 Set이 반환됩니다.
권한/역할 비교, 태그 교집합, 변경 감지(추가/삭제)
import type { Metadata } from "next";
import { Es2025SetOpsDemo } from "./-components/Es2025SetOpsDemo";
export const metadata: Metadata = {
title: "ES2025 Set 연산 시각화 (데모)",
description:
"ECMAScript 2025의 Set 메서드(union/intersection/difference/symmetricDifference)를 두 집합을 토글하며 실시간으로 확인하는 데모. 미지원 환경 폴백 포함.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<Es2025SetOpsDemo />
</main>
);
}