MSW 정복하기 🤓🖥️

MSW란?

MSW는 Mocking Service Worker의 약자로, 말 그대로 service worker를 이용해 가짜 api를 mocking하는 도구이다.
즉, 브라우저에 존재하며 실제 백앤드처럼 데이터를 주고 받는 역할을 한다.
"가짜 데이터를 다룰 수 있게 해주는 도구라고 볼 수 있다."

🤔 백엔드가 있는데 왜 MSW를 사용하는 걸까?

프로젝트 진행시, 백엔드 개발에 종속적인 부분이 있다면 해당 부분이 완성되기 전까지는 프론트에서는 개발을 진행할 수 없고, API가 없는 상태이기 때문에 그 시간 만큼 마냥 기다려야 할 수도 있다.
MSW를 활용하면 API가 개발되기 전, 백엔드의 역할을 '가짜'로 대신 해주기 때문에 프론트의 개발이 제시간 안에 끝날 수 있다.

🛴 MSW 동작 방식

MSW는 서버의 네트워크 요청을 가로채 모의 응답을 보내주는 역할을 한다.
MSW가 이러한 역할을 할 수 있는 이유는 Service Worker를 통해 HTTP 요청을 가로챌 수 있기 때문이다. 이 과정에서 실제 서버 존재 여부와 상관 없이 실제 요청이 이어지지 않고, 예상 가능한 요청에 대해 mocking이 가능해진다.

Service Worker란?

service worker는 웹 어플리케이션의 메인 스레드와 분리된 별도의 백그라운드 스레드에서 실행시킬 수 있는 기술 중 하나이다. service worker 덕분에 어플리케이션의 ui block 없이도 연산을 처리할 수 있다.
service worker의 기능 중 하나가 애플리케이션과 서버 사이에서 request를 가로채 직접 fetch에 대한 컨트롤을 하고, 색다른 작업을 하는 것이다.

실제로 사용해보기

1. 목데이터 생성 - 백엔드에서 올 api와 비슷한 형태를 갖춘 목데이터가 필요하다. 
- 나는 마이페이지, 회원가입, 로그인 페이지에서 필요할 사용자 데이터를 생성했다. 
export const userList = [
	{
		id: 1,
		email: "example@naver.com",
		password: "1234",
		nickname: "aaa",
		name: "심재원",
		phoneNum: "010-1111-1111",
		address: "서울시 성동구 성수동",
		degree: 36.5,
		profileImg: FAKEPROFILE,
		aboutMe: "자기소개 페이지입니다. 날 펙트로 정의 하자면 퍼펙트.",
		registerProducts: [
			{
				id: 0,
			},
		],
		boughtProducts: [
			{
				id: 11,
			},
		],
		likeProducts: [
			{
				id: 22,
			},
		],
	},
	{
		id: 0,
		email: "test@naver.com",
		password: "1234",
		nickname: "bbb",
		name: "테스트",
		phoneNum: "010-1234-1234",
		address: "서울시 성동구 성수동",
		degree: 36.5,
		profileImg: FAKEPROFILE,
		aboutMe: "자기소개 페이지입니다. 날 펙트로 정의 하자면 퍼펙트.",
		registerProducts: [],
		likeProducts: [],
		boughtProducts: [],
	},
];

---

2. api 요청 로직 생성  
import { userList } from "mock/userList";
import { rest } from "msw";

// get => /users라는 주소로 , userList라는 목데이터를 받아와준다. 
export const getUsers = rest.get("/users", async (req, res, ctx) => {
			return res(ctx.status(200), ctx.json(userList));
});

// post => /users라는 주소로 데이터 추가 (회원가입이나 로그인시 추가되는 ?>
export const addUser = rest.post("/users", async (req, res, ctx) => {
			
		// 가입시 받아와야 하는 정보들 변수로 생성 
		let email;
		let password;
		let nickname;
		let name;
		let phoneNum;
		let address;
		
		// 기존의 데이터 속성에 추가해주기 (새로 받아오는 걸)
		await req.json().then(data => {
				email = data.email;
				password = data.password;
				nickname = data.nickname;
				name = data.name;
				phoneNum = data.phoneNum;
				address = data.address;

		});

		// 새로 받아온 데이터 + 새로 받지 않는 데이터 (userList목록중)를
		// 모두 합쳐서 하나의 목데이터가 또 생성되는 것 . 
		return res(
				ctx.status(200),
				ctx.json({
					id: Math.floor(Math.random() * 100000),
					email,
					password,
					nickname,
					name,
					phoneNum,
					address,
					degree: 36.5,
					profileImg: null,
					aboutMe: "자신을 소개해주세요",
					registerProducts: [],
					boughtProducts: [],
					likeProducts: [],
				}),
		);
});		

// 데이터 수정
// 마이페이지 정보 수정때 사용된다. 하나하나 일일이 수정할 수 있도록 짜인 구조이기 때문에 
// 하나의 함수로 만들어준다. 
const updateUser = key => {
			return rest.patch("/user/:id", async (req, res, ctx) => {
						const { id } = req.params;
						const editedData = { id : parseInt(id) };
						
						await req.json().then(data => {
									editedData[`${key}`] = data[`${key}`];
						});
					
						return res(ctx.status(200), ctx.json(editedData));
			})
})

export const updateUserEmail = updateUser("email");
export const updateUserPassword = updateUser("password");
export const updateUserNickname = updateUser("nickname");
export const updateUserName = updateUser("name");
export const updateUserPhoneNum = updateUser("phoneNum");
export const updateUserAddress = updateUser("address");
export const updateUserAboutMe = updateUser("aboutMe");
export const updateUserProfileImg = updateUser("profileImg");

---

3. Service Worker 생성 
// handler.js
import { setupWorker } from "msw";
import * as userApi from "../apis/user.api.js";

const handlers = [
	...Object.values(userApi),
];

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

---

4. 브라우저에서 service worker 사용이 가능하도록 삽입해준다. (react + js에서는 루트에 위치한 index.js)
import { worker } from "mocks/handlers";
if (process.env.NODE_ENV === "development") {
	worker.start();
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
);

---

5. 이제 axios나 fetch 등 데이터 요청 로직을 사용하여 실행해 데이터가 오는지 확인하면 된다. 
const Main = () => {

		useEffect(() => {
			axios.get("/users").then(res => console.log(res.data));
		}, []);

		return (
					<></>
		)
}