MSW란 서버의 API가 아직 개발 중인 단계일 때 프론트엔드에서 API 명세를 토대로 연동 작업을 할 수 있게 도와주는 라이브러리이다. 서버가 API를 완성하는 단계에서 프론트가 API 연동을 하는게 이상적이지만 현실은 일정을 완벽하게 맞추는게 쉽지 않은 일이다. 이때 MSW는 정말 많은 도움이 되는 친구이다. 프론트에서 보낸 body / params / query가 서버에 정상적으로 전달될지 테스트도 가능하고 명세에 따른 데이터를 실제로 받아서 테스트할 수 있기 때문이다. 하지만 개인적으로 한 가지 불편한 점이 있었는데, MSW를 사용하는 환경과 서버와 통신하는 환경을 모두 동시에 사용할 수 없었던 것이다. 내가 모르는 좋은 방법이 있을 지는 모르겠지만 MSW를 설정하면 모든 요청은 MSW를 타고 가..

현재 프로젝트에서 백엔드 작업이 딜레이가 되어 msw로 테스트를 진행하려고 했는데, 오류가 발생했다. 오류 내용은 제목과 같은 [MSW] Failed to register the Service Worker: Failed to register a ServiceWorker for scope 설정을 전부 하고 실행을 시켰는데 정상적으로 msw가 실행되지 않았다. 그래서 다시 처음부터 설정을 해봤는데, 내가 놓친것이 있었다. msw는 프로젝트 내에 mockServiceWorker.js 파일이 있어야 정상적으로 작동하는데, 이것은 내가 직접 만드는 것이 아닌 명령어를 통해서 생성하는 것이다. npx msw init 폴더 를 통해서 public 폴더에 mockServiceWorker를 생성하니 정상적으로 msw가 ..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 비동기적으로 바뀌는 컴포넌트 UI 테스트 const { useState, useEffect } = require("react"); const DelayedToggle = () => { const [toggle, setToggle] = useState(false); useEffect(() => { setInterval(() => { setToggle((prev) => !prev); }, 1000); }, []); return ( 상태 : {toggle ? "On" : "Off"} {toggle && 토글이 켜졌다!} ); }; export default DelayedToggle; 다음과 같이 1초마다 상태 값이 바뀌는 컴포넌트가 있습..

프론트엔드 개발을 하다보면 API를 사용하는 경우가 당연히 있다. 로그인 처리, 게시글 목록 등등 아주 다양하게 당연하게 필요하다. 이것을 가져와서 연동하는 작업을 수행하기 위해서 따로 모킹 서버를 만들어줄 수 있지만, 아주 번거로운 작업이다. 이것을 Mock Service Worker를 통해서 해결할 수 있다. 어떤 방법으로? 풀 네임 그대로 Service Worker를 사용해서 기능을 제공한다. 간략하게 Service Worker에 대해서 설명하자면, 일종의 대리 서버로 리소스 요청을 가로채 수정을 할 수 있고, 리소스를 세부적으로 캐싱해 조작할 수 있다. 이것을 활용해서 네트워크를 사용하지 못하는 환경에서도 어떤 방식으로 동작하는지 조작이 가능하다 MSW도 Service Worker와 비슷하게 동작..