Skip to content

[하성민] sprint3 #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SeongminHa-Jack wants to merge 1 commit into
base: basic-하성민
Choose a base branch
from
Open

[하성민] sprint3 #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 110 additions & 0 deletions js/ArticleService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
const ARTICLE_BASE_URL = "https://panda-market-api-crud.vercel.app/articles";

export async function getArticleList(page, pageSize, keyword) {
Copy link
Copy Markdown
Collaborator

@iamjaeholee iamjaeholee Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이번 미션에서 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;
    });
}

try {
Copy link
Copy Markdown
Collaborator

@iamjaeholee iamjaeholee Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

const response = await fetch(
`${ARTICLE_BASE_URL}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
);

if (!response.ok) {
console.log(`게시글 목록 조회 실패: ${response.status}`);
return;
}

const data = await response.json();

return data;
} catch (error) {
console.log("getArticleList 오류:", error);
}
}

export async function getArticle(articleId) {
try {
const response = await fetch(`${ARTICLE_BASE_URL}/${articleId}`);

if (!response.ok) {
console.log(`게시글 상세 조회 실패: ${response.status}`);
return;
}

const data = await response.json();
return data;
} catch (error) {
console.log("getArticle 오류:", error);
}
}

export async function createArticle(title, content, image) {
const newArticle = {
title,
content,
image,
};

try {
const response = await fetch(ARTICLE_BASE_URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newArticle),
});

if (!response.ok) {
console.log(`게시글 생성 실패: ${response.status}`);
return;
}

const data = await response.json();
return data;
} catch (error) {
console.log("createArticle 오류:", error);
}
}

export async function patchArticle(articleId, title, content, image) {
const updateArticle = {
title,
content,
image,
};

try {
const response = await fetch(`${ARTICLE_BASE_URL}/${articleId}`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(updateArticle),
});

if (!response.ok) {
console.log(`게시글 수정 실패: ${response.status}`);
return;
}

const data = await response.json();
return data;
} catch (error) {
console.log("patchArticle 오류:", error);
}
}

export async function deleteArticle(articleId) {
try {
const response = await fetch(`${ARTICLE_BASE_URL}/${articleId}`, {
method: "DELETE",
});

if (!response.ok) {
console.log(`게시글 삭제 실패: ${response.status}`);
return;
}

const data = await response.json();
return data;
} catch (error) {
console.log("deleteArticle 오류:", error);
}
}
120 changes: 120 additions & 0 deletions js/ProductService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
const PRODUCT_BASE_URL = "https://panda-market-api-crud.vercel.app/products";
Copy link
Copy Markdown
Collaborator

@iamjaeholee iamjaeholee Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


export async function getProductList(page, pageSize, keyword) {
try {
const response = await fetch(
`${PRODUCT_BASE_URL}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
);

if (!response.ok) {
console.log(`상품 목록 조회 실패: ${response.status}`);
Copy link
Copy Markdown
Collaborator

@iamjaeholee iamjaeholee Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

return;
}

const data = await response.json();
return data;
} catch (error) {
console.log("getProductList 오류:", error);
}
}

export async function getProduct(productId) {
try {
const response = await fetch(`${PRODUCT_BASE_URL}/${productId}`);

if (!response.ok) {
console.log(`상품 상세 조회 실패: ${response.status}`);
return;
}

const data = await response.json();
return data;
} catch (error) {
console.log("getProduct 오류:", error);
}
}

export async function createProduct(name, description, price, tags, images) {
const newProduct = {
name,
description,
price,
tags,
images,
};

try {
const response = await fetch(PRODUCT_BASE_URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newProduct),
});

if (!response.ok) {
console.log(`상품 생성 실패: ${response.status}`);
return;
}

const data = await response.json();
return data;
} catch (error) {
console.log("createProduct 오류:", error);
}
}

export async function patchProduct(
productId,
name,
description,
price,
tags,
images,
) {
const updateProduct = {
name,
description,
price,
tags,
images,
};

try {
const response = await fetch(`${PRODUCT_BASE_URL}/${productId}`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(updateProduct),
});

if (!response.ok) {
console.log(`상품 수정 실패: ${response.status}`);
return;
}

const data = await response.json();
return data;
} catch (error) {
console.log("patchProduct 오류:", error);
}
}

export async function deleteProduct(productId) {
try {
const response = await fetch(`${PRODUCT_BASE_URL}/${productId}`, {
method: "DELETE",
});

if (!response.ok) {
console.log(`상품 삭제 실패: ${response.status}`);
return;
}

const data = await response.json();
return data;
} catch (error) {
console.log("deleteProduct 오류:", error);
}
}
75 changes: 75 additions & 0 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import {
getArticleList,
getArticle,
createArticle,
patchArticle,
deleteArticle,
} from "./ArticleService.js";

import {
getProductList,
getProduct,
createProduct,
patchProduct,
deleteProduct,
} from "./ProductService.js";

async function runTest() {
const articleList = await getArticleList(1, 10, "");
console.log("게시글 목록:", articleList);

const createdArticle = await createArticle(
"테스트 게시글 제목",
"테스트 게시글 내용입니다.",
"https://example.com/article-image.jpg",
);
console.log("생성된 게시글:", createdArticle);

if (createdArticle) {
const articleDetail = await getArticle(createdArticle.id);
console.log("게시글 상세:", articleDetail);

const updatedArticle = await patchArticle(
createdArticle.id,
"수정된 게시글 제목",
"수정된 게시글 내용입니다.",
"https://example.com/article-image-2.jpg",
);
console.log("수정된 게시글:", updatedArticle);

const deletedArticle = await deleteArticle(createdArticle.id);
console.log("삭제된 게시글:", deletedArticle);
}

const productList = await getProductList(1, 10, "");
console.log("상품 목록:", productList);

const createdProduct = await createProduct(
"핸드폰",
"최신 핸드폰",
129000,
["전자제품", "핸드폰"],
["https://example.com/product-image.jpg"],
);
console.log("생성된 상품:", createdProduct);

if (createdProduct) {
const productDetail = await getProduct(createdProduct.id);
console.log("상품 상세:", productDetail);

const updatedProduct = await patchProduct(
createdProduct.id,
"수정된 핸드폰",
"최신최신 핸드폰",
139000,
["전자제품", "핸드폰", "블루투스"],
["https://example.com/product-image-2.jpg"],
);
console.log("수정된 상품:", updatedProduct);

const deletedProduct = await deleteProduct(createdProduct.id);
console.log("삭제된 상품:", deletedProduct);
}
}

runTest();