지난 시간에 이어 프로젝트에서 부족했던 부분을 계속해서 보완해 볼게요. 이번 시간에는 백엔드 API가 없을 때 대처하는 방법과 다양한 UI 컴포넌트 구현 과정을 살펴볼게요.
모킹 서버 구축 (MSW)
현재 백엔드에 리뷰 기능이 구현되지 않은 상태예요. 프론트엔드 개발 시 백엔드 API가 완성되지 않았을 때, 가짜 응답을 만들어주는 모킹(Mocking) 서버를 활용하면 개발을 끊김 없이 진행할 수 있어요.
MSW (Mock Service Worker) 라이브러리를 사용하면 실제 브라우저의 네트워크 요청을 가로채서 우리가 정의한 모킹 API 응답을 반환하도록 만들 수 있어요.
# MSW 라이브러리 설치
npm i msw --save-dev
# public 폴더에 서비스 워커 초기화
npx msw init public/ --save초기화 후에는 mock/api.ts 에 필요한 API 라우팅을 작성하고, src/mock/browser.ts 에 워커를 등록하여 앱 실행 시 함께 동작하도록 설정해요.
가짜 데이터 생성 (Faker.js)
모킹 서버에서 반환할 응답 데이터는 faker.js 라이브러리를 활용해 생성해요. 이 도구를 사용하면 이름, 이메일, 긴 텍스트 등 실제와 유사한 형태의 다양한 가짜 데이터를 쉽게 만들 수 있어요.
입력 폼에서 데이터를 받아올 때, 문자열이 아닌 숫자로 바로 처리해야 하는 경우가 있어요. 이때 useForm() 의 valueAsNumber 옵션을 사용하면 폼에서 입력된 값을 숫자로 자동 변환해서 받아올 수 있어 편리해요.
다양한 UI 컴포넌트 구현
외부 UI 라이브러리 사용을 최소화하고 리액트에서 제공하는 기본 기능들을 활용해 여러 컴포넌트를 직접 구현해 보았어요.
드롭다운과 탭
드롭다운 메뉴의 바깥 영역을 클릭했을 때 메뉴가 닫히도록 만들려면 ref 를 활용해야 해요. ref.current.contains() 함수를 사용하면 현재 클릭된 위치가 컴포넌트 내부인지 외부인지 식별할 수 있어요.
탭 UI의 경우, 탭을 감싸는 전체 컨테이너와 내부 아이템 컴포넌트를 분리하지 않고 하나의 파일에서 구현하면 데이터 전달과 관리가 수월해져요.
모달과 토스트 메시지
모달은 기존 화면 위에 새로운 창을 띄워 사용자 상호작용을 유도하는 컴포넌트예요. 반면 토스트 메시지는 성공이나 실패 같은 단순한 알림을 화면 구석에 잠깐 띄웠다가 사라지게 할 때 사용해요.
이러한 오버레이 형태의 컴포넌트들은 react-dom 에서 제공하는 createPortal 을 활용하면 좋아요. 기존의 부모 DOM 계층 구조에 갇히지 않고 최상위 요소에 직접 렌더링되도록 위치를 조정할 수 있어요.
import { createPortal } from "react-dom";
const Modal = ({ children }) => {
// 모달을 root 요소가 아닌 별도의 modal-root 요소에 렌더링해요.
return createPortal(
<div className="modal-overlay">
{children}
</div>,
document.getElementById("modal-root")
);
};또한 모달이나 토스트를 열고 닫는 반복적인 상태 제어 로직은 커스텀 훅으로 분리해 두면 코드의 중복을 깔끔하게 제거할 수 있어요.
무한 스크롤
상품 목록처럼 제공할 데이터가 많을 때, 사용자가 화면 하단으로 이동하면 서버에서 데이터를 추가로 받아오는 방식이에요.
화면의 특정 요소가 뷰포트에 들어왔는지 감시하는 브라우저 내장 API인 IntersectionObserver 와, TanStack Query가 제공하는 useInfiniteQuery 를 조합하여 데이터를 연속적으로 불러오도록 구현할 수 있어요.
