데브허브 | DEVHUB | [TID] Next.js Parellel route 활용한 팝업 개발[TID] Next.js Parellel route 활용한 팝업 개발
- Next.js Parallel Routes를 활용한 팝업(모달) 개발 중 발생한 문제 해결 과정을 공유합니다. 🚀
- 첫 방문자 가이드 팝업 구현 시, AI 도구로 만든 초기 코드에 오류가 있었습니다. 🤖
- 핵심 문제는 모달이 열린 상태에서 페이지 새로고침 시 '페이지를 찾을 수 없음' 오류가 발생하는 것이었습니다. 🚫
- 이는 모달 경로가 독립적인 페이지가 아닌 병렬 라우트 하위에만 존재했기 때문입니다. 🗺️
- 해결 전략은
Parallel Routes와 Intercepting Routes를 함께 사용하여 컨텍스트를 유지하는 것입니다. 🔄
- 모달 이동 시 모달을, 새로고침 시 실제 독립 가이드 페이지를 보여주도록 설계하여 오류를 방지합니다. 🖼️
- 실제 발생한
Parallel Intercepted Route Group gives error는 .next 캐시 폴더 삭제 후 재로드로 간단히 해결되었습니다. ✨
- 복잡해 보이는 Next.js 라우팅 오류도 캐시 삭제와 같은 기본적인 방법으로 해결될 수 있음을 강조합니다. 💡
- 이 라이브 방송은 이전에 미해결된 문제를 신속하게 공유하기 위해 진행되었습니다. ⚡