티스토리 뷰
프론트엔드 개발 생산성 향상1 에서는 React-query의 기능을 사용해서 내가 원하는 data의 모양으로 받을 수 있도록 다양한 유틸함수를 작성했다. 작업을 하면서 다시 느껴보니 생산성이 아주 조금은 좋아지고 빨라지지만 뭔가 api에 대한 종속성이 너무 강해서 프론트엔드 개발자 혼자서 진행할 수 있는 개발에 한계가 느껴졌다.
당연히 백엔드 개발자와 소통해서 api문서를 먼저 공유하면 개발이 도움이 되겠지만
급한 업무를 하다 보면 이상적인 상황이 쉽지 않다.
[msw적용 전 프론트엔드 개발 과정]
변수에 데이터를 mocking -> 레이아웃 구현 -> 프론트엔드 기능구현 -> api배포까지 대기.... -> api배포 후 연동
-> 각종 비동기 코드 작성 -> 컴포넌트 수정
중간에 api배포를 기다리는 시간이 있는데 이게 얼마나 될지 모른다. 그리고 api가 배포된 후에서야 프론트에서 각종 비동기코드를 작성할 수 있다. 미리 해둘 수 있지만 한계가 있다. pending상태에 따른 상황, error, loading, 비동기 요청 훅, 무한스크롤 등..
이 작업들을 미리 해둘 수 있다면 api가 배포되기까지 기다리지 않아도 되고, 전체개발기간을 줄일 수 있다.
이 불편함을 카카오개발자들도 공감했고, 그들은 일찌감치 문제를 해결한 것 같다.
https://tech.kakao.com/2021/09/29/mocking-fe/
(아래 이미지는 카카오테크 블로그의 이미지를 사용했습니다.)
지금까지 내가 겪은 불편함을 이미지로 잘 표현한 것이다. 붉은색으로 표현한 pending기간이 길어지면 그 뒤의 프론트엔드 개발부분도 더 길어질 확률이 높다. pending상태를 피할 수는 없다. 대신 pending상태에 머무르는 기간을 최소화하는 것이 목표다.
pending상태에 이르기 전에 프론트엔드 개발을 더 진행할 수 있으면 pending기간과 그 뒤의 프론트엔드 개발기간이 모두 줄어든다.
어떻게?
방법은 두 가지 정도가 떠올랐다. 예전에 공부할 때 써봤던 json-server를 구현해서 데이터를 mocking 한다. 혹은 msw라는 라이브러리를 사용해서 데이터를 mocking 한다. 나는 msw를 사용하기로 했다 그 이유는 mocking 때문에 json-server하나를 띄우기 싫었고.. msw는 목적자체가 mocking이라서 똑같은 기능을 훨씬 쉽게 구현할 수 있기 때문이다.
msw는 서비스워커를 사용해서 mocking data에 비동기 상태를 구현하는 라이브러리인데 궁금하면 공식문서..
결과
msw를 적용하는 방법은 매우 쉬우니 사용후기와 얼마나 개발기간이 줄었는지 남긴다.
서비스워커에서 처리하고 돌려주고 싶은 api url을 작성해 주고 pending상태 구현을 위해 적당히 delay도 준다.
parameter를 어떻게 보내느냐에 따라 에러를 발생시킬 수도 있다.
[msw적용 후 프론트엔드 개발 과정]
msw에 데이터를 mocking -> 레이아웃 구현 -> 프론트엔드 기능구현 -> 각종 비동기 코드 작성 -> api 배포 대기 -> api 연결
똑같은 작업을 하지 않았기 때문에 절대적인 수치의 비교는 불가하지만..
예를 들면 이렇다.
msw 적용 전에는 api가 나오기 전에 3일 작업하고 2일 대기, 2일 작업 이었다면
msw 적용 후에는 api가 나오기 전에 4일 작업하고 1일 대기, 1일 작업이다.
여전히 나는 프론트엔드 개발자로서 5일을 작업한다. 전에는 3+2일, 지금은 4+1일
하지만 전체 프로젝트 개발기간은 7일에서 6일로 줄었다. Pending기간이 줄었기 때문이다.
이해를 돕기 위해 3+2+2 / 4+1+1로 설명했지만 사실 더 많이 줄었다. api가 나온 뒤에 내가 해주는 것이라곤 msw라우터를 주석처리하고 실제 api는 주석을 해제하는 것이다. 그리고 프론트엔드 개발 생산성 향상 1에서 작업했던 유틸함수들을 사용해서 데이터를 내가 원하는 모양으로 컴포넌트에 보내주는 게 전부다. 하루가 채 걸리지 않는다.
msw의 아주 기본적인 기능만 사용했는데, 더욱 강력하게 사용할 수 있는 방법이 많다.
프론트엔드 개발자라면 한번 볼만하다!