2025년 11월

November 30, 2025 • ☕️ 6 min read

monthly

💡 Newly Learend

JSON 가져오기(import) vs 패치(fetch)

올해 JSON 모듈 가져오기가 새롭게 공식 기능으로 채택되었다는 소식부터…

Copy

import data from './data.json' with { type: 'json' };

// 그리고,
const { default: data } = await import('./data.json', {
  with: { type: 'json' },
});

하지만 이러한 방식의 한계.

에러 핸들링에서 내부 검사
캐싱과 가비지 컬렉션에서 발생하는 메모리 누수

JSON 모듈 가져오기는 데이터의 대부분이 필요한 로컬 정적 리소스에 대해 사용하는 것이 합리적!

Ref https://junghan92.medium.com/ 번역-json-가져오기-import-vs-페치-fetch-41f7672647db

React Compiler

자동 메모이제이션을 통해 React 앱을 최적화하는 빌드 타임 도구

React에서는 이미 useMemo, useCallback, React.memo와 같은 API를 통한 메모이제이션을 제공하고 있다. 이러한 API를 사용하면 React에게 입력이 변경되지 않았다면 특정 부분을 다시 계산할 필요가 없다고 알릴 수 있어 업데이트 시 작업량을 줄일 수 있다.

이 방법은 강력하지만 메모이제이션을 적용하는 것을 잊거나 잘못 적용할 수도 있다. 이 경우 React가 의미 있는 변경 사항이 없는 UI 일부를 확인해야 하므로 효율적이지 않을 수 있다.

React Compiler는 자바스크립트와 React 규칙에 대한 지식을 활용하여 자동으로 컴포넌트와 Hook 내부의 값 또는 값 그룹을 메모이제이션한다. 규칙 위반을 감지할 경우 해당 컴포넌트 또는 Hook을 건너뛰고 다른 코드를 안전하게 컴파일한다.

React Compiler는 어떤 것을 메모이제이션할까?

컴포넌트의 연쇄적인 리렌더링 건너뛰기

<Parent />를 리렌더링하면 <Parent />만이 변경되었음에도 불구하고 그 컴포넌트 트리 내의 여러 컴포넌트가 리렌더링되는 경우.

React 외부에서의 비용이 많이 드는 계산 건너뛰기

데이터가 필요한 컴포넌트나 Hook 내에서 expensivelyProcessAReallyLargeArrayOfObjects()를 호출하는 경우.

Ref

📍 Monthly Pinned

nuqs

타입-세이프한 search param 상태 관리 도구

Copy

"use client";

import { parseAsInteger, useQueryState } from "nuqs";

export function Demo() {
  const [hello, setHello] = useQueryState("hello", { defaultValue: "" });
  const [count, setCount] = useQueryState(
    "count",
    parseAsInteger.withDefault(0),
  );
  return (
    <>
      <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button>
      <input
        value={hello}
        placeholder="Enter your name"
        onChange={(e) => setHello(e.target.value || null)}
      />
      <p>Hello, {hello || "anonymous visitor"}!</p>
    </>
  );
}