[김승우] sprint4 #71
[김승우] sprint4 #71
Conversation
| }); | ||
|
|
||
| if (!response.ok) { | ||
| throw new Error(`HTTP error! status: ${response.status}`); |
There was a problem hiding this comment.
api 요청 시 서버응답으로부터 4xx,5xx 에러를 받을 때 서버에서 어떤 에러인지 에러메시지를 보내주는데, 그 안의 에러메시지를 이용하려면 아래와 같이 수정해볼 수 있겠습니다. 여기서 throw 로 던져진 에러를 받아서 처리하는 곳에서 사용자에게 어떤 이유에서 발생한 에러인지 알려줄 수 있으면 좋겠죠?
const errorData = await response.json();
throw new Error(errorData.message || 에러: ${response.status});
| } else { | ||
| console.error('Error:', e.message); | ||
| } | ||
| } |
There was a problem hiding this comment.
서버에서 주는 에러메시지(e.response.data)를 콘솔에 잘 보여주고 있습니다. 그런데 api 함수 정의 부분에서 에러 처리를 바로 하기보다는 api함수는 response.data를 리턴해주는 부분까지만 정의하고, 에러처리는 api 함수를 호출하는 곳 상위레벨(main.js)에서 try/catch로 처리를 해주시는 것이 보다 권장되는 패턴입니다. 여러가지 api 함수호출 해야하는 경우 에러처리를 한번에 모아서 처리할 수도 있어 에러핸들링 코드에 대한 재사용성도 좋아집니다.
|
|
||
| // 상품 목록 조회 | ||
| // const productList = await productAPI.getProductList({pageSize: 10}); | ||
| // console.log(productList); |
There was a problem hiding this comment.
왜 주석처리 해두셨을까요? product 에 대한 api 호출 코드만 있고 article api 호출 코드는 보이지 않습니다.
api 함수를 호출하는 코드 내에서 try/catch 문으로 에러 핸들링을 해주시는 것을 권장 드립니다. 에러 핸들링 코드를 재사용하여 더 적은 코드로 한번에 에러처리가 가능해지고 깔끔한 느낌을 줍니다.
| // 상품 등록 | ||
| async createProduct(data) { | ||
| try { | ||
| const response = await apiService.post('/products', data); |
There was a problem hiding this comment.
data 를 post 메소드의 인자로 넘기기 전에 데이터타입을 점검하는 유효성검사가 필요합니다.
|
fetch와 axios 로 각각 api 함수를 잘 작성해주셨습니다. 에러핸들링은 가급적 api 함수를 호출하는 상위 모듈에서 try/catch로 해보는 것을 권장 드립니다. 추후에 UI와 API를 통합해서 꼼꼼하게 테스트하게 되면 자연스럽게 어떤 패턴이 코드 재사용성을 높일 수있는 지에 대해 알게 되는 부분들이 많답니다. 고생하셨습니다. |
|
앗!! 꼼꼼한 리뷰 감사합니다! |
요구사항
기본
API 문서
상품
게시글
멘토에게