[NEGO MARKET] "백엔드 개발자님.. API 언제 되나요?" 말고 MSW

프로젝트에 MSW를 적극 도입한 이유

새로 프로젝트를 시작하게 되면, 프론트엔드 개발자라면 백엔드 개발자와 협업을 하게 되죠 ? 프론트엔드 개발자는 백엔드 개발자가 만든 API를 기반으로 요청을 보내 응답을 받고 화면에 적절히 보여주는 부분이 많을 수 밖에 없습니다.

 

그렇다보니, 프론트엔드 개발자의 작업이 뒤로 밀리는 경우가 생길 수 밖에 없는데요. 이럴 때 프론트엔드 개발자는 막연하게 기다리기만 한다면 당연히 프로젝트 진행이 딜레이됩니다.

 

그래서 저희는 이번 프로젝트에서 MSW를 적극 도입하여 초반에도 작업이 딜레이 되지 않고 생산성을 유지할 수 있었다고 생각이 듭니다.

 

어떻게 MSW를 활용했는지

저희 프로젝트의 경우, 백엔드 개발자 분께서 미리 정확한 API까지는 아니더라도 request와 response에 어떠한 데이터가 필요하고 응답이 올지를 공지 받았습니다. 예를 들어 회원가입 시에는 아이디, 비밀번호, 지역, 전화번호가 필요하고, 응답으로는 success 관련 boolean 값이 온다 정도의 간단한 공지였습니다. 물론, 이는 일부의 내용이였으며, 일부는 아직 공지가 안 된 부분도 존재했습니다.

 

이럴 때 중요한 건, 서버로부터 어떤 데이터를 보내서 어떤 데이터를 받을 수 있는지를 예상하고 mocking service를 구축하여 적절히 화면을 구성하느냐였습니다.

 

요청과 응답 데이터를 예상하여 성공 화면, 실패화면 등을 원하는 화면을 더 빠르고 효율적이게 작업을 할 수 있었습니다.

 

내가 로그인 로직에 MSW를 적용한 방법

저는 MSW를 여러 페이지에 적극 도입하여 활용하였는데요. 이 중에서도 로그인 파트에서 사용한 방법에 대해 소개해 보려고 합니다.

 

공지가 되었던 부분

위와 같이 공지가 되어 이 내용을 바탕으로 mocking service를 추가했습니다.

mock data

우선 로그인 성공과 실패를 테스트하기 위해 계정 하나를 mock으로 넣어주었습니다.

const userMock = [
	{
		id: 1,
		email: 'test@test.com',
		pw: 'test1111!',
		nickName: '테스트닉네임',
		phone: '010-1111-2222',
		region: '서울 강남구 역삼동',
		profile_img: null,
		token: 11111,
	},
]

사실 위와 같이 유저가 회원가입 시 입력한 정보까지는 들고 있지 않아도 되지만 저는 데이터베이스까지도 상상하며 `useMock`을 생성해주었습니다. 뿐만 아니라, 해당 데이터를 가지고 제 파트는 아니였지만, 회원 정보 수정 같은 user 관련 부분의 mocking service가 추가될 수도 있다고 생각하여 위와 같이 구성했습니다.

 

여기에는 여러 유저의 데이터가 존재할 텐데 로그인 시 이 리스트에서 유저를 찾는다면 로그인이 성공되고 찾지 못한다면 로그인에 실패한다는 로직을 생각하며 mock 데이터를 생성했습니다.

userLogin

export const userLogin = rest.post('/api/user/login', async (req, res, ctx) => {
	const { email, pw } = req.body

	const findUser = userMock.find(user => user.email === email && user.pw === pw)

	if (findUser) {
		// 로그인 성공
		return res(
			ctx.status(200),
			ctx.json({
				userInfo: findUser,
				token: 11111,
				refresh: Math.floor(Math.random() * 100000),
			}),
		)
	}

	if (userMock.some(user => user.email === email)) {
		// 아이디 혹은 비밀번호가 올바르지 않습니다.
		return res(
			ctx.status(401),
			ctx.json({ message: '아이디 혹은 비밀번호가 올바르지 않습니다.' }),
		)
	}

	// 가입되지 않은 회원입니다.
	return res(
		ctx.status(401),
		ctx.json({ message: '가입되지 않은 회원입니다.' }),
	)
})

mock api를 통해 응답 받은 데이터에서 email과 pw를 통해 로그인 성공, 실패 로직을 작성하여 모두 `return res` 해주었습니다. 덕분에 로그인에 성공 및 실패했을 때의 플로우를 빠르게 구성할 수 있었습니다. 뿐만 아니라 로그인의 경우 userInfo나 accessToken을 받아 로컬 스토리지에 저장한 후 이후의 작업들이 꽤 있었기에 그러한 부분에서도 작업을 바로 이어서 할 수 있었습니다. 결과적으로 MSW 덕에 팀의 생산성을 높일 수 있었습니다.

 

