인프런 커뮤니티 질문&답변

추가로, 최근에 올리신 질문들 모두 답변에 아무런 반응을 해주지 않으셨는데 혹시 특별한 이유가 있을까요? ㅠㅠ 도움이 되는 답변이 있었다면 "해결" 버튼이나 답글로 알려주시면 감사하겠습니다.

안녕하세요 이정환입니다.

혹시 실습 과정중에 캐시를 전부 무효화 하셨나요? 강의의 흐름대로 진행된다면, Footer 컴포넌트에서 불러오는 데이터는 캐싱된 데이터가 존재하기 때문에 백엔드 서버를 종료하더라도 오류가 발생하지 않아야 하는데, 현재 캐시 데이터가 사라진것 같습니다 🥲

물론 캐시 데이터가 사라져도 문제는 없습니다! 잘못하신것도 당연히 아니구요!

이어서 실습을 진행하시려면 Footer 컴포넌트를 잠깐 주석처리 해 비 활성화 하신 다음 실습 진행하시는 걸 추천드립니다!

안녕하세요, 인프런 AI 인턴입니다. Full Stack 개발자님.

Next.js에서 error.tsx를 활용하여 에러 핸들링을 시도하는 부분에서 문제가 발생한 것 같아 이에 대한 해결 방법을 안내해드리겠습니다.

문제 원인 분석 및 해결방법

1. error.tsx 파일 위치:

   • error.tsx 파일은 해당 디렉토리 내의 에러를 핸들링하기 때문에, Footer 컴포넌트가 글로벌 레이아웃에서 사용되고 있을 경우, 글로벌하게 오류를 처리할 구성요소가 필요할 수 있습니다. 즉, error.tsx가 올바르게 위치해 있는지 확인해야 합니다. 상황에 따라, layout.tsx 같은 상위 컴포넌트에서 에러를 잡도록 global-error.tsx를 도입하는 것이 적절할 수 있습니다.
     

2. 글로벌 에러 핸들러 사용:

   • Next.js에서 루트 수준의 에러를 핸들링하기 위해서는 global-error.tsx라는 이름의 파일을 프로젝트의 최상위 /app 경로에 만들어야 하며, 이 파일에서 HTML, BODY 태그까지 포함하여 기본적인 에러 페이지 구조를 설정할 수 있습니다. 이는 layout.tsx에서 발생하는 오류도 처리할 수 있게 해줍니다.
     

3. Cache 옵션 점검:

   • Footer 컴포넌트의 fetch 메서드에서 캐시 옵션이 force-cache로 설정되어 있는 경우, 이 옵션이 에러를 무효화할 수 있습니다. 이미 문제가 해결되지 않았다면, 캐시 옵션을 no-store로 변경하여 실시간 에러를 확인하는 것도 좋은 방법입니다.
     

4. 서버 상태 확인:

   • 서버가 종료되었을 때 fetch 요청이 실패하며 발생하는 오류는 자연스러운 현상입니다. 이때 error.tsx가 작동하지 않는 이유는, 레이아웃 수준에서 발생한 에러가 하위 디렉토리의 에러 핸들러로 전파되지 않기 때문일 수 있습니다.
     

유사한 문제를 다룬 답변을 아래 링크에서 확인하실 수 있습니다:
- 포괄적 에러 핸들링 error.tsx이 정상 작동 하지 않습니다
- error.tsx를 app 폴더 바로 아래에 둬도 footer에서 발생하는 오류는 잡히지 않습니다

이 외에도 위 사항들을 점검하고 문제가 지속되면 새로운 방법을 찾아보거나 추가적인 정보 공유를 고려할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.