이번 글에서는 마저 이어서 MSW 설치부터 적용, 그리고 잘 사용했는지(?)에 대해 기술해 보려고 합니다. 우선 MSW를 사용하려면 패키지를 먼저 설치해줘야겠죠? MSW 패키지 설치npm install msw --save-dev# oryarn add -D msw 폴더 구조이거는 팀바팀, 사람마다 다르겠지만 저는 src 폴더 내에 mocks 라는 폴더를 생성해줬습니다.그리고, mocks 폴더 내에 handlers.ts라는 파일을 만들어주고 아래와 같은 코드를 넣어줬는데요, 자세한 설명은 주석으로 달겠습니다!// src/mocks/handlers.tsimport { http, HttpResponse } from "msw";import { SignUpFormData } from "../lib/schema/au..

이 글을 작성하는 이유기존에 진행했던 세종피어 프로젝트를 되살려보려고 했지만 백엔드 팀원들의 개인 사정 때문에 더는 이어 나갈 수 없기도 하고 이전에 존재했던 API 역시 사용할 수 없기에 어떻게 할까 고민을 하다가 마침 올리브영 테크블로그의 글을 읽게 되었습니다. 여기서 MSW라는 개념에 대해 알게 되어 한 번 사용해 보고 느낀 점을 기술하고자 글을 작성하게 되었습니다.또, 사실 해커톤에서나 프로젝트에서나 프론트엔드 개발자는 백엔드 API가 나오기 전에 UI를 완성해 놓으면 시간이 붕 뜨기 마련입니다. 앞으로는 이런 일을 방지하고자, API를 Mocking하는 MSW를 사용해 보았습니다. 다음은 기본적인 페이지 구성 및 UI 구현이지만 이 부분은 생략하고 MSW (Mocking Service Worke..