많은 양의 데이터가 필요할 때

추가로 제가 MSW가 유용했던 순간이 하나 더 있는데요. 많은 양의 데이터가 존재하는 경우의 화면을 구성할 때였습니다. 예를 들어 페이지네이션을 구현해야 할 때, 만약 MSW가 없었다면, 내가 일일이 서버에 요청을 보내서 데이터를 채우고 테스트를 해야할 것 입니다. 이는 굉장히 피로도가 있고 생산성도 매우 떨어지는 과정이라는 생각이 드는데요.

const bankMock = {
	amount: {
		totalSaleAmount: '50000', // 총 판매 금액
		totalPurchaseAmount: '30000', // 총 구매 금액
		thisMonthSaleAmount: '3000', // 이번 달 판매 금액
		thisMonthPurchaseAmount: '5000', // 이번 달 구매 금액
	},
	payList: [],
	count: 0,
}
// 2023년 5월 데이터
for (let i = 0; i < 20; i++) {
	bankMock.payList.push({
		idx: Math.floor(Math.random() * 100000),
		createdAt: '2023-05-22',
		product: {
			idx: Math.floor(Math.random() * 100000),
			createdAt: '2023-05-21',
			price: 4000,
			img_url:
				'https://product-image.kurly.com/product/image/9841e982-6ea5-4c55-a769-36366f5f3d2a.jpg',
		},
	})
}
// 2023년 4월 데이터
for (let i = 0; i < 5; i++) {
	bankMock.payList.push({
		idx: Math.floor(Math.random() * 100000),
		createdAt: '2023-04-22',
		product: {
			idx: Math.floor(Math.random() * 100000),
			createdAt: '2023-05-21',
			price: 4000,
			img_url:
				'https://product-image.kurly.com/product/image/9841e982-6ea5-4c55-a769-36366f5f3d2a.jpg',
		},
	})
}
// 2023년 3월 데이터
for (let i = 0; i < 30; i++) {
	bankMock.payList.push({
		idx: Math.floor(Math.random() * 100000),
		createdAt: '2023-03-22',
		product: {
			idx: Math.floor(Math.random() * 100000),
			createdAt: '2023-05-21',
			price: 4000,
			img_url:
				'https://product-image.kurly.com/product/image/9841e982-6ea5-4c55-a769-36366f5f3d2a.jpg',
		},
	})
}
// 2023년 2월 데이터
for (let i = 0; i < 200; i++) {
	bankMock.payList.push({
		idx: Math.floor(Math.random() * 100000),
		createdAt: '2023-02-22',
		product: {
			idx: Math.floor(Math.random() * 100000),
			createdAt: '2023-05-21',
			price: 4000,
			img_url: 'https://img-cf.kurly.com/shop/data/goods/1652772661272l0.jpg',
		},
	})
}

bankMock.count = bankMock.payList.length

위 처럼 한번에 많은 양의 데이터를 임의로 생성해 여러 경우(아이템이 없을 때, 아이템이 적을 때, 많을 때 등)에 대해 페이지네이션 기능을 확인하며 개발을 더욱 빠르게 진행할 수 있었습니다.

 

그 외 MSW 활용 방법

테스트 환경에 MSW 도입

MSW를 활용해서 다음과 같은 테스트 코드를 작성할 수 있습니다.

• 서버에서 데이터를 정상적으로 잘 가져와서 렌더링 하는가
• 서로 다른 데이터에 따라 조건부 렌더링이 잘 되는가
• 엣지 케이스 데이터들에 대해 처리가 잘 되었는가
• 네트워크 에러가 발생했을 때도 처리가 잘 되는가

스토리북 연동

스토리북을 통해 시각적으로 테스트를 진행하는 경우가 많은데, 다양한 시나리오에 해당하는 렌더링 결과를 확인하려면 MSW가 필요합니다. 

---

이번 글에서는 프로젝트 MSW를 도입하게 된 이유와 도입 과정에 대해 알아보았습니다. 제가 활용한 부분이 이외에도 테스트 과정과 스토리북에도 도입을 할 수가 있다는 사실까지도 알아보았는데요.

해당 프로젝트에는 두 테스트 과정과 스토리북이 빠져 도입할 수 없었지만, 다음에는 여러 시나리오에 대해 미리 대응하고 더 나은 생산성을 위해 테스트 과정과 스토리북에서의 도입 과정에 대해 고민해 보려고 합니다 :)