0713

Clone Coding

• deal 컴포넌트 제작

  • https://github.com/dpwls02142/shopping-app/pull/13

• db

  • 옵션 선택을 위해 fetchProductOptionsByProductId 추가

• tailwind 숫자에 대괄호를 씌우면 custom 가능

• React event type

  • 브라우저는 사용자 액션에 대해 네이티브 DOM 이벤트를 생성하지만, React는 이를 SyntheticEvent로 래핑해서 컴포넌트에 전달함.
  • React가 SyntheticEvent를 사용하는 이유는 크로스 브라우저 호환성을 보장하기 위해서임. 예를 들어 Internet Explorer에서는 event.preventDefault() 대신 event.returnValue = false를 사용해야 하는데, React의 SyntheticEvent는 이런 브라우저별 차이점을 추상화해서 모든 브라우저에서 동일한 API를 제공함.
  • JSX 요소의 이벤트 핸들러(onClick, onMouseOver 등)는 항상 React의 SyntheticEvent를 받기 때문에 React.MouseEvent 타입을 사용해야 함. 반면 addEventListener로 직접 DOM에 이벤트를 등록하거나 useRef를 통해 DOM 요소에 직접 접근할 때는 네이티브 MouseEvent 타입을 사용해야 함.
  • 결론적으로 JSX 이벤트 핸들러에서는 React.MouseEvent를, 네이티브 DOM API 사용시에는 MouseEvent를 사용하는 것이 올바른 타입 안정성을 보장할 수 있음.

• 배포를 위해서 app 디렉토리 안에 api를 만들어서 route를 설정