[김성은] sprint6#121
Hidden character warning
Conversation
Irelander
left a comment
Irelander
left a comment
There was a problem hiding this comment.
프론트엔드 쪽은 Atomic Design 패턴으로 컴포넌트를 잘게 나누고, 커스텀 훅까지 활용해서 구조가 정말 깔끔했어요. PropTypes는 없지만 인터페이스가 명확해서 큰 문제는 없어 보였습니다.
코드 스타일도 ESLint와 Prettier로 잘 맞춰서 읽기 편했고, 전반적으로 실무에 가까운 완성도를 보여주셨습니다. 아키텍처 설계, 일관된 스타일, 로직 분리, 사용자 경험까지 신경 쓴 부분이 특히 좋았어요.
앞으로는 에러 처리, 성능 최적화를 조금만 더 다듬으면 완성도가 훨씬 높아질 것 같습니다. 이미 초급을 넘어선 수준이라고 말씀드리고 싶네요!
There was a problem hiding this comment.
함수에서 에러 발생시 리턴값 ( catch )이 명시되어 있지 않아서 undefined가 반환됩니다. 이러면 호출하는쪽에서 예상치 못한 동작이 발생할 가능성이 있어요! ㅎㅎ 백엔드 API의 응답은 모든 케이스에 대해서 응답을 해주는게 좋아요!
|
|
||
| return response.data; | ||
| } catch (error) { | ||
| console.error(error); |
There was a problem hiding this comment.
에러를 리턴해주는게 좋아요! 4xx, 5xx등 적절한 상태메세지와 에러메세지와 함께 보내주면 좋습니다 :)
| formData.productPrice !== '' && // 판매가격 입력 여부 | ||
| formData.tags.length > 0; // 태그 입력 여부 | ||
|
|
||
| const hasError = Object.values(isValid).some((v) => v.isValid); // 유효성 검사에 실패한 항목이 하나라도 있으면 true를 반환 |
There was a problem hiding this comment.
hasError변수명이 더 정확한 목적을 가지고 있어서 구체적으로 바꾸면 더 좋아 보여요 ( 실제로는 "유효한 필드가 있는지"를 확인합니다 )
const hasValidationError = Object.values(isValid).some((v) => !v.isValid);
const isAllFieldsFilled = isFormValid;
setIsDisabled(!isAllFieldsFilled || hasValidationError);위의 코드처럼 조금 더 구체적으로 변수명을 선언해줘도 좋을꺼 같아요 !
| const response = await postProduct(product); | ||
| navigate(`/items/${response._id}`); | ||
| } catch (error) { | ||
| console.error(error); |
There was a problem hiding this comment.
에러 처리가 사용자에겐 메세지를 보여주지 않아 에러가 발생하는경우 사용자는 동작하지 않는것처럼 느껴지게 됩니다!
사용자 친화적인 에러 메세지를 보여주고 추가로 로딩 ( 스피너 ) 상태를 보여주면 더 좋아질꺼 같습니다 !
There was a problem hiding this comment.
- 에러 바운더리가 없어서 런타임 에러가 발생 시 전체 앱이 동작하지 않을수 있습니다 ! 에러 바운더리를 사용해보면 어떨까요 ?
- 로딩상태나 subspense 처리가 없어 초기 로딩 시 빈 화면이 보일수 잇을꺼 같아요! 관련된 처리를 하면 더 유려해질꺼 같습니다 :)
2 participants
배포주소
https://panda-market-kr.netlify.app/
요구사항
기본 요구사항
공통
프론트엔드 구현 요구사항
랜딩 페이지
중고마켓 페이지
상품 등록 페이지
심화 요구사항
프론트엔드 구현 요구사항
상품 등록 페이지
*유효한 조건
시연 영상
default.mp4
default.mp4