React 오마린 스프린트 미션 5#63
Hidden character warning
Conversation
devbini
left a comment
devbini
left a comment
There was a problem hiding this comment.
🎉 고생하셨습니다
우선 일부 문제가 있긴 하지만, 커스텀 훅 활용과 기본 js 문법에서는 큰 문제가 없어보입니다.
다만, 수정해야 할 부분이 꽤 많아보여요.
React SPA가 아닌, 정적 HTML 파일들은 사실상 삭제 해 주는 게 맞습니다.
본 스프린트는 React기반인 만큼, 정적 바닐라 JS기반 HTML들은 사용하지 않으니, 전반적인 파일 수정이 필요합니다. 일관성에서도 그렇구요.
BestItems나 SalesItemList나, 여러 컴포넌트에서 중복 선언되는 메서드들이 있고, 한 컴포넌트가 굉장히 많은 기능을 담고 있기도 합니다. Context API에 대해 알아보면 좋지 않을까 싶어요.
추가로, 백엔드 코드는 분리해서 백엔드 레포지토리에서 작업 해 주시는 게 맞습니다.
이건 다음 스프린트 6 코멘트로 남겨둘게요.
전반적으로 코드가 나쁘지는 않습니다.
다만 일부 최적화가 필요한 부분이 있으니, 수정하면 더 완벽한 코드가 되지 않을까 싶어요.
고생하셨습니다.
| @@ -0,0 +1,43 @@ | |||
| // .env 대신 직접 설정 (임시) | |||
| process.env.MONGODB_URI = 'mongodb+srv://marin:marin123@cluster0.obnttz8.mongodb.net/market?retryWrites=true&w=majority'; | |||
| process.env.PORT = '5000'; | |||
There was a problem hiding this comment.
🪛 Fix Point
.env파일을 전혀 사용하지 않고, 중요 내용이 하드코딩 되어있습니다.
바로 위 임시라고 써 두긴 하셨지만, 최종 PR에서는 모두 수정해서 올려주셔야 합니다.
| @@ -0,0 +1,271 @@ | |||
| /* ===== NAV: 전역 플렉스 흐름을 유지하고 index만 패딩/정렬 살짝 조정 ===== */ | |||
| .nav-container { | |||
| display: flex !important; | |||
There was a problem hiding this comment.
☕ Thinking
지난 멘토링때도 말씀드렸다시피, !important가 너무 남용되고 있습니다.
스타일 관리가 이렇게 되면... 나중에 유지보수하기 + 새로운 디자인 추가하는 데 문제가 생길 수 있어요.
| className="register-button" | ||
| onClick={handleRegisterClick} | ||
| style={{ | ||
| background: '#3B82F6', |
There was a problem hiding this comment.
☕ Thinking
CSS 파일이 있고, 별도로 관리를 하고 있음에도 인라인 스타일로 관리되는 모습은 수정이 필요합니다.
호버와 같은 효과도, onMouseOver가 아닌 css상 :hover 등의 개발 방법론이 있으니... 한번 확인 해 보면 좋지 않을까 싶어요.
아래는 명시도와 관련한 내용입니다. 한번 읽어보시면 좋을 것 같네요.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_cascade/Specificity
| }, [pageSize]); | ||
|
|
||
| // 가격 포맷 함수 | ||
| const formatPrice = (price) => { |
There was a problem hiding this comment.
🪛 Fix Point
다른 파일에도 동일한 메서드가 중복 선언되고 있습니다.
formatPrice뿐 만 아니라 다른 여러 메서드가 중복으로 선언되고 있어서,
별도의 중앙 컴포넌트로 만들어 관리하는 게 좋지 않을까 제안 드려봐요.
| ); | ||
|
|
||
| // 등록 성공 시 상품 상세 페이지로 이동 (빈 페이지) | ||
| window.location.href = `/items/${response.id}`; |
There was a problem hiding this comment.
🪛 Fix Point
React를 배운 만큼, React-Route (DOM)을 사용 해 보면 더 좋지 않을까 싶어요.
useNavigate도 있고... window.location.href이 아닌 React에 맞는 방법이 있으니, 한번 확인 해 주세요 😊
|
감사합니다 수정하도록 하겠습니다 |
2 participants
공통
중고마켓 페이지 (기본)
GET /products를 사용한다."최신 순"(recent),"좋아요 순"(favorite)orderBy=favorite기준으로 데이터 노출심화 요구사항 (공통)
중고마켓 페이지 (GURU)
pageSize값을 조정한다.