Magic Number Duplication → Shared Constant

#10CohesionEasy

Magic Number Duplication → Shared Constant

Magic Number Duplication — 한 곳에 모으기

같은 "한 페이지의 아이템 수" 값(20)이 세 군데에 흩어져 있습니다 — Pagination 컴포넌트, useItems 훅, fetchItems API 헬퍼. 누군가 page size를 25로 바꾸려면 세 군데를 다 찾아서 수정해야 함. 한 군데라도 빠지면 버그.

할 일

PAGE_SIZE 를 상수로 한 번 정의하고 (동일 파일 또는 별도)
세 함수가 모두 같은 상수를 참조하도록 변경
동작 유지

좋은 fix

export const PAGE_SIZE = 20 (모듈 최상위)
세 함수 모두 그 상수만 참조

안 되는 fix

상수만 만들고 한두 군데에서만 사용 (여전히 흩어짐)
20 을 다른 의미로도 같이 쓰는 곳이 있으면 같이 합치지 말 것 (의미가 다른 동일값은 별도)

학습 포인트

Cohesion = 같이 변하는 것은 같이 있어야 함
같은 의미의 상수는 한 곳에서만 정의하고 모두 거기를 참조

// TODO: PAGE_SIZE 를 한 곳에서 정의하고 세 함수가 모두 거기를 참조하도록.

export function Pagination({ total }: { total: number }) {
  const pages = Math.ceil(total / 20); // 매직 넘버
  return (
    <div data-testid="pagination">
      {Array.from({ length: pages }, (_, i) => (
        <button key={i}>{i + 1}</button>
      ))}
    </div>
  );
}

export function getItemsOffset(page: number): number {
  return (page - 1) * 20; // 같은 매직 넘버
}

export function buildItemsQuery(page: number): string {
  const offset = getItemsOffset(page);
  return `/items?offset=${offset}&limit=${20}`; // 또 같은 값
}

Open Sandbox

Sandpack 로드 중…

// TODO: PAGE_SIZE 를 한 곳에서 정의하고 세 함수가 모두 거기를 참조하도록.

export function Pagination({ total }: { total: number }) {
  const pages = Math.ceil(total / 20); // 매직 넘버
  return (
    <div data-testid="pagination">
      {Array.from({ length: pages }, (_, i) => (
        <button key={i}>{i + 1}</button>
      ))}
    </div>
  );
}

export function getItemsOffset(page: number): number {
  return (page - 1) * 20; // 같은 매직 넘버
}

export function buildItemsQuery(page: number): string {
  const offset = getItemsOffset(page);
  return `/items?offset=${offset}&limit=${20}`; // 또 같은 값
}

Open Sandbox