[박인건] sprint6 #259

parkingun · 2024-12-07T12:53:46Z

요구사항

기본

상품 등록 페이지 주소는 “/additem” 입니다.
페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
-[] 상품 이미지는 최대 한개 업로드가 가능합니다.
각 input의 placeholder 값을 정확히 입력해주세요.
이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
API를 통한 상품 등록은 추후 미션에서 적용합니다.

심화

이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.
추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.

주요 변경사항

폴더 구조를 변경하였습니다.
baseURL과 같은 공통적으로 사용할 수 있는 변수는 constants 폴더에 관리해서 사용할 예정입니다.

스크린샷

멘토에게

컴포넌트 분리작업은 필요해 보입니다.
올리고 알았는데, 태그값이 입력된 상태여야하는 등록 버튼이 활성화되는 쪽을 수정해야겠네요...

1005hoon

인건님, 이번 프로젝트도 고생 많으셨습니다!

뭔가 구조가 많이 깔끔해졌어요. 최대한 리뷰사항 반영해서 작업하시려 하는 모습도 보입니다.
쉽지 않으실텐데도 노력해주셔서 감사해요.

이제 조금 더 욕심 내볼만한건,

코딩 컨벤션: 변수 명 / 코드 작성 스타일
에러 핸들링
폼 관리

정도가 될텐데요,
코딩 컨벤션의 경우 코드에 남겨둔 리뷰 한번 체크해주시면 될것 같구
에러 핸들링의 경우, 다음 콘텐츠 한번 살펴보시구, 다른 포스트들 조금 참고해서 어떻게 처리하는게 좋을지 고민하는 시간을 한번 가져보시면 도움이 될 듯 해요.
그리고 폼 관리는 프론트엔드에서 가장 어려운 영역인데요, 그런만큼 효율적으로 관리하는 방법에 대한 리서치가 많이 진행되어왔습니다. 한번 이 내용들도 탐색해보시고 적용해보면 어떨까요?

이번 프로젝트도 고생 많으셨습니다

1005hoon · 2024-12-11T05:30:33Z

src/api/CreateCommentAPI.js

@@ -0,0 +1,18 @@
+import { baseURL } from "../constants/VariableSetting";
+
+export async function CreateCommentAPI({ productId, accessToekn }) {


Class와 Component가 아닌 이상 함수 또는 변수 이름을 대무낮로 시작하지 말아주세요!

음 조금 고민이 되는게 access token 을 함수에 전달해주는게 과연 올바른 방법일까 싶네요.
access token을 관리하는 전역 상태가 하나가 있는 상황에서, 이 함수 내부에서 토큰을 조회할 수 있도록 작업하는게 좀 더 좋겠다는 생각이 문득 들어요

1005hoon · 2024-12-11T05:32:37Z

src/api/CreateCommentAPI.js

+export async function CreateCommentAPI({ productId, accessToekn }) {
+  const response = await fetch(`${baseURL}/products/${productId}/comments`, {
+    method: "POST",
+    body: JSON.stringify({}),


댓글 생성을 위해 body가 필요할텐데요, 이 부분도 추가되면 좋겠습니다

1005hoon · 2024-12-11T05:32:48Z

src/api/CreateCommentAPI.js

+  });
+
+  if (!response.ok) {
+    throw new Error("상품 정보를 가져오는데 실패했습니다.");


상품 정보가 아니라 댓글 생성인거죵?

또한 이렇게 처리가 된다면 서버에서 디버깅 목적으로 제공해준 오류 response를 받을 수 없답니다

1005hoon · 2024-12-11T05:33:18Z

src/api/GetProductsAPI.js

+  page = 1,
+  pageSize = 10,
+  orderBy = "recent",
+  keyword = "",


default value처리 너무 좋습니다

1005hoon · 2024-12-11T05:34:16Z

src/api/SignInAPI.js

@@ -0,0 +1,17 @@
+import { baseURL } from "../constants/VariableSetting";
+
+export async function SginInAPI({ productId, ID, Password }) {


오타가 있어보입니다,
그리구 ID와 Password를 대문자로 받아야 할 필요는 없어보여ㅛ!

1005hoon · 2024-12-11T05:35:29Z

src/api/SignInAPI.js

+  });
+
+  if (!response.ok) {
+    throw new Error("상품 정보를 가져오는데 실패했습니다.");


에러 로깅 신경써주세요!

1005hoon · 2024-12-11T05:35:48Z

src/components/common/Button_Module.jsx

Button_Module 에서 모듈이라는 이름이 들어갈 필요가 있을까요?

1005hoon · 2024-12-11T05:36:42Z

src/components/productCreate/AddProductPage.jsx

+  const [productName, setProductName] = useState("");
+  const [productInfo, setProductInfo] = useState("");
+  const [productPrice, setProductPrice] = useState("");
+  const [productTag, setProductTag] = useState("");
+  const [preview, setPreview] = useState(null);
+  const [hashTags, setHashTags] = useState([]);


좀 더 이 폼 상태를 유려하게 관리하는 방법이 있을 것 같아요!
지금 형태는 필드 하나가 늘어날때마다 이를 관리하기 위한 상태와, 이벤트 처리를 위한 함수 두개씩 생기고 있는데
scalable하지 않아보입니다

1005hoon · 2024-12-11T05:37:12Z

src/components/productsList/AllProductList.jsx

+  const [allProducts, setAllProducts] = useState([]);
+  const [orderBy, setOrderBy] = useState();
+  const [keyword, setKeyword] = useState();
+  const imageSize = "220px";


디폴트 이미지 사이즈를 관리하는건 container 목적의 콤포넌트보단 ui presenter 목적의 콤포넌트에서 관리하는게 더 좋지 않을까 생각되어요!

1005hoon · 2024-12-11T05:38:04Z

src/components/productsList/AllProductList.jsx

+      const data = await GetProductsAPI({
+        page: 1,
+        pageSize: 10,
+        orderBy: orderBy,
+        keyword: keyword,
+      });
+      // console.log(data);
+      setAllProducts(data);
+    } catch (error) {
+      throw new Error("전체 상품 로드 실패:", error);
+    }


음 catch문에서 지속적으로 에러를 던지고 있는데,
api.js에서 던진 에러는 여기서 잡아준다 쳐도,
여기서 에러를 던져버리면 서버 오류 발생시 앱이 터져버리게 됩니다.
어디서 에러를 던지고, 어디서 캐치를 해올지 조금 고민이 필요해보여요

parkingun added 2 commits December 2, 2024 08:35

sprint5 미션

8ad2232

sprint5 피드백, sprint6

d8e9088

parkingun requested a review from 1005hoon December 7, 2024 12:53

1005hoon approved these changes Dec 11, 2024

View reviewed changes

parkingun added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Dec 15, 2024

1005hoon closed this Dec 16, 2024

parkingun assigned parkingun and unassigned parkingun Jan 12, 2025

1005hoon reopened this Jan 13, 2025

Merge branch 'React-박인건' into React-박인건-sprint6

e54083f

1005hoon merged commit 035c5c5 into codeit-bootcamp-frontend:React-박인건 Jan 13, 2025

		@@ -0,0 +1,18 @@
		import { baseURL } from "../constants/VariableSetting";

		export async function CreateCommentAPI({ productId, accessToekn }) {

		@@ -0,0 +1,17 @@
		import { baseURL } from "../constants/VariableSetting";

		export async function SginInAPI({ productId, ID, Password }) {

[박인건] sprint6 #259

[박인건] sprint6 #259

Uh oh!

Conversation

parkingun commented Dec 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

1005hoon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

parkingun commented Dec 7, 2024 •

edited

Loading