[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to l... - 인프런

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

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

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

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

아래 사진 첨부 합니다.

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

참고로, 사진 1 은 VS CODE 폴더(GRAB-MARKET-SERVER)에서 server.js에 소스
order : [['createdAt','DESC']], 입력을 일단 개인적인 이유로 빼었기 떄문에, 판매되는 상품에 순서가
바뀌어 있습니다.

order : [['createdAt','DESC']] 을 넣게 된다면 상품 순서는 축구공,농구공,키보드,키보드로 화면에 나타나는데요, 아래 사진과 같아요.

상품 order createdat desc 내림차순 url 1이 되어야하는데 왜 다를까.jpg.webp

제일 먼저 축구공을 누르게 되면 localhost:3000/products/4라고 뜨기에요, 원래 제대로 되려면,
축구공을 누르면 localhost:3000/products/1로 되어야 하는거 아닌가요? 그리고 위 첨부한 사진 보면
왼쪽과 같이 에러가 발생하는데요, 어떻게 해야 제대로 작동 할까요?

그리고 잘못 소스코드를 입력하고 실행하다보니 키보드가 2개 생성 되었습니다만, 이것을
하나만 남기고 싶은데어떻게 해야 하는지요? -->DB Browser for SQLite에서 삭제하는 방법이 있나요?

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

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

즉 상품 정보를 받고 있습니다... 만 그대로 멈춰있고 이전 강의 챕터에서 만든 것(상품상세페이지) 불러올 수 없게 되어 질문을 남깁니다.

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

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

-추가 질문 : 상품 정보를 받고 있습니다... 페이지 경우는 POSTMAN 가짜 서버(=mock서버)에서랑
관련이 깊은 건가요? POSTMAN(=mock서버)에서 그랩님의 강의를 따라올때, 다른점들이 몇가지 있었는데요(몇가지 다른점은 에러가 있었습니다.), 그래서 위 에러가 발생하는 건가요? 다른점이 발생한 경우라면 포스트맨 에러 스샷을 추가로 올리겠습니다. 그럼 봐주실 수 있나요?

아니라면 POSTMAN(=mock서버)과 관련 없이 우리는 Node 서버를 구축 했기에,
Mock서버인 POSTMAN과 전혀 상관이 없는 건가요?

[상품 상세 페이지] 불러오지 못하는 것은 만일 Node 서버의 문제이지, Postman과 상관 없다면,node 서버측에서는 무엇을 고쳐주거나 어떤 소스를 작성해줘야 에러가 해결될까요?

더불어서 79강 강의 2분 56초 부터 3분 32초 보면,
POSTMAN 테스트를 하는 부분이 나오는데,
여기서 아래 사진을 보면[왼쪽 메뉴 get product] Body 부분에서
그랩 강사님 화면과 다르게 뜨는데, 이것은 왜 그런건가요?

어떻게 해야 http://localhost:8080/products/1 , http://localhost:8080/products/2 ,
http://localhost:8080/products/3 을 제대로 작동하게 할 수 있나요?

마지막으로 [참고 사진]으로 POSTMAN의 잘 작동하는 [get products]사진 첨부해 봅니다.

어떻게 해야 이 모든 에러를 해결 할 수 있을지에 대해 자세한 답변 부탁드립니다.

안녕하세요, 인프런 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) 상품 상세 페이지 질문입니다.

문제 원인 분석:

해결 방법: