React 동적 UI - part9

모킹 서버 작성

MSW

1. Mock Service Worker
   • 백엔드가 아직 완전히 준비되지 않았을 때, 프론트가 사용할 수 있는 말 그대로 묵 서버이다.
2. 존재하지 않는 API에 대한 응답을 모킹
   • 실제 서버대신 MSW 핸들러를 등록한다.
3. service worker 에서 요청을 처리
   • 브라우저 네트워크 요청을 가로채고, 미리 정의한 JSON 데이터를 반환
4. chrome 기준 devTool의 Application / Service workers의 "Bypass for network"로 일시 정지
   • Application → Service Workers에서 “Bypass for network” 체크박스로 일시 중지 가능

이를 통해 프론트 단위 테스트와 UI 개발 병렬화가 가능하다.
또한 API 변경에도 빠르게 대응할 수 있게된다.

리뷰 목록 - △(setupWorker에서 오류가남)

msx를 이용해서 네트워크 요청을 가로체 faker로 만든 댓글을 추가하여 상품마다 넣어줌
mocks/browser.ts를 통해 특정 네트워크 요청을 가로채서 넣어줌

다양한 UI 컴포넌트

드롭다운 - O

• 구현 방식:
  • 상태(isOpen)로 토글
  • position: absolute + z-index로 레이어 관리
• 특징:
  • useEffect로 외부 클릭 시 닫기 처리

탭 - O

• 구현 방식:
  • 탭 인덱스를 상태로 관리
  • map으로 버튼 렌더링 → 선택된 탭만 콘텐츠 노출

토스트 - X

• 구현 방식:
  • 커스텀 훅 useToast()
  • setTimeout으로 자동 사라지게
  • Context + Portal로 최상단 렌더링

모달 - O

• 구현 방식:
  • React Portal (createPortal)
  • isOpen 플래그로 Show/Hide
  • 백드롭 클릭 시 닫기

무한 스크롤 - O

• 구현 방식:
  • IntersectionObserver로 리스트 하단 감지
  • 다음 페이지 데이터 fetchMore() 자동 호출
  • 로딩 스피너 컴포넌트 노출