Conversation
iamjaeholee
left a comment
iamjaeholee
left a comment
There was a problem hiding this comment.
스프린트 미션3 수행하느라 수고하셨어요 🥇
Article은 fetch + .then()/.catch(), Product는 async/await + try/catch로
비동기 패턴을 각각 잘 맞춰 구현해주셨어요!
!res.ok 체크 후 throw new Error()로 에러를 던져주신 부분도 좋아요 : -)
몇 가지 참고해주시면 좋을 부분을 파일별 코멘트로 남겨드릴게요!
| @@ -0,0 +1,72 @@ | |||
| const BASE_URL = 'https://panda-market-api-crud.vercel.app'; | |||
There was a problem hiding this comment.
Product API는 이번 미션에서 axios를 활용하도록 요구하고 있었는데, fetch로 구현하셨어요.
axios를 한번 익혀두시면 더 넓은 경험이 될 것 같아요 : -)
| // 상세 조회 | ||
| export const getProduct = async (productId) => { | ||
| try { | ||
| const res = await fetch(`${res.status}`); |
There was a problem hiding this comment.
URL에 res.status가 들어가 있는데, 이 시점에는 아직 res가 선언되기 전이라
실행하면 ReferenceError가 발생해요.
아마 아래처럼 작성하려고 하셨던 것 같아요!
const res = await fetch(`${BASE_URL}/products/${productId}`);| if (!res.ok) throw new Error(`상품 조회 실패: ${res.status}`); | ||
| return await res.json(); | ||
| } catch (err) { | ||
| console.error(err.message); |
There was a problem hiding this comment.
catch 블록에서 에러를 로그만 찍고 끝내면, 호출부까지 에러가 전달되지 않아요.
main.js에서 에러를 감지하거나 처리하려면 throw로 다시 던져주셔야 해요.
} catch (err) {
console.error(err.message);
throw err; // ← re-throw
}ArticleService.js의 .catch()도 동일하게 적용해 주시면 좋을 것 같아요 : -)
| @@ -0,0 +1,65 @@ | |||
| const BASE_URL = 'https://panda-market-api-crud.vercel.app'; | |||
There was a problem hiding this comment.
ProductService.js에도 동일한 BASE_URL이 선언되어 있어요.
URL이 바뀌면 두 곳을 모두 수정해야 하는 상황이거든요.
공통 설정 파일(예: config.js)로 분리해서 import해서 쓰면 더 좋을 것 같아요 : -)
2 participants
No description provided.