프론트엔드 모킹 환경에 감칠맛 더하기 #우아콘2023 #우아한형제들

기존 환경은 axios-mock-adapter로 모킹했는데, axios 동작을 교체하는 방식이라 axios를 호출하는 케이스만 모킹할 수 있었다. 외부 라이브러리나 axios를 쓰지 않는 네트워크 요청(사내 기능 플래그·AB 테스트·로그 적재 등)은 모킹할 수 없었고, 실제 브라우저 네트워크 스택을 통과하지 않아 어떤 지면이 어떤 API를 요청하는지 브라우저 레벨 트래킹이 불가능했다.

그래서 팀은 MSW(Mock Service Worker)로 전환한다. REST 객체를 임포트해 HTTP 메서드와 모킹 경로를 지정하고 리졸버로 동작을 정의한 뒤 setupWorker로 시작하면 즉시 모킹된다. MSW는 라이브러리·프레임워크 의존성이 없어 fetch API, XMLHttpRequest까지 모두 모킹하고, 노드 환경(테스트)에서도 쓸 수 있으며, 서비스 워커가 브라우저 네트워크 스택을 통과해 개발자 도구 네트워크 탭에서 요청·응답을 직접 추적할 수 있다.

좋은 라이브러리라고 모든 것을 해결하지는 않았다. 다양한 테스트에서 모킹 동작을 수정하려면 코드 레벨 제어가 필연적인데, 다른 팀원에게 영향을 주지 않으려 원복하거나 실수로 커밋하면 영향을 준다. 또 목 데이터는 JSON으로 저장되지만 파일 네이밍만으로 상황을 표현하는 데 한계가 있어, 데이터가 늘수록 잘못 매핑하면 진입 장벽이 오르고 활용도가 떨어진다.

이런 불편에서 출발해, 개발자 경험을 향상시킬 라이브러리 "목 서비스(Mock Service)"를 직접 만든다. UI를 통해 미리 정의해 둔 API 응답값을 실시간으로 제어하는 라이브러리다.

목 서비스가 해결하는 부분을 차례로 소개한다. 먼저 API 단위로 목 데이터를 1대1 매핑하는 프리셋(Preset)이다. MSW 인터페이스에 프리셋 함수를 체이닝하고 label로 상황을, response로 응답값을 매핑하면 우측 UI에서 즉시 제어할 수 있어, 수많은 목 데이터의 히스토리를 알 필요 없이 상황을 명시적으로 표현하게 됐다. 장바구니처럼 여러 상황·여러 API가 얽힌 경우를 위해, 다수 목 데이터를 하나의 상황에 매핑하는 프로파일(Profile)도 만들었다. createMockProfiler로 상황과 액션을 명시하면 적용 버튼만으로 관련 API를 동시에 제어해 문서 역할까지 한다.

목 데이터의 중요도가 커지며 응답값 검증 기능을 추가해, MSW 리졸버의 컨텍스트에서 실제 API 콜을 일으켜 그 응답을 프리셋과 비교하고 달라진 부분을 시각적으로 보여 준다. 작은 변경용 응답값 편집 UI를 제공하고, 개인 설정·모킹 제어 설정을 브라우저에 저장해 프로젝트는 모킹 정보 제공처, 개인 환경은 브라우저로 관심사를 분리했다. 타입스크립트 제네릭 제약과 유틸리티 타입으로 입력에 따라 타입이 동적으로 결정돼 테스트 코드를 명시적으로 작성하게 했다. 목 서비스는 MSW를 peerDependency로 참조하고 JS Proxy로 모킹 정보를 획득해, 임포트 위치만 바꾸면 도입할 수 있다. 발표자는 문제 인식과 작은 개선이 작업 환경과 제품, 고객 경험에 긍정적 영향을 준다는 메시지로 마무리한다.