[김홍섭] Sprint5 #113

rakaso598 · 2025-02-28T10:10:53Z

요구사항

기본

[v] 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 '/products'를 사용했습니다.
[v] App.jsx에 데이터를 불러와 표시하도록 구현했습니다.

심화

[-] 심화 미션 진행하지 않음.

주요 변경사항

Vite + React + Js 를 사용했습니다.
헤더, 푸터가 메인화면에 표시되지 않습니다.
게시물 사진과 몇몇 내용을 표시하지 않습니다.
최신순/좋아요순 토글을 구현하지 않았습니다.

배포 URL

https://6-sprint-misson-fe-dev-pr5.vercel.app/

스크린샷

멘토에게

API를 요청하고 데이터를 화면에 표시하도록 구현했으나 아직 헤더,푸터와 이미지 및 상품 내용이 누락되어 있습니다.
헤더 푸터 리소스와 이전에 작성한 html,css,js는 모두 public 디렉토리에 옮겨 두었습니다. 이 파일들로 판다마켓에서 사용하던 이미지와 헤더,푸터 구현해두었던 것을 리액트 index.html로 이식할 예정입니다.

loquemedalagana · 2025-02-28T11:30:40Z

eslint.config.js

+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },


eslint 버전 9에 맞게 잘 작성하셨어요. eslint 8 버전까지는 .eslintignore 로 따로 분리했는데 9부터는 config.js 에 통합되었습니다:)

loquemedalagana · 2025-02-28T12:11:58Z

src/services/ArticleService.js

+
+// 핸들러
+const requestErrorHandler = (e) => {
+  if (e.response) {


에러 코드별로 세분화해보면 어떨까요? 400번대 에러일 때랑 500번대 에러일 때 메시지가 다르면 좋을 것 같아요!

loquemedalagana · 2025-02-28T12:12:53Z

src/services/ArticleService.js

+    return `처리 중 오류가 발생했습니다. 다른 값을 입력해보세요.`;
+  } else {
+    return `서버에 접속하지 못했습니다.`;
+  }


이미 분기문에서 return을 했으니 굳이 else를 쓰시지 마시고 바로 디폴트 에러 메시지를 리턴하시는게 더 좋습니다!

loquemedalagana · 2025-03-03T04:57:54Z

src/services/ArticleService.js

+  createArticle,
+  deleteArticle,
+  patchArticle,
+};


요구사항에는 axios가 아닌 fetch api를 사용해서 구현해라고 나와있는데, axios를 선택하신 이유가 있으신가요?

ArticleService 에서 요구사항에서는 async, await 사용보다는 Promise의 개념의 이해를 위해 async-await 사용이 아니라 return fetch(...).then... 이런 식으로 바로 promise를 리턴하는 형태를 제시한 것 같습니다. 나중에 useEffect 안에서 api 호출 시 해당 개념을 알아야 하거든요.

하지만 동작 원리는 같아요! async-await을 사용하는 이유가 더 편한 가독성을 위한거니깐요! 실무에서도 이렇게 더 많이 쓰긴 합니다.

loquemedalagana · 2025-03-03T05:00:04Z

src/services/ProductService.js

+  createProduct,
+  deleteProduct,
+  patchProduct,
+};


https://panda-market-api-crud.vercel.app
https://panda-market-api-crud.vercel.app/products
https://panda-market-api-crud.vercel.app/articles

는 별도의 변수로 빼는 것이 더 좋을것 같아요!

loquemedalagana · 2025-03-03T05:09:42Z

src/services/ArticleService.js

+  createArticle,
+  deleteArticle,
+  patchArticle,
+};


ArticleService 에서 요구사항에서는 async, await 사용보다는 Promise의 개념의 이해를 위해 async-await 사용이 아니라 return fetch(...).then... 이런 식으로 바로 promise를 리턴하는 형태를 제시한 것 같습니다. 나중에 useEffect 안에서 api 호출 시 해당 개념을 알아야 하거든요.

하지만 동작 원리는 같아요! async-await을 사용하는 이유가 더 편한 가독성을 위한거니깐요! 실무에서도 이렇게 더 많이 쓰긴 합니다.

loquemedalagana · 2025-03-03T05:25:28Z

src/services/ProductService.js

+    } else {
+      const res = await axios.get(
+        `https://panda-market-api-crud.vercel.app/products?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}`
+      );


이 부분 3항연산자 쓰셔서 조금 더 줄이시면 더 좋을것 같아요~

loquemedalagana · 2025-03-03T05:51:14Z

src/main.jsx

+  <StrictMode>
+    <App />
+  </StrictMode>,
+)


요구사항에서는 엔트리 포인트로 React가 아니라 ArticleService와 ProductService를 불러오는것으로 보입니다ㅠ

loquemedalagana · 2025-03-03T06:25:22Z

src/services/ArticleService.js

+
+// 게시글목록조회
+const getArticleList = async (page, pageSize, orderBy = "recent", keyword) => {
+  try {


page, pageSize 여기서 default 값을 처리해주고, 만일 숫자가 아닌 경우 체크해서 예외 처리를 해주시는게 좋을거같아요.,

loquemedalagana · 2025-03-03T06:27:30Z

commit 단위를 작업별로 잘게 쪼개시면 좋을 것 같아요.
추가로 git 명령어 알려드리자면,

git add -p 옵션 추가하시면 라인별로 commit가 가능합니다:)

loquemedalagana · 2025-03-03T06:54:18Z

src/services/ProductService.js

+
+// 상품생성
+const createProduct = async (createProductData) => {
+  try {


productData에 들어가야 하는 항목인 name, description, price, manufecturer, tags, images를 검증하는 로직 추가해주세요.

loquemedalagana · 2025-03-03T06:54:45Z

src/services/ProductService.js

+
+// 상품수정
+const patchProduct = async (productId, patchProductData) => {
+  try {


여기도 마찬가지에요! 공통으로 검증 로직 빼주시면 더 좋습니다.

loquemedalagana · 2025-03-03T06:55:32Z

src/services/ArticleService.js

+        `https://panda-market-api-crud.vercel.app/articles?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}`
+      );
+      return res.data;
+    }


이것도 if문 쓰지 않고 한번 짜보세요!

loquemedalagana · 2025-03-03T07:00:00Z

src/services/ArticleService.js

+
+// 게시글생성
+const createArticle = async (createArticleData) => {
+  try {


createArticleData 에 들어가야 하는 항목인 name, description, price, manufecturer, tags, images를 검증하는 로직 추가해주세요.

loquemedalagana · 2025-03-03T07:00:27Z

src/services/ArticleService.js

+};
+
+// 게시글수정
+const patchArticle = async (articleId, patchArticleData) => {


여기도 두 번째 매개변수 값 검증 로직 추가해주세요! 공통으로 빼시면 더 좋습니다.

loquemedalagana · 2025-03-03T07:02:49Z

src/services/ProductService.js

+// 핸들러
+const requestErrorHandler = (e) => {
+  if (e.response) {
+    return `처리 중 오류가 발생했습니다. 다른 값을 입력해보세요.`;


여기 response 에러 상태코드도 같이 출력해주세요.

rakaso598 · 2025-03-05T00:06:39Z

피드백 감사드립니다. 이번 PR에서 배포 URL을 추가하지 않았는데, 다음 PR때는 배포 URL도 함께 제출하겠습니다.

loquemedalagana · 2025-03-11T10:35:34Z

frontend/public/static/faq.html

+  <body>
+    <h1>임시 FAQ 페이지</h1>
+  </body>
+</html>


이 부분은 왜 SPA 구조로 안 짜신건가요?

loquemedalagana · 2025-03-11T10:37:49Z

frontend/public/static/scripts/auth.js

+      }
+    });
+  }
+});


Vanilla.js가 아니라 React 입니다.

loquemedalagana · 2025-03-11T10:43:21Z

frontend/public/static/scripts/constants.js

+  { email: "[email protected]", password: "codeit404!" },
+  { email: "[email protected]", password: "codeit505!" },
+  { email: "[email protected]", password: "codeit606!" },
+];


