[김나린] sprint3#51
Hidden character warning
Conversation
…rint-mission-fe into basic-김나린-sprint2
narin116
added
매운맛🔥
iamjaeholee
left a comment
iamjaeholee
left a comment
There was a problem hiding this comment.
스프린트 미션3 수행하느라 수고하셨어요 🥇
fetch + .then()/.catch()와 async/await + try/catch 두 패턴 모두 잘 구현해 주셨고,
!response.ok 체크 후 throw new Error로 에러를 던지는 방식도 올바르게 작성해 주셨어요 : -)
멘토에게 남겨주신 질문 — "에러를 깔끔하고 효과적으로 핸들링하는 방법"에 대해서도
파일별 코멘트로 함께 답변 드릴게요!
한 가지 가장 중요하게 짚어드릴 부분이 있어요.
두 서비스 파일 모두 http://localhost:4000을 API URL로 사용하고 있어요.
이건 로컬에서 json-server를 직접 실행할 때만 동작하는 주소라서,
다른 환경에서는 아예 동작하지 않아요.
이번 미션에서 요구하는 API 주소는 아래와 같아요.
https://panda-market-api-crud.vercel.app
해당 주소로 변경해 주시고, 그 API 기준으로 다시 테스트해 보시면 좋을 것 같아요!
추가로, node_modules 폴더가 그대로 커밋되어 있어요.
이 폴더는 .gitignore에 추가해서 저장소에 올라가지 않도록 관리해 주시는 게 좋아요 : -)
| @@ -0,0 +1,97 @@ | |||
| //======article========= | |||
| const BASE_URL_ARTICLE = "http://localhost:4000/articles"; | |||
There was a problem hiding this comment.
http://localhost:4000은 로컬에서 json-server를 실행할 때만 동작하는 주소예요.
이번 미션에서 요구하는 실제 API 주소로 변경해 주세요!
const BASE_URL_ARTICLE = "https://panda-market-api-crud.vercel.app/articles";
| console.log("GET: article list =>", result); | ||
| return result; | ||
| }) | ||
| .catch((e) => alert(`에러! ${e}`)); |
There was a problem hiding this comment.
남겨주신 질문 관련해서 답변 드릴게요 : -)
API 함수에서 alert()를 사용하면 몇 가지 문제가 있어요.
- 브라우저 환경에서만 동작해요 (Node.js 등에서는 사용 불가)
- 사용자에게 직접 팝업이 떠서 UX를 방해해요
- API 레이어에서 UI를 건드리는 건 역할 분리에 어긋나요
에러 핸들링의 일반적인 방법은 두 가지예요.
1) 에러를 throw로 다시 던져서 호출하는 쪽에서 처리하게 하기 (권장)
.catch((e) => {
console.error("에러 발생:", e);
throw e;
});2) console에만 출력하기
.catch((e) => console.error("에러 발생:", e));이번 미션 수준에서는 2번으로도 충분하지만,
실제 서비스에서는 1번처럼 에러를 전파해서 UI에서 적절히 처리하는 게 일반적이에요!
| @@ -0,0 +1,80 @@ | |||
| //======products======== | |||
| const BASE_URL_PRODUCTS = "http://localhost:4000/products"; | |||
There was a problem hiding this comment.
ArticleService.js와 동일하게 실제 API 주소로 변경해 주세요!
const BASE_URL_PRODUCTS = "https://panda-market-api-crud.vercel.app/products";
| body: JSON.stringify(requestBody), | ||
| }); | ||
| if (!response.ok) throw new Error(`에러 발생: ${response.status}`); | ||
| const result = await response.json(); |
There was a problem hiding this comment.
파라미터 순서가 (data, id)로 되어 있는데, 다른 함수들과의 일관성을 위해 (id, data) 순서로 맞춰주시는 게 더 자연스러워요!
// 변경 전
patchProduct(modifiedProduct, id)
// 변경 후
patchProduct(id, modifiedProduct)
| @@ -0,0 +1,18 @@ | |||
| //DOM설정 | |||
| //이벤트 설정 | |||
| //CRUD 함수 구현 | |||
There was a problem hiding this comment.
import만 있고 실제로 함수를 호출하는 코드가 없어요.
미션 요구사항 중 "각 함수를 실행하는 코드를 작성하고, 제대로 동작하는지 확인해 주세요" 항목이 있어서 각 함수를 실행하는 코드를 추가해 주셔야 해요!
const articles = await getArticleList(1, 10, "");
console.log(articles);2 participants
요구사항
getArticleList(): GET 메서드를 사용해 주세요.page,pageSize,keyword쿼리 파라미터를 이용해 주세요.getArticle(): GET 메서드를 사용해 주세요.createArticle(): POST 메서드를 사용해 주세요.title,content,image를 포함해 주세요.patchArticle(): PATCH 메서드를 사용해 주세요.deleteArticle(): DELETE 메서드를 사용해 주세요.fetch혹은axios를 이용해 주세요..then()메서드를 이용하여 비동기 처리를 해주세요..catch()를 이용하여 오류 처리를 해주세요.getProductList(): GET 메서드를 사용해 주세요.page,pageSize,keyword쿼리 파라미터를 이용해 주세요.getProduct(): GET 메서드를 사용해 주세요.createProduct(): POST 메서드를 사용해 주세요.name,description,price,tags,images를 포함해 주세요.patchProduct(): PATCH 메서드를 사용해 주세요.deleteProduct(): DELETE 메서드를 사용해 주세요.async/await을 이용하여 비동기 처리를 해주세요.try/catch를 이용하여 오류 처리를 해주세요.export를 활용해 주세요.ProductService.js파일 Product API 관련 함수들을 작성해 주세요.ArticleService.js파일에 Article API 관련 함수들을 작성해 주세요.main.js파일에 작성해 주세요.import를 활용해 주세요.주요 변경사항
파일 구조를 전체적으로 재정립하였습니다.
js코드가 추가되었으며, json-server를 사용했습니다.
api코드를 추가하였습니다.
멘토에게
어떤 에러를 띄워야 할지..등 에러를 깔끔하고 효과적으로 핸들링하는 방법을 아직 잘 모르겠습니다!