📚 fetch 경로 404 에러 대응 정리 - codesquad-masters2025-team01/issue-tracker GitHub Wiki

• Next.js (또는 CRA) 프로젝트에서 useEffect 안의 fetch 호출로 mock 데이터를 가져오려 했지만, 404 Not Found 에러가 발생함.
• 가져오려는 mock 데이터 issueMockData.json가 위치한 경로는 /frontend/public/mockDatas/issueMockData.json

// src/app/issues/page.tsx
const res = await fetch("/frontend/public/mockDatas/issueMockData.json");

에러메세지

GET /frontend/public/mockDatas/issueMockData.json 404 Not Found

• Next.js/Cra는 public 폴더 내 파일을 URL에 그대로 노출하며, 경로에 public 폴더명은 포함하지 않아야 함
• 잘못된 절대경로(/frontend/public/...)를 사용하여 서버가 해당 경로를 찾을 수 없음

• public 폴더 동작 방식: public 내부 파일은 빌드 후 root URL(/) 기준으로 접근
• 절대경로 vs 상대경로: 웹 서버 루트(/) 기준의 경로 사용 필요
• 네트워크 패널 확인: 브라우저 개발자도구의 Network 탭에서 실제 요청 URL 및 응답 상태 코드 확인

• fetch("/frontend/public/mockDatas/issueMockData.json") 를
  fetch("/mockDatas/issueMockData.json") 로 수정하여 mock 데이터를 정상적으로 불러옴