JavaScript의 미래 — Signals, Pattern Matching, Type Annotations

// 현재: 프레임워크마다 다른 반응형 시스템
// React: useState, useMemo
// Vue: ref, computed
// Solid: createSignal, createMemo
// Angular: signal, computed

// 미래: 표준 Signal API
const count = new Signal.State(0);
const doubled = new Signal.Computed(() => count.get() * 2);

// State Signal — 읽고 쓸 수 있는 반응형 값
const name = new Signal.State("정훈");
console.log(name.get()); // "정훈"
name.set("길동");
console.log(name.get()); // "길동"

// Computed Signal — 의존성 자동 추적
const greeting = new Signal.Computed(() => {
  return `안녕, ${name.get()}!`; // name에 자동 의존
});

console.log(greeting.get()); // "안녕, 길동!"
name.set("순신");
console.log(greeting.get()); // "안녕, 순신!" — 자동 업데이트

// Watcher — 변경 감지
const watcher = new Signal.subtle.Watcher(() => {
  console.log("값이 변경됨!");
});
watcher.watch(name);

// 표준 Signal이 도입되면:
// 1. 프레임워크 간 상태 공유가 자연스러워짐
// 2. 라이브러리가 프레임워크에 독립적으로 반응형 상태 제공
// 3. 번들 크기 감소 (반응형 시스템을 브라우저가 내장)

// 현재도 Preact, Solid, Angular 등이 Signal 기반
// TC39 제안이 통과되면 표준이 됨

// 현재: switch나 if-else 체인
function describe(value) {
  if (value === null) return "null";
  if (Array.isArray(value)) return `배열(${value.length}개)`;
  if (typeof value === "object") return "객체";
  return typeof value;
}

// Pattern Matching 제안
const result = match (value) {
  when (null): "null";
  when (Number): `숫자: ${value}`;
  when (String): `문자열: "${value}"`;
  when ([_, _, _]): "3개 요소 배열";
  when ({ name: String, age: Number }):
    `${value.name} (${value.age}세)`;
  default: "알 수 없는 타입";
};

// 중첩 패턴
const message = match (response) {
  when ({ status: 200, data: { users: [...users] } }):
    `${users.length}명의 사용자`;
  when ({ status: 404 }):
    "페이지를 찾을 수 없습니다";
  when ({ status: Number and (>= 500) }):
    "서버 에러";
  default:
    "알 수 없는 응답";
};

// Redux 리듀서에 적용하면
function reducer(state, action) {
  return match (action) {
    when ({ type: "INCREMENT" }):
      { ...state, count: state.count + 1 };
    when ({ type: "SET_NAME", payload: String }):
      { ...state, name: action.payload };
    default:
      state;
  };
}

// 현재: JSDoc으로 타입 힌트
/** @param {string} name */
/** @param {number} age */
/** @returns {string} */
function greet(name, age) {
  return `${name}님은 ${age}세입니다.`;
}

// Type Annotations 제안
function greet(name: string, age: number): string {
  return `${name}님은 ${age}세입니다.`;
}
// → 자바스크립트 엔진이 : string 등을 무시 (주석 취급)
// → TypeScript 없이도 타입 도구의 혜택을 받을 수 있음

// 이 제안은 타입 "검사"를 추가하는 것이 아님!
// 엔진이 타입을 무시하므로 런타임 에러는 여전히 발생

function add(a: number, b: number): number {
  return a + b;
}

add("hello", "world"); // 런타임에서 에러 없이 "helloworld" 반환
// → 타입 검사는 여전히 TypeScript나 도구가 담당

// 리소스 자동 정리 (Stage 3)
{
  using file = openFile("data.txt");
  const content = file.read();
  // 블록을 벗어나면 file[Symbol.dispose]() 자동 호출
}
// file이 자동으로 닫힘 — try-finally 불필요

// 비동기 버전
{
  await using db = await connectDB();
  const data = await db.query("SELECT * FROM users");
}
// db가 자동으로 연결 종료

// JSON 모듈 임포트 (Stage 3)
import data from "./data.json" with { type: "json" };

// CSS 모듈
import styles from "./styles.css" with { type: "css" };

// 비동기 이터레이터에도 map, filter 사용 가능
const results = await asyncIterator
  .filter((item) => item.active)
  .map((item) => item.name)
  .take(10)
  .toArray();

// 1. Signals — Preact Signals, SolidJS Signal 사용해보기
import { signal, computed, effect } from "@preact/signals";

const count = signal(0);
const doubled = computed(() => count.value * 2);

// 2. Pattern Matching — ts-pattern 라이브러리
import { match, P } from "ts-pattern";

const result = match(response)
  .with({ status: 200, data: P.select() }, (data) => `성공: ${data}`)
  .with({ status: 404 }, () => "없음")
  .otherwise(() => "기타");

// 3. Type Annotations — TypeScript 또는 JSDoc 사용