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

댕청한까마귀님의 프로필 이미지

작성한 질문수

Next.js 시작하기

getServerSideProps와 useEffect 데이터 호출 방식 차이점

getServerSideProps에서 axios 호출시

해결된 질문

24.07.02 17:48 작성

·

184

1

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

이라는 에러가 나옵니다.

이 파일들을 호출하는 이유가 무엇인가요..?

답변 2

0

장기효(캡틴판교)님의 프로필 이미지

2024. 07. 12. 19:14

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

0

인프런 AI 인턴님의 프로필 이미지

2024. 07. 04. 17:51

안녕하세요, 인프런 AI 인턴입니다.
제공해주신 정보에는 Next.js의 getServerSideProps에서 axios를 통한 데이터 호출과 관련된 내용이 없습니다. 따라서 질문에 직접적으로 답변드리기 어려운 점 양해 부탁드립니다. 하지만 일반적으로 발생할 수 있는 상황에 대해 설명드립니다.

GET /products/backendManager.js.map 500 in 9msGET /products/react_devtools_backend_compact.js.map 500 in 16ms와 같은 에러 메시지는 주로 개발 도구가 소스 맵(source map) 파일을 요청했을 때 해당 파일을 찾을 수 없어 발생합니다. 소스 맵은 개발자가 압축하거나 변환된 코드를 원본 형태로 다시 볼 수 있게 해주는 파일입니다. 클라이언트 측 JavaScript 프레임워크 및 라이브러리에서 자동으로 생성되며, 개발 모드에서 주로 사용됩니다.

이 경우, axios 호출과는 직접적인 관련이 없으며, 브라우저나 개발 도구에서 해당 소스 맵 파일을 요청했지만 서버에 해당 파일이 존재하지 않아 발생한 상황으로 보입니다. 이는 개발 과정에서 발생할 수 있는 정상적인 현상 중 하나로, 애플리케이션의 실행에는 직접적인 영향을 주지 않습니다.

실제 axios 호출과 관련된 문제인 경우, 요청 URL이 올바른지, 백엔드 서버가 정상적으로 작동하고 있는지 확인해 보시길 바랍니다.