[원태웅] 스프린트 미션 5, 6#77
Hidden character warning
Conversation
devbini
left a comment
devbini
left a comment
There was a problem hiding this comment.
🎉 고생 많으셨습니다!
이번에 Express부터 Prisma/PostgreSQL 마이그레이션까지 작업량이 꽤 많았는데...
구조적으로나 코드 안정성 측면에서 잘 정리한 점이 놀랍기도 했습니다.
특히 백엔드 파일 분리부터 시작해서- request/constants 등으로 나눠 맞추려는 흐름도 유지보수 관점에서 좋았어요. (에러 역시 FE에게 전부 던지지 않음으로써 보안도 챙긴 것 같아요.)
프론트에서도 상품 등록 폼 필드를 컴포넌트화하고, finally에서 제출 상태를 정리하는 등 UX적으로도 큰 문제 없이 흘러가게 된 것 같습니다.
다만, 실제로 봤을 때 일부 입력값 검증이나 페이지 보정 시 데이터가 잠깐 맞지 않을 수 있는 부분 등 아주 자잘한? 공통 API 클라이언트 관련하여 더 세심하게 봐 주시면 좋을 것 같아요.
태웅님 코드의 경우에는 치명적인 문제나 꼭 수정해야 할 법한 부분이 없어서 리뷰 내용이 굉장히 적은데, 그만큼 좋은 코드를 잘 짜신 게 아닐까 싶습니다.
너무나 고생 많으셨어요! 🎉
| const isValid = | ||
| !errors.name && !errors.description && !errors.price && !errors.tags |
There was a problem hiding this comment.
☕ Thinking
error.TagInput 에러 처리가 빠진 것 같아요.
의도 된 것 같기도 보이긴 하는데 보통 error들은 모두 isValid에 반영될거다- 라고 생각하는 경우도 많아서
주석이든 뭐든 처리를 해 주면 좋을 것 같아요
| const fetchOptions = { ...options } | ||
|
|
||
| if (body !== undefined) { | ||
| fetchOptions.headers = { 'Content-Type': 'application/json' } |
There was a problem hiding this comment.
☕ Thinking
이렇게 매번 헤더를 덮어쓰게 만드는 것도 의도된 내용이면 괜찮긴 한데,,
나중에 인증 토큰이라던가- 커스텀 토큰을 쓰는 경우 문제가 생길 수 있어요.
...headers = {
...options.headers,
'Content-Type': 'application/json',
}
이런 식으로 기존 헤더를 보존하면서 추가하는 것도 가능하니, 확장성을 조금 더 생각해보는 건 어떨까요!
| const ProductDetailPage = () => { | ||
| return ( | ||
| <MainLayout> | ||
| <div /> | ||
| </MainLayout> | ||
| ) | ||
| } |
There was a problem hiding this comment.
☕ Thinking
상품 등록 성공 후 상세 페이지로 이동하는 건 좋은데,
그래도 겸사겸사 이동한 페이지에서도 등록이 성공적으로 된 건지, 등록한 상품이 뭔지 등
아주 작은 정보라도 표시 해 주는 게 좋지 않을까요!
| const handleSubmit = async (event) => { | ||
| event.preventDefault() | ||
| setHasSubmitted(true) | ||
| setSubmitError('') | ||
| setFormValues((prevValues) => ({ ...prevValues, tagInput: '' })) | ||
| setHasTriedAddingTag(false) | ||
|
|
||
| if (!isValid) return | ||
|
|
There was a problem hiding this comment.
☕ Thinking
음, tagInput을 먼저 비우고 유효성 검사를 하고 있네요.
state 업데이트가 비동기적으로 일어나기 때문에 isVaild값이 바로 바뀌진 않지만..
사용자가 "Enter"를 누르지 않은 상태에서 제출 버튼을 누르면 사라질 것 같아요.
- 사용자가 태그 입력창에 무언가를 입력함
- Enter를 누르지 않아서 tags에는 아직 안 들어감
- 바로 등록하기 클릭
- tagInput이 비워짐
- 노트북은 전송되지도 않고 화면에서도 사라짐
제출할 때 입력 중인 태그를 자동으로 추가할지 규칙을 정해두는 게 좋을 것 같아요
| return res.status(201).json(product) | ||
| } catch { | ||
| return res.status(500).json({ message: '상품 등록에 실패했습니다.' }) |
There was a problem hiding this comment.
☕ Thinking
검증 단계를 서버에서 처리하게 설정 하셨네요,
다만, catch되는 에러가 모두 500으로만 처리되고 있어서... 차후에 원인 파악이 어려울 수도 있을 것 같아요.
생성/조회/수정 등 다양한 상황에서 나오는 Prisma 에러에 대한 공통 에러핸들러를 만들어보는 건 어떨까요?
isPrismaNotFoundError 같은 유틸도 만들어 두었으니 운영관리 관점에서 있으면 좋을 것 같아요.
feat(header): change 로그인 to 로그In, I mean why not
fix(header): revert 로그in to 로그인
2 participants
스프린트 5 요구사항
기본 요구사항
공통
프론트엔드 구현 요구사항
랜딩 페이지
중고마켓 페이지
상품 등록 페이지
백엔드 구현 요구사항
중고마켓 데이터 및 API
서버 설정 및 배포
심화 요구사항
프론트엔드 구현 요구사항
상품 등록 페이지 기능 고도화
스프린트 6 요구사항
기본 요구사항
공통
자유게시판
댓글