[이상달] sprint6

[asksa1256]

요구사항

기본

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

심화

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

배포 사이트

https://panda-market-react-sd.netlify.app/

주요 변경사항

• 도메인 특성상 상품을 'item'이라고 칭하면 좀 추상적인 것 같아서 관련된 변수명, 컴포넌트명, 경로명 등을 모두 'product'로 변경했습니다. ('/products', '/addProduct')
• 스타일 기법을 module.css에서 css-in-js(Emotion)로 변경했습니다.

스크린샷

상품 등록 폼 기본 상태

상품 등록 폼 비활성화 상태

상품 등록 폼 활성화 상태

반응형 - 태블릿

반응형 - 모바일

멘토에게

• 상품 등록 폼 데이터를 하나의 formData객체로 묶어서 관리했는데, useState로 각 input들을 따로따로 관리해주는 게 더 좋을지 아닐지 기준을 잘 모르겠어요!
• 페이지 전환될 때 스크롤 위치가 어중간한 경우가 있어서, 페이지 전환 시 스크롤 위치가 항상 최상단으로 유지되도록 브라우저의 스크롤 기본 동작을 제어했습니다(useScrollToTop.js). 무한 스크롤 기능이 없어서 이렇게 해도 괜찮다고 생각했는데, 제가 놓친 부분이 있을까요?
• ProductList 컴포넌트에서 '새로고침 시 검색값 초기화' 기능을 새로고침 시 한번만 실행하기 위해 의존성 배열을 의도적으로 비워뒀는데, Netlify에서 이 부분 때문에 배포가 안되어 Netlify 설정에서 CI값을 false로 설정해 배포했습니다. 이렇게 해도 되는 걸까요?
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
지난 주에 드린 피드백도 잘 적용하시고, 매번 코드를 깔끔히 정리하며 미션해주시네요 :)

주요 리뷰 포인트

• 폼 컨트롤 방식 고민해보기
• 상속말고 조합으로 큰 컴포넌트의 역할 쪼개기
• useEffect 특징 이해하기

[addiescode-sj]

질문에 대한 답변

멘토에게

• 상품 등록 폼 데이터를 하나의 formData객체로 묶어서 관리했는데, useState로 각 input들을 따로따로 관리해주는 게 더 좋을지 아닐지 기준을 잘 모르겠어요!

본문 내에 답변드렸습니다 :)

• 페이지 전환될 때 스크롤 위치가 어중간한 경우가 있어서, 페이지 전환 시 스크롤 위치가 항상 최상단으로 유지되도록 브라우저의 스크롤 기본 동작을 제어했습니다(useScrollToTop.js). 무한 스크롤 기능이 없어서 이렇게 해도 괜찮다고 생각했는데, 제가 놓친 부분이 있을까요?

페이지 전환 시 스크롤 위치가 최상단으로 유지되도록 커스텀 훅을 쓰시는건 좋은 시도입니다 :)
다만 App.jsx에서 쓰이는 훅이다보니 모든 하위 컴포넌트가 실행될때마다 사용될텐데, 너무 해당 훅에 불필요한 기능이 추가되거나 업데이트 과정이 복잡해지지않도록 주의 해봅시다 :)

• ProductList 컴포넌트에서 '새로고침 시 검색값 초기화' 기능을 새로고침 시 한번만 실행하기 위해 의존성 배열을 의도적으로 비워뒀는데, Netlify에서 이 부분 때문에 배포가 안되어 Netlify 설정에서 CI값을 false로 설정해 배포했습니다. 이렇게 해도 되는 걸까요?

우선 배포시에 수동으로 체크기능을 끄는건 좋지않습니다.
관련해서 기능 이슈도 있을 수 있어 본문 내에 코멘트 드렸으니 참고해보세요 :)

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.