[React, Next.js] 로또 마법진 사이트 만들기 (2) - 프론트 목업을 위해 MSW 설치하고 관련 코드 작성하기!

 

 

이번 프로젝트를 하면서
꼭 해보고 싶었던 것 중 하나는 목업이었다.
과연 목업이 무엇이며,
React는 어떤식으로 목업을 할까?

 

 

 

 

 

https://lotto-magic-frontend.vercel.app/

로또 번호 생성 마법진

 

 

 

 

 

 

1. 환경구성

• React
• Next.js
• WebStorm
• TypeScript

 

 

---

 

 

 

 

2. 목업(Mocking)

• 개발에서의 목업은 실제 제품이나 API가 아직 준비되지 않았을 때, 그 역할을 대신할 가짜 데이터나 환경을 만드는 것을 의미한다.
• 프론트엔드 개발 시 백엔드 API 서버가 완성될 때까지 기다리지 않고, 미리 정의된 데이터 구조를 이용해 UI와 비즈니스 로직을 구현하기 위해 사용한다.
• 다양한 상황 테스트가 가능하다. 서버 에러 등 실제 서버에서 재현하기 번거로운 상황을 쉽게 테스트할 수 있다.
• 외부 API 상태와 상관없이 프론트엔드 로직의 정확성만 검증할 수 있다. 즉, 독립적인 테스트가 가능하다.

 

 

 

---

 

 

 

 

3. MSW(Mock Service Worker)

• MSW는 브라우저의 Service Worker API를 사용해서 네트워크 수준에서 API 요청을 가로채고, 가짜 응답을 보내주는 라이브러리이다.
• 실제 네트워크 요청이 나가는 경로를 중간에서 가로채기 때문에 훨씬 현실감 있는 모킹이 가능하다.
• 크롬 개발자 도구의 Network 탭에서 요청이 실제로 나가는 것처럼 기록이 남는다. 디버깅 시 매우 큰 장점이 된다.
• MSW의 동작 과정
  a) 요청발생 : 리액트 앱에서 fetch나 axios를 통해 API 요청을 보낸다.
  b) 인터셉트 : 브라우저에 등록된 Service Worker가 이 요청을 가로챈다.
  c) 핸들러확인 : MSW에 미리 정의해둔 핸들러 중에 해당 요청 주소와 일치하는 것이 있는지 확인한다.
  d) 응답변환 : 일치하는 핸들러가 있다면 가짜 응답(JSON)을 브라우저에 전달한다. 만약 없다면 실제 네트워크로 요청을 통과시킨다.

 

 

---

 

 

 

4. MSW 

• 설치하기
  프로젝트 내에 있는 터미널에 들어가서 아래 코드를 적어 설치한다. 여기서 --save-dev는 개발과 테스트 시에만 필요한 도구로 용도를 적은 것이기에 최종 결과물에서는 제외된다.

npm install msw --save-dev

 

 

 

• 브라우저에 서비스 워커 등록하기
  브라우저가 밖으로 내보내는 네트워크 요청을 가로챌 수 있는 권한을 얻기 위해 서비스 워커를 등록한다. 이때 등록을 완료하면 public 디렉토리에 MockServiceWorker라는 파일이 생긴다.

npx msw init public --save

쨔잔~!

 

 

 

• browser.ts 작성하기
  mocks/browser.ts : mocks 디렉토리를 만들고 그 안에 browser.ts 파일을 생성한다. handlers라는 파일을 바로 다음에 만들거다. 이 handlers파일에는 어떤 주소의 요청에 어떤 데이터를 보낼지 규칙들을 모아두는데, browser.ts가 가져온 규칙들(hanlders)을 서비스 워커에 주입하여 실제 가짜 서버 인스턴스(worker)를 만든다. handlers 배열에 담긴 여러 규칙을 꺼내야하니, ...(전개연산자)를 사용했다.

src가 있다면 그 밑에 만들면 된다

 

import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

import { setupWorker } from 'msw/browser';는 브러우저용 서비스 워커를 생성하는 핵심 함수를 가져온다.
import { handlers } from './handlers';는 어떤 요청을 보낼지 규칙을 모아둔 파일인 handlers 파일을 가져온다. 
export const worker = setupWorker(...handlers);는 가져온 hanlders를 서비스 워커에 주입하여 실제 가짜 서버 인스턴스(worker)를 만든다. ...(전개연산자)를 사용해서 handlers 배열에 담긴 여러 규칙을 하나씩 꺼내서 설정 함수에 전달한다.

 

 

• handler.ts 작성하기
  이건 각자 코드에 맞춰서 작성해야한다. 이 코드를 더 잘 이해하고 싶으면  [행운의 로또 마법진] 카테고리로 들어가서 "구성"을 읽어보면 도움이 될 것이다.
  a) 일단 이 프로젝트의 메인화면에는 사용자가 마법진에 넣은 요소들을 3가지 골라야한다. 그래서 그 요소를 보여줄 부분을 핸들러에 작성해야한다. (선택 목록 작성 : GET)
  b) 사용자가 3가지 선택 요소를 고르면 로또 추점을 실행해야한다. 선택한 옵션이 3가지인지 확인하고, 아니면 에러를 반환한다. 그리고 결과물을 반환한다. (로또 마법진 생성 : POST)

