그랩님, 답변 부탁드립니다.Failed to load resour... - 인프런

좋은 강의 잘 듣고 있습니다.

다름이아니라, 이전 강의들에 에러들을 다 해결해서 80강을 듣기 전 까지 상품 상세 페이지 구현 후,

상품 상세 페이지 보기까지 에러 없이 잘 되던 것이

80강을 듣고 코드를 작성 후 부터 '상품 상세 페이지 ' 가 뜨지를 않고 있습니다.

아래 사진 첨부 합니다.

사진 1. 아래 사진으로 DB Browser for SQLITE에서 이미지를 작성 해 준 뒤 일단 이미지는 잘 받아 옵니다.

위에 사진 1에서 가장 마지막인 4번째의 축구공을 누르면,

위와 그리고 아래와 같은 에러가 발생하며 상품 정보 상세 페이지.

즉 상품 정보를 받고 있습니다... 만 그대로 멈춰있고 이전 강의 챕터에서 만든 것이 불러올 수 없게 되어

질문을 남깁니다.

80강 에러 사진 상품 정보를 받고 있습니다 잘 되던 것이 작동을 안함.jpg.webp

즉 상품 정보 상세 페이지가 잘 만들어져서 그대로 에러 없이 잘 해왔는데, 에러가 나서 여쭈어봅니다.

어떻게 해야 이 에러를 해결 할 수 있을까요?

안녕하세요, 인프런 AI 인턴입니다.

isbcom1004님, 문의 주신 404 에러는 주로 서버에서 리소스가 존재하지 않을 때 발생하며, HTTP 요청을 처리하는 URL이 잘못되었을 가능성이 큽니다. 자세한 원인 분석과 해결 방법을 제시해드리겠습니다.

문제 원인 분석:

잘못된 경로: 요청 URL이 정확히 서버에 존재하는지 확인해야 합니다. 예를 들어, :8080/products/{id}처럼 ID가 잘못되었거나, 확장자가 필요할 수도 있습니다.
백엔드 서버 설정: 서버가 요청을 잘 처리하고 있는지 확인합니다. API 경로가 정확히 설정되었는지 살펴보세요.
정적 파일 오류: 데이터베이스나 파일 경로가 변경되어 파일을 찾지 못할 수도 있습니다.

해결 방법:

URL 확인 및 수정:
- 프론트엔드에서 서버로 요청한 URL이 백엔드 엔드포인트와 일치하도록 확인합니다. 특히, axios 요청 시 정확한 URL을 사용해야 합니다.
- URL 템플릿 사용 시 백틱(`) 사용하여 정확하게 변수를 넣었는지 점검하세요.
로그 확인:
- 브라우저 콘솔과 서버 로그(check server logs)를 확인하여 자세한 에러 메시지 및 경로를 파악합니다.
- 잘못된 경로나 쿼리 파라미터가 없는지 확인합니다.
서버 확인:
- 서버에서 상품 상세 정보를 반환하는 API가 정상적으로 작동하는지 테스트합니다. 이때 Postman 등으로 직접 요청을 보내 확인하는 것도 좋은 방법입니다.
- 서버가 에러를 반환하고 있다면, 에러 메시지를 분석하여 수정합니다.
React Key Warning 해결:
- 비슷한 상황에서 React 컴포넌트의 list 요소에 key prop을 부여하지 않아 발생하는 경고가 있을 수 있습니다. 각 리스트 항목에 고유한 key를 설정하여 이 경고를 해소하세요.
이미지 관련 문제 해결:
- 이미지 파일 경로가 정확하게 설정되었는지 확인하세요. 상대경로와 절대경로를 잘못 설정했을 수 있습니다.

이미지 파일에 관련한 추가 도움이 필요하시면, 제공된 이미지를 참고해 정확한 경로를 설정하세요:
- 이미지 1
- 이미지 2

이러한 조치를 통해 에러를 해결할 수 있는지 확인해 보세요. 문제가 지속된다면, 코드와 설정이 잘못된 부분이 없는지 추가적으로 확인해보기 바랍니다.

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

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

그랩님, 답변 부탁드립니다.Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지

문제 원인 분석:

해결 방법: