[하성민] sprint3

[SeongminHa-Jack]

기본 요구사항
공통

Github에 스프린트 미션 PR을 만들어 주세요.

'https://panda-market-api-crud.vercel.app/docs/#/Article' API를 이용하여 아래 함수들을 구현해 주세요.

getArticleList() : GET 메서드를 사용해 주세요.

page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.

getArticle() : GET 메서드를 사용해 주세요.

createArticle() : POST 메서드를 사용해 주세요.

request body에 title, content, image 를 포함해 주세요.

patchArticle() : PATCH 메서드를 사용해 주세요.

deleteArticle() : DELETE 메서드를 사용해 주세요.

fetch 혹은 axios 를 이용해 주세요.

응답의 상태 코드가 2XX가 아닐 경우, 에러메시지를 콘솔에 출력해 주세요.

.then() 메서드를 이용하여 비동기 처리를 해주세요.

.catch() 를 이용하여 오류 처리를 해주세요.

'https://panda-market-api-crud.vercel.app/docs/#/Product' API를 이용하여 아래 함수들을 구현해 주세요.

getProductList() : GET 메서드를 사용해 주세요.

page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.

getProduct() : GET 메서드를 사용해 주세요.

createProduct() : POST 메서드를 사용해 주세요.

request body에 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를 활용해 주세요.

각 함수를 실행하는 코드를 작성하고, 제대로 동작하는지 확인해 주세요.

[iamjaeholee]

스프린트 미션3 수행하느라 수고하셨어요 🥇

main.js에서 전체 CRUD를 순서대로 실행하고,
if (createdArticle), if (createdProduct) 가드로 안전하게 처리해주신 구조가 정말 꼼꼼해요!
에러 메시지도 한국어로 명확하게 작성해주신 점도 좋았어요 : -)

몇 가지 참고해주시면 좋을 부분을 파일별 코멘트로 남겨드릴게요!

[iamjaeholee]

이번 미션에서 Article API는 fetch + .then() / .catch() 패턴으로 구현하도록 요구하고 있어요.
현재는 async/await + try/catch를 사용하고 계신데, Product와 동일한 패턴이 되어버렸어요.

아래처럼 .then() 체이닝 방식으로 바꿔보시면 두 패턴을 모두 경험할 수 있어요!

export function getArticleList(page = 1, pageSize = 10, keyword = "") {
  return fetch(`${ARTICLE_BASE_URL}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`)
    .then((response) => {
      if (!response.ok) throw new Error(`게시글 목록 조회 실패: ${response.status}`);
      return response.json();
    })
    .catch((error) => {
      console.error("getArticleList 오류:", error);
      throw error;
    });
}

[iamjaeholee]

page, pageSize, keyword에 기본값이 없어서, 파라미터 없이 호출하면 URL에 undefined가 들어가요.

export function getArticleList(page = 1, pageSize = 10, keyword = "") {

ProductService.js도 동일하게 기본값을 추가해 주시면 좋을 것 같아요 : -)

[iamjaeholee]

Product API는 이번 미션에서 axios를 활용하도록 요구하고 있었는데, fetch로 구현하셨어요.
axios를 한번 익혀두시면 더 넓은 경험이 될 것 같아요 : -)

[iamjaeholee]

!response.ok일 때 console.log + return으로 처리하면, 호출부에서 에러가 발생했는지 알 수 없어요.
throw new Error()로 던져주시면 main.js에서 에러를 감지하고 처리할 수 있어요.

if (!response.ok) {
  throw new Error(`상품 목록 조회 실패: ${response.status}`);
}

ArticleService.js도 동일하게 적용해 주시면 좋을 것 같아요 : -)