import { http, HttpResponse } from 'msw';

// 선택옵션들
const optionItems = [
    '행운',
    '조상님의도움',
    '제왕의자리',
    '개쩌는꿈',
    '나의직감',
    '엘프의선견지명',
    '한치앞이보이는내인생',
    '내돈',
    '다이아몬드광산주인',
    '개꿈',
    '내인생수직상승황금티켓',
    '요정님도와죠',
    '내집마련',
    '외계인의텔레파시',
    '퇴사각',
    '1등이필요해',
];

// 요청 바디 타입
// POST 요청 시 프론트엔드에서 보내줄 데이터의 규격을 TypeScript로 정의했음
type DrawRequestBody = {
    selectedOptions: string[];
};

export const handlers = [
    // 프론트엔드가 화면을 그릴 때 필요한 선택할 요소들을 반환한다.
    // 단순히 데이터를 내려주는 정적 응답이니까 GET으로...!
    http.get('/api/lotto/options', () => {
        return HttpResponse.json({
            options: optionItems,
        });
    }),

    // 로또 번호 추첨을 실행한다.
    http.post('/api/lotto/draw', async ({ request }) => {
        // request.json을 통해 프론트엔드에서 보낸 JSON 데이터를 읽어온다.
        const body = (await request.json()) as Partial<DrawRequestBody>;
        const selectedOptions = body.selectedOptions ?? [];

        // 요소 3가지를 선택하지 않았을 경우 400 Bad Request 에러를 반환한다.
        if (selectedOptions.length !== 3) {
            return HttpResponse.json(
                {
                    message: '요소 3가지를 선택해주세요.',
                },
                { status: 400 }
            );
        }

        // 3개를 제대로 선택했다면 로또 번호와 행운의 점수, 이미지 경로 등을 반환한다.
        // 원래는 행운의 점수, 메시지는 계산 로직에 의해 나타나야하는데,
        // 지금은 테스트 과정이니까 어떤 걸 선택하는 아래 설정한 결과가 나타난다.
        return HttpResponse.json({
            numbers: [3, 11, 19, 27, 34, 42],
            luckScore: 84,
            luckMessage: '우주 통신 연결 완료',
            selectedOptions,
            spellNumber: 3,
            spellImageUrl: '/images/spells/3.png',
        });
    }),
];

 

 

 

---

 

 

 

 

5. 프론트 코드 살펴보기 - MSW랑 연결해서

• HomePage.tsx(메인페이지)_ 요청 보내기

                   <button
                        type="button"
                        className={styles.createButton}
                        onClick={handleCreateClick}
                        disabled={isSubmitting}
                    >

쿵짝쿵짝 만들기 버튼을 클릭하는 메서드를 handleCreateClick이라고 정했다.

 

    // 버튼을 클릭하면 이제 이 메서드가 영차영차 돌아간다.
    const handleCreateClick = async () => {
    
        // 요소 3가지를 선택했는지 확인한다.
        if (selectedOptions.length !== 3) {
            showMagicToast('요소 3가지를 선택해주세요.');
            return;
        }

        try {
            setIsSubmitting(true);
            
            // 사용자가 버튼을 클릭하면 fetch가 실행된다.
            // 원래라면 브라우저는 진짜 서버 주소를 찾아 나간다.
            // 그런데 MSW가 이 요청을 중간에서 낚아챈다.
            const response = await fetch('/api/lotto/draw', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    selectedOptions,
                }),
            });

            // MSW가 준 가짜 데이터를 받았다.
            // result 변수에는 핸들러에 적어두었던 로또 번호, 행운 점수 등이 담긴다.
            const result: DrawResponse = await response.json();
            
            // 당장 결과를 보여주지 않기 때문에 결과값을 sessionStorage에 보관한다.
            // 브라우저가 닫히기 전까지 보관은 유지된다.
            sessionStorage.setItem('lotto-result', JSON.stringify(result));
            
            // 그 후 로딩페이지로 넘어간다.
            router.push('/loading');

 

 

• ResultPage.tsx(결과페이지)_ 세션스토리지에 있는 결과 보이기

    useEffect(() => {
        const savedResult = sessionStorage.getItem('lotto-result');

 

 

아까 HomePage.tsx에서 sessionStorage에 결과값을 저장해뒀다. 그 저장해둔 값을 가져와서 화면에 데이터를 보여준다.

 

 

 

---

 

- MSW (React+TypeScript) 설치

React에서 MSW 사용하기

 

 

- MSW의 설명과 설치

MSW(Mock Service Worker)로 더욱 생산적인 FE 개발하기