프론트엔드 mocking

프론트엔드에서 mocking을 사용한 테스트를 하는 이유?

프론트엔드에서 백엔드의 API를 활용해야 하는 것처럼, 백엔드 개발에 종속적인 부분이 있다면, 해당 부분이 완성되기 전까지는 프론트엔드에서 개발을 진행할 수 없고, 그 부분이 진행된 후에나 개발이 가능합니다. 심지어 추가적인 수정사항이 발생했는데 백엔드 개발에 의존성이 있는 부분에 수정이 필요하다면, 이러한 비효율적인 과정을 반복 진행할 수밖에 없습니다.

Mocking이란?

API 자체에 대한 의존성을 일단 가져가지 않고, Mocking을 통해 개발을 진행한 다음, 실제 사용해야 하는 API가 나온 시점에서 API의 실제 인터페이스에 맞게 컨버팅하는 과정을 따로 가지는 개발 방법으로 진행하기도 합니다.

MSW.js - 실제 API를 사용하는 것처럼 네트워크 수준에서 Mocking 하기

MSW(Mock Service Worker의 약자, https://mswjs.io)는 API Mocking 라이브러리로, 서버의 네트워크 요청을 가로채서 모의 응답(Mocked response)을 보내주는 역할을 합니다. 따라서, Mock Service Worker(MSW) 라이브러리를 통하면, Mock 서버를 구축하지 않아도 API를 네트워크 수준에서 Mocking 할 수 있습니다.

출처: https://tech.kakao.com/2021/09/29/mocking-fe/