MSW(Mock Service Worker) 적용 및 삽질로그(with Vue3/Vite)

 

 

회사에서 하는 프로젝트 중 처음으로 프론트엔드만 맡게 되었다.

항상 하나의 기능에 대해 둘 다 만들어서 Mocking 라이브러리에 대한 필요성을 크게 못느끼다가(늦어도 내탓, 오류나도 내탓)

이번 기회에 효율적으로 개발을 하기위해 찾아보았다.

 

Mock Service Worker

MSW 발견

이미 여러회사(카카오, 올리브영, 현차 등) 테크블로그에 올라와있길래 바로 적용해봤다.

 

npm install msw@latest --save-dev

 

npm install 후

 

src
└── mocks
	└── handlers
		└── index.js
    		└── user.js
	└── browser.js

src 밑에 파일을 추가한다.

 

browser.js

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers/index'

export const worker = setupWorker(
    ...handlers
)

 

handlers/index.js

import { handlers as userHandlers } from './user'

export const handlers = [...userHandlers]

핸들러 파일은 한꺼번에 작성해도 된다. 나는 나눠서 작성했다.

 

handlers/user.js

import { http, HttpResponse } from 'msw'

export const handlers = [
    http.post(`https://domain/url`, async ({ request })=>{
        const requestBody = await request.json()
        const response = {
            test: 'test'
        }
        return HttpResponse.json(response)
    }),
]

 

인터셉트 하고싶은 api를 넣어주면 된다.

다른 예시보면 엔드포인트만 적는 사람들도 있던데 안돼서 프로토콜부터 풀로 적었다.

 

main.js

const { worker } = await import('./mocks/browser')
worker.start()

app.mount('#app')

main.js에 browser 파일만 등록하면 끝

 

임포트가 잘 되면 콘솔에 로그가 찍힌다. 

 

자잘한 이미지 하나에도 경고가 엄청뜬다.

 

worker.start({
    onUnhandledRequest: 'bypass'
})

옵션 추가해주면 사라짐

 

이러고 로컬에서 신나게 테스트했다.

API 기다릴 필요없이 너무 편하잖아! 테스트코드도 따로 작성 안해도 되니 짱인데!!!!!!!!

좋아하다가 개발서버 배포하고 난관에 봉착했다.

 

이게 뭔데

 

`vite build` error -- Transform failed with 3 errors - Top-level await is not available in the configured target environment ·

vite.config.js 파일에 build 옵션 추가하란다

 

build: {
  target: "es2022"
},

오류안남

 

젠킨스 오류 안나는것만 보고 로컬에서 다른 데이터 신나게 썼다.

퇴근 직전에 개발서버 들어가보니 화면이 안뜸

이멀젼씨

이거저거 시도해보다가 어차피 계속 배포해서 확인해봐야하고.. 지금은 못하겠다 생각함

내일 토요일이니까 나혼자 무한 테스트할수있잖아~~~ 억지 럭키비키하고 퇴근 

마음의 짐 +1

 

 

다음날

 

 

개발자도구 > Application > Service workers 탭을 확인해봤더니 로컬과 다르게 아무것도 없었다.

원래 이렇게 떠야됨

 

스크립트 추가해보라길래 index.html에 아래 코드를 추가했다.

<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/mockServiceWorker.js')
                .then(registration => {
                    console.log('Service Worker registered with scope:', registration.scope)
                })
                .catch(error => {
                    console.error('Service Worker registration failed:', error)
                })
        })
    }
</script>

역시나 안됨. 에러도 안찍히고 'registered with scope ...' 이게찍힘

그럼 잘 붙은거잖아

왜 안되는데

?!?!?!?!?

 

이때 갑자기 'Top-level await ...' 어쩌고 오류가 마음에 걸리기 시작함

내가 냅다 vite.config를 수정할게 아니었는데..........

초심으로 돌아가서 공식문서를 뒤지기 시작했다.

 

Browser integration

수상해

 

함수로 감싸면 탑레벨 아니니 vite.config.js, index.html 원복하고 main.js를 수정했다.

async function enableMocking() {
    if (process.env.NODE_ENV !== 'development') {
        return
    }
    const { worker } = await import('./mocks/browser')
    return worker.start({
        onUnhandledRequest: 'bypass'
    })
}
enableMocking().then(() => {
    app.mount('#app')
})

 

인간승리

 

오류잡고나니 남은건 엉망이된 커밋내역..

 

 

오늘의 교훈

공식문서를 꼼꼼히 보자.

누군가에게 이 글이 도움이 됐으면 좋겠다😔