[권수형] 스프린트6

[Ospac]

https://awkward-panda-market.netlify.app/additem

요구사항

체크리스트 [기본]

상품 등록

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

체크리스트 [심화]

상품 등록

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

주요 변경사항

• price Input에 숫자 및 화폐 처리 로직을 추가했습니다.

스크린샷

멘토에게

• React-권수형 branch로 PR을 보내야할 것 같은데, 커밋 히스토리가 달라서 지정할 수가 없네요 ㅎ..(아마도 해당 브랜치에서 분리하지 않고 Basic branch에서 분리한채로 작업해서 그런 것 같습니다) 어떻게 하면 될까요..
• 다음과 같이 객체로 input state를 관리하고 있는데, 일괄적으로 같은 set함수를 prop으로 내려줄 수 있다는 장점도 있지만, set할때 코드가 길어지는 단점이 있는 것 같습니다. 개별 state로 분리하는게 좋을까요?

const [values, setValues] = useState({
  imgFile: null,
  title: '',
  description: '',
  price: 0,
  tags: [],
}) 

[ByungyeonKim]

코드 잘 봤습니다 수형님! 전반적으로 접근성도 잘 지켜주셨고, 시맨틱 태그도 잘 사용해 주셨어요.
import문에 대한 Lint 규칙 덕분에 포맷팅도 깔끔했습니다.

아 그리고 현재 PR에는 없지만, build 관련 설정도 해주셨더라구요.

  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        //build 시에 모든 console.log를 제거
        drop_console: true,
        drop_debugger: true,
      },
    },
  },

이런 디테일 너무 좋습니다! 혹시 여기서 경량화 도구를 terser로 선택하신 이유가 있으실까요?
현재 프로젝트에서, esbuild로 빌드 시 1.9초, terser의 경우 3.8초 정도 걸리더라구요.
별도로 설치할 필요 없이, 기본 도구인 esbuild도 동일하게 아래처럼 설정이 가능합니다!

  esbuild: {
    drop: ["debugger", "console"],
  },

좋습니다! 이제 질문에 대한 답변을 드릴게요.

1. React-권수형 branch로 PR을 보내야할 것 같은데, 커밋 히스토리가 달라서 지정할 수가 없네요 ㅎ..(아마도 해당 브랜치에서 분리하지 않고 Basic branch에서 분리한채로 작업해서 그런 것 같습니다) 어떻게 하면 될까요..
   : upstream remote가 되어 있다는 가정하에 말씀드릴게요! 먼저, 로컬 React 브랜치부터 만들어 주세요.

git checkout -b React-권수형-sprint6 

이후 아래와 같이 옵션을 추가하면 pull 해올 수 있어요.

git pull upstream React-권수형 --allow-unrelated-histories

pull 하시면 충돌은 생기지 않을 거예요. vite_project 폴더는 지우셔도 됩니다! PR 요청 후 메시지 주시면 바로 승인드릴게요. 😊 궁금한 게 생기면 편하게 질문주세요!

2. 다음과 같이 객체로 input state를 관리하고 있는데, 일괄적으로 같은 set함수를 prop으로 내려줄 수 있다는 장점도 있지만, set할때 코드가 길어지는 단점이 있는 것 같습니다. 개별 state로 분리하는게 좋을까요?

const [values, setValues] = useState({
  imgFile: null,
  title: '',
  description: '',
  price: 0,
  tags: [],
})

: 연관된 state를 그룹화한 것이기 때문에, 구조화를 잘하셨다고 생각해요. set 하는 코드가 많아져서 관리가 어렵다면, 커스텀 훅이나 리듀서로 관리하시는 것을 추천드려요!

• https://ko.react.dev/learn/choosing-the-state-structure
• https://ko.react.dev/learn/extracting-state-logic-into-a-reducer
• https://ko.react.dev/learn/extracting-state-logic-into-a-reducer