내용

로컬 서버에서 Fast Refresh가 무한 루프에 빠져 계속해서 리빌드되는 현상이 발생

🚨 문제 상황

로컬 서버를 실행하면 콘솔에 다음과 같은 메시지가 끊임없이 반복되었습니다

[Fast Refresh] rebuilding
[Fast Refresh] done in 1018ms
[Fast Refresh] rebuilding
[Fast Refresh] done in 883ms
[Fast Refresh] rebuilding
[Fast Refresh] done in 959ms

🔍 원인 분석

문제의 원인을 찾기 위해 다음과 같은 접근을 했습니다:

1. TypeScript 오류 확인

처음에는 TypeScript 타입 오류가 원인일 것으로 생각했습니다. 특히 components/loading-spinner.tsx 파일에서 타입 관련 오류가 발생하고 있었기 때문입니다.

npx tsc --noEmit --pretty

하지만 TypeScript 컴파일러는 실제로는 오류를 찾지 못했습니다.

2. Next.js 설정 검토

문제의 실제 원인은 next.config.mjs 파일의 webpack 설정에 있었습니다:

// 문제가 되던 설정
if (dev) {
  config.watchOptions = {
    poll: 1000,        // 1초마다 파일 변경 체크
    aggregateTimeout: 300,
    ignored: /node_modules/,
  }
}

이 설정이 개발 모드에서 파일 변경을 너무 자주 감지하여 무한 리빌드를 유발하고 있었습니다.

✅ 해결 방법

1. watchOptions 설정 제거

문제가 되는 webpack watchOptions 설정 제거

// 개발 모드 최적화 - watchOptions 제거하여 Fast Refresh 무한 루프 방지
// if (dev) {
//   config.watchOptions = {
//     poll: 1000,
//     aggregateTimeout: 300,
//     ignored: /node_modules/,
//   }
// }

2. Next.js 기본 파일 감시 시스템 사용

Next.js의 내장된 파일 감시 시스템이 이미 충분히 효율적이므로, 별도의 polling 설정이 불필요했습니다.

🎯 결과

무한 Fast Refresh 문제가 완전히 해결되었습니다:

• ✅ 개발 서버 안정화
• ✅ 정상적인 Hot Reload 작동
• ✅ 브라우저 콘솔 깨끗해짐

💡 교훈

1. 과도한 최적화의 위험성

성능 향상을 위한 설정이 오히려 문제를 일으킬 수 있습니다. 특히 개발 도구의 기본 설정을 변경할 때는 신중해야 합니다.

2. 문제 해결의 체계적 접근

• TypeScript 오류 → 설정 파일 → 환경 요인 순으로 체계적으로 접근
• 복잡한 문제일수록 기본 설정부터 의심해볼 필요

3. Next.js의 내장 최적화 신뢰

Next.js는 이미 충분히 최적화된 개발 환경을 제공합니다. 불필요한 커스터마이징보다는 프레임워크의 기본 설정을 신뢰하는 것이 좋습니다.