getServerSideProps에서 axios 호출시

Question

const response = await axios.get(`http://localhost:4000/products/${id}`); 로 호출할때 클라이언트에서는 별다른 에러 메시지가 나오지 않으나 npm run dev로 실행한 서버 터미널에서는 GET /products/backendManager.js.map 500 in 9ms ⨯ AxiosError: Request failed with status code 404 GET /products/react_devtools_backend_compact.js.map 500 in 16ms 이라는 에러가 나옵니다. 이 파일들을 호출하는 이유가 무엇인가요..?

캡틴판교 · Answer

안녕하세요, 제가 답이 늦었네요 🙂 아래 답변에 잘 설명이 되어 있네요. .js.map 파일은 대부분 소스맵 이라고 보시면 됩니다. 요건 에러 났을 때 파일 라인 위치를 가리키기 위해 필요한 거라고 봐주시면 될 것 같아요 🙂

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 제공해주신 정보에는 Next.js의 getServerSideProps 에서 axios를 통한 데이터 호출과 관련된 내용이 없습니다. 따라서 질문에 직접적으로 답변드리기 어려운 점 양해 부탁드립니다. 하지만 일반적으로 발생할 수 있는 상황에 대해 설명드립니다. GET /products/backendManager.js.map 500 in 9ms 및 GET /products/react_devtools_backend_compact.js.map 500 in 16ms 와 같은 에러 메시지는 주로 개발 도구가 소스 맵(source map) 파일을 요청했을 때 해당 파일을 찾을 수 없어 발생합니다. 소스 맵은 개발자가 압축하거나 변환된 코드를 원본 형태로 다시 볼 수 있게 해주는 파일입니다. 클라이언트 측 JavaScript 프레임워크 및 라이브러리에서 자동으로 생성되며, 개발 모드에서 주로 사용됩니다. 이 경우, axios 호출과는 직접적인 관련이 없으며, 브라우저나 개발 도구에서 해당 소스 맵 파일을 요청했지만 서버에 해당 파일이 존재하지 않아 발생한 상황으로 보입니다. 이는 개발 과정에서 발생할 수 있는 정상적인 현상 중 하나로, 애플리케이션의 실행에는 직접적인 영향을 주지 않습니다. 실제 axios 호출과 관련된 문제인 경우, 요청 URL이 올바른지, 백엔드 서버가 정상적으로 작동하고 있는지 확인해 보시길 바랍니다.