3주차

1. react hook form과 zod를 같이 사용하려고 하는데 정확힌 zod의 장점이 궁금합니다. 런타임의 에러를 잡아줄 수 있다고 하는데 잘 와닿지 않습니다..

2. vercel과 깃허브 액션을 연동해서 자동 배포하는 시스템이 잘 이해가 가지 않습니다.
1. vercel에 깃허브 레포지토리를 연결하면 vercel에서 자동으로 브랜치마다 push 이벤트를 트리거해 프리뷰 버전으로 배포되는 것으로 알고 있습니다
2. 이를 develop, main 브랜치의 push 이벤트에서만 배포되도록 변경하라는 말씀이신가요…?

3. 게시글 수정 로직에서 이미지 처리때문에 고민이 많습니다.
1. 이미지 수정 페이지에서 이미지 x 버튼을 누르면 즉시 삭제
1. 반대의견: 그러면 수정 취소를 하면 이미지를 복구할 수가 없다
2. 이미지 수정 버튼을 눌러야 이미지 수정이 반영된다.
 
b안으로 가는 것 같은데 b안에서 백엔드에서 추가된 이미지, 삭제된 이미지 url을 전달해 줄 수 있냐고 요청 받았습니다.

게시글 수정 request내부의 imageUrl

3. b안 기존 request

imageurls: string[]

백엔드가 변경 요청하는 request

newImageUrls: string[]
deletedImageUrls: string[]

api 협의에 대해 고민이 있습니다.

• api가 저희가 원하는 대로 나오지 않았는데 백엔드에게 api를 수정해달라고 하면 또 저희는 그걸 기다리느라 개발을 잘 못할 것 같습니다. 일정이 더 딜레이 되느니 맘에 들지 않는 api response라도 저희가 잘 custom해서 개발하자는 의견이 많은데

• api를 프론트에게 잘 맞게 백엔드에게 수정 요청하는 소통 능력 vs 좋지 않은 api를 이용해서 잘 구현하는 능력 중에 어떤게 더 중요할까요?

• 그리고 저희의 상황이라면 멘토님은 어떻게 행동하실지 궁금합니다

백엔드의 역할과 프론트엔드의 역할 그리고 그 경계에 대하여

Chakra UI 의 wrapping 기능만 있는 컴포넌트의 필요성

LayoutWrapper = ({
  children,
  ...props
}: ComponentProps<typeof Container>) => {
  return (
    <Container width=“100%” p={0} {...props}>
      {children}
    </Container>
  );
};

const wrapperStyle = {
  width: “100%”,
  p: 0
}

<LayoutWrapper {...wrapperStyle} />
<LayoutWrapper {...wrapperStyle} />
<LayoutWrapper {...wrapperStyle} />

공통 레이아웃에서 전역 상태관리 사용여부

• 앱 상태(봉사자 앱, 보호소 앱) → prop 으로 제어
ex) APP_SHELTER, APP_VOLUNTEER

• 페이지 상태(어떤 페이지인지) → 라우터로 제어
ex) PAGE_SIGNUP, PAGE_SIGNIN

• 헤더 상태 → local state 에 가까움
ex) DEFAULT_HEADER, SEARCH_HEADER, DETAIL_HEADER

• 바텀 네비게이션바 상태 → 라우터로 제어
• 바텀 네비게이션바 visibility
• selected button 상태

• 검색창의 키워드 상태 → 전역

• 메뉴 클릭 여부 → 전역

API 에 대한 생각

1. API 가 화면에 보여지는 데이터만 제대로 존재하고,

2. 소통이 제대로 되지 않는, 커뮤니케이션 역량이 부족한 백엔드와 협업해야하는 경우