[59일차]프론트엔드 개발 효율성 및 UI 경험 향상법

1. 모킹 서버 (Mocking Server) with MSW

프론트엔드에서 모킹하는 이유

프론트엔드 개발을 진행하다 보면 백엔드 API가 아직 완성되지 않아 개발이 지연되는 상황(Blocker)이 발생한다. 이때 모킹(Mocking)은 없는 것을 있는 것처럼 임시로 만들어 개발 흐름을 끊기지 않게 해 준다.
단순히 변수에 가짜 데이터를 담아 사용하는 것을 넘어, 실제 네트워크 요청과 응답 과정을 시뮬레이션해야 하는 이유는 다음과 같다:

1. 병렬 개발 가능: 백엔드 개발이 완료될 때까지 기다리지 않고 프론트엔드 로직(데이터 페칭, 에러 핸들링 등)을 미리 구현할 수 있다.
2. 엣지 케이스 테스트: 서버에서 재현하기 힘든 에러 상황(500 에러, 네트워크 지연 등)을 쉽게 시뮬레이션하여 견고한 애플리케이션을 만들 수 있다.

MSW (Mock Service Worker) 라이브러리

MSW는 서비스 워커(Service Worker)를 사용하여 네트워크 요청을 가로채고(Intercept), 미리 정의된 모의 응답(Mock Response)을 보내주는 라이브러리이다. 실제 API 요청과 동일한 방식으로 작동하기 때문에 나중에 실제 API가 나왔을 때 코드를 수정할 일이 거의 없다.

설치 및 사용법

1. 설치:

   npm install msw --save-dev

2. 핸들러(Handlers) 작성 (src/mocks/handlers.js):
   어떤 요청을 가로챌지 정의한다.

   import { rest } from 'msw';
   
   export const handlers = [
     rest.get('/api/user', (req, res, ctx) => {
       return res(
         ctx.status(200),
         ctx.json({
           username: 'johndoe',
           age: 30,
         })
       );
     }),
   ];

3. 워커 설정 및 실행 (src/mocks/browser.js & src/index.js):
   브라우저 환경에서 서비스 워커를 등록하고 실행한다.

   // src/mocks/browser.js
   import { setupWorker } from 'msw';
   import { handlers } from './handlers';
   
   export const worker = setupWorker(...handlers);

   // src/index.js
   if (process.env.NODE_ENV === 'development') {
     const { worker } = require('./mocks/browser');
     worker.start();
   }

---

2. 가짜 데이터 만들기

개발 시 가짜 데이터가 필요한 이유

API 연동 전, UI가 데이터에 따라 어떻게 변하는지 확인하려면 다량의 데이터가 필요하다.
직접 손으로 dummy1, dummy2 같은 데이터를 입력하는 것은 비효율적이며, 실제 서비스 환경과 동떨어진 데이터 형태는 예상치 못한 UI 깨짐 현상을 놓치게 만든다.
따라서 현실적이고 다양한 형태의 대량 데이터를 생성하여 리스트 렌더링 성능 테스트나 레이아웃 점검을 수행해야 한다.

Faker.js 라이브러리

Faker.js는 이름, 주소, 이메일, 날짜 등 현실적인 가짜 데이터를 무작위로 생성해 주는 라이브러리이다.

설치 및 사용법

1. 설치:

   npm install @faker-js/faker --save-dev

2. 사용 예시:

   import { faker } from '@faker-js/faker';
   
   const createRandomUser = () => {
     return {
       userId: faker.string.uuid(),
       username: faker.internet.userName(),
       email: faker.internet.email(),
       avatar: faker.image.avatar(),
       birthdate: faker.date.birthdate(),
       registeredAt: faker.date.past(),
     };
   };
   
   // 사용자 10명 생성
   const users = Array.from({ length: 10 }, createRandomUser);
   console.log(users);

---

3. 프론트엔드에서 사용하는 다양한 UI 경험

사용자 경험(UX)을 향상시키기 위해 웹 애플리케이션에서는 다양한 UI 패턴을 사용한다. 각 UI 요소는 특정 목적을 가지고 정보를 효율적으로 전달하거나 사용자의 행동을 유도한다.

드롭다운 (Dropdown)

• 사용자가 여러 옵션 중 하나를 선택해야 할 때 공간을 절약하기 위해 사용한다. 평소에는 숨겨져 있다가 클릭 시 목록이 펼쳐지는 형태로, 복잡한 메뉴나 필터링 기능에서 화면을 깔끔하게 유지할 수 있게 해 준다.

탭 (Tab)

• 한정된 화면 공간 내에서 서로 관련된 콘텐츠를 그룹화하여 보여줄 때 사용한다. 페이지를 이동하지 않고도 주제별로 내용을 빠르게 전환하여 볼 수 있어 정보 탐색의 효율성을 높여준다.

모달 (Modal)

• 현재 작업 흐름을 잠시 중단하고 사용자의 주의를 집중시켜야 할 때 사용한다. 중요한 알림, 확인 요청, 또는 상세 정보 입력 폼 등을 띄워 사용자가 해당 작업에만 집중하도록 배경을 차단(Dimmed)한다.

토스트 메시지 (Toast Message)

• 사용자의 작업 결과(저장 성공, 삭제 완료, 경고 등)를 가볍게 피드백할 때 사용한다. 모달과 달리 사용자의 흐름을 방해하지 않고 잠시 나타났다가 사라지므로, 비침해적인 정보 전달에 적합하다.

무한 스크롤 (Infinite Scroll) with IntersectionObserver

• 사용자가 페이지 하단에 도달했을 때 추가 데이터를 자동으로 로드하여 끊김 없는 탐색 경험을 제공하기 위해 사용한다. 페이지네이션(Pagination)처럼 버튼을 클릭할 필요가 없어 모바일 환경이나 피드(Feed) 형태의 서비스에서 몰입감을 높여준다.
• IntersectionObserver: 스크롤 이벤트를 감지하는 방식은 성능 부하가 크다. 반면 IntersectionObserver API는 브라우저가 타겟 요소(스크롤 하단 감지용 div 등)가 뷰포트(화면)에 들어왔는지를 비동기적으로 관찰하여 성능 저하 없이 효율적으로 무한 스크롤을 구현할 수 있게 도와준다.

// IntersectionObserver 예시 코드
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    // 화면에 관찰 대상이 보이면 추가 데이터 로드 실행
    fetchMoreData();
  }
});

const target = document.querySelector('#scroll-anchor');
if (target) observer.observe(target);