mock data를 다음처럼 분리는 잘 하셨습니다!

loquemedalagana · 2025-03-11T10:43:55Z

frontend/public/static/scripts/errors.js

+  // TODO: 사용 안함
+  signupSuccess: "회원가입이 성공적으로 처리되었습니다.",
+  // loginError: "존재하지 않는 이메일, 혹은 비밀번호입니다.",
+};


이렇게 mapping 하신건 잘 하셨습니다. typescript로는 Record<string, string> 으로 씁니다.

loquemedalagana · 2025-03-12T08:19:46Z

no results found 대신 loading 컴포넌트를 만드시면 좋을 것 같아요. 참고 코멘트

loquemedalagana · 2025-03-12T08:28:39Z

frontend/src/components/ProductList.jsx

+      })}
+    </>
+  );
+};


디자인 적용 누락되신거 아시죠ㅠㅠ

loquemedalagana · 2025-03-12T08:30:44Z

frontend/src/components/ProductList.jsx

+        const productListResponse = await getProductList(1, 4, 'favorite');
+        setProductList(productListResponse);
+      } catch (err) {
+        console.error(err);


에러 처리는 잘 하셨습니다.

loquemedalagana · 2025-03-12T08:31:06Z

frontend/src/components/ProductList.jsx

+  useEffect(() => {
+    const fetchProductList = async () => {
+      try {
+        const productListResponse = await getProductList(1, 4, 'favorite');


페이지네이션을 context api를 써서 custom hook을 쓰시는 방법 고민해보세요!

loquemedalagana · 2025-03-12T08:40:41Z

frontend/src/services/ArticleService.js

@@ -0,0 +1,87 @@
+import axios from "axios";
+


***service.js로 미션4 파일 그대로 두신 이유가 있을까요?

rakaso598 requested a review from loquemedalagana February 28, 2025 10:11

loquemedalagana reviewed Feb 28, 2025

View reviewed changes

loquemedalagana reviewed Mar 3, 2025

View reviewed changes

loquemedalagana approved these changes Mar 3, 2025

View reviewed changes

loquemedalagana reviewed Mar 3, 2025

View reviewed changes

loquemedalagana reviewed Mar 11, 2025

View reviewed changes

[김홍섭] Sprint5

7321b10

rakaso598 force-pushed the basic-김홍섭 branch from f15a3dd to 7321b10 Compare March 11, 2025 11:22

rakaso598 changed the title ~~[FS_6기_김홍섭] basic 스프린트제출~~ [김홍섭] Sprint5 Mar 11, 2025

loquemedalagana approved these changes Mar 12, 2025

View reviewed changes

loquemedalagana merged commit cae5c06 into codeit-sprint-fullstack:basic-김홍섭 Mar 12, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[김홍섭] Sprint5 #113

[김홍섭] Sprint5 #113

rakaso598 commented Feb 28, 2025 •

edited

Loading

loquemedalagana Feb 28, 2025

loquemedalagana Feb 28, 2025

loquemedalagana Feb 28, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana commented Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

loquemedalagana Mar 3, 2025

rakaso598 commented Mar 5, 2025

loquemedalagana Mar 11, 2025

loquemedalagana Mar 11, 2025

loquemedalagana Mar 11, 2025

loquemedalagana Mar 11, 2025

loquemedalagana commented Mar 12, 2025

loquemedalagana Mar 12, 2025

loquemedalagana Mar 12, 2025

loquemedalagana Mar 12, 2025

loquemedalagana Mar 12, 2025

[김홍섭] Sprint5 #113

[김홍섭] Sprint5 #113

Conversation

rakaso598 commented Feb 28, 2025 • edited Loading

요구사항

기본

심화

주요 변경사항

배포 URL

스크린샷

멘토에게

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

loquemedalagana commented Mar 3, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rakaso598 commented Mar 5, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

loquemedalagana commented Mar 12, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rakaso598 commented Feb 28, 2025 •

edited

Loading