🚧Fast Refresh had to perform a full reload.🚧

❗문제 내용

Fast Refresh는 React 컴포넌트들이 편집되었을 때 즉각적인 피드백을 해 주는 Next.js의 기능이다. React 컴포넌트들만 export 하는 경우, Fast Refresh는 해당 파일의 코드만 업데이트하고, 컴포넌트를 다시 렌더링 한다. 그런데 이 Fast Refresh가 full reload를 초래해서 토큰 관련 로직을 제대로 테스트할 수 없는 문제가 발생했다.

⚒️ 문제 해결

문제 해결 방법은 경고 메시지에 함께 나오는 next.js 공식 문서 링크를 살펴보면 친절하게 나와 있다. 이 오류는 다음과 같은 이유로 나타날 수 있다고 한다.

• 편집 중인 파일이 React 컴포넌트 외에 다른 것을 export 하고 있는 경우
• React 컴포넌트가 익명 함수인 경우
• React 함수의 이름이 PascalCase가 아닌 camelCase로 되어 있는 경우

내 프로젝트의 경우 3번이 문제였다... 문서에서는 해결 방법도 함께 제공한다.

• export를 분리된 파일로 옮기기
• React 컴포넌트에 named 함수를 사용하기
• 컴포넌트 이름을 PascalCase로 수정하기

🙇‍♂️ 참고자료

Fast Refresh had to perform full reload