중복 코드 정리 한 방으로 런타임 유지보수 난이도 확 낮춘 날

⚡ 반복되던 런타임 로직을 공통 훅으로 묶어 코드량은 줄이고, 수정 안정성은 올린 하루였습니다! 🙌

한 줄 요약

컴포넌트마다 흩어져 있던 idle/matchMedia 처리 코드를 재사용 가능한 훅으로 통합해 유지보수 난이도를 확 낮췄습니다.

오늘 한 일(핵심만)

• 🔍 jscpd로 TS/TSX/CSS 중복 구간을 최신 기준으로 재측정했습니다.
• ✂️ 런타임 컴포넌트 15개에서 반복되던 로직을 제거했습니다.
• ⚡ lib/client에 useIdleEnabled, useMediaQueryMatch 공통 훅을 추가했습니다.
• ✅ pnpm.cmd lint / pnpm.cmd test 모두 통과(20 files, 85 tests).

왜 이게 중요하냐면 (Motivation & Impact)

동일 패턴이 여러 파일에 복붙되어 있으면 수정 누락으로 회귀 버그가 터지기 쉽습니다. 이번 정리는 “변경 지점 최소화”라는 핵심 가치를 확보했다는 점에서 직접적인 품질 향상 효과가 있습니다. 🎯

문제는 이랬어요 (Issue & Debugging)

idle scheduling과 matchMedia 구독 처리가 파일마다 거의 같은 모양으로 반복되어 있었고, 향후 변경 시 동일 수정이 여러 군데 필요했습니다.

지금은 이렇게 바뀌었어요 (Solution)

공통 훅으로 조건부 활성화 로직 통합

const isMobileViewport = useMediaQueryMatch("(max-width: 1279px)");
const enabled = useIdleEnabled({
  shouldEnable: headings.length > 0 && isMobileViewport,
  timeoutMs: TOC_RUNTIME_IDLE_TIMEOUT_MS,
  fallbackDelayMs: TOC_RUNTIME_FALLBACK_DELAY_MS,
});

각 컴포넌트가 비즈니스 조건만 선언하면 공통 훅이 idle/fallback/구독 처리를 담당하게 되어 코드 가독성과 일관성이 좋아졌습니다.

오늘의 체크(가볍게)

• ✅ jscpd 개선: clones 55 -> 51, duplicatedLines 1047 -> 985, duplicatedTokens 9322 -> 8846
• ⚠️ 남은 중복은 주로 ko/en 로케일 페이지 페어 및 의도된 유사 UI 컴포넌트 영역입니다.

마무리

오늘은 “뭔가를 더 만들었다”보다 “앞으로 고치기 쉬운 구조를 만들었다”가 포인트였습니다. 다음 변경부터 체감 속도가 달라질 겁니다. 🔧

댓글로 남겨줘: 다음 라운드에서 ko/en 페이지 중복도 공통 템플릿화할까요?

#코드정리 #중복제거 #리팩터링 #런타임최적화