Mock Service Worker 기본적 사용법 및 TypeScript 적용하기
Mock Service Worker
(이하 MSW) 를 사용하기 위해서 기본적으로 작성해야 할 코드에 대해서는 이전 포스팅에서 작성했다.
이번에는 실제로 MSW 핸들러 코드를 작성하는 법을 작성해보고자 한다.
또 MSW 를 적용하는 것은 쉽지만, 타입스크립트를 적용하는 부분에서 애먹었던 부분이 있었다.
그래서 타입스크립트를 적용하는 방법도 함께 작성해보고자 한다.
handler.ts
작성하기
import { rest } from "msw";
export const handlers = [
// ...
]
import { rest } from "msw";
export const handlers = [
// ...
]
handers.ts
파일은 기본적으로 이렇게 배열의 형태다.
물론 배열이 아니라 한 개의 핸들러만 작성할 수 있지만, 보통은 여러개를 작성할 수 밖에 없기 때문에 배열로 작성하게 된다.
그럼 여기에 실제로 api 모킹 핸들러를 추가해보자
GET 방식
export const handlers = [
rest.get('/', async (req, res, ctx) => {
return res(
// ...
)
}),
]
차근차근 따라가보자
이렇게 하나의 핸들러를 등록할 수 있다. rest 방식과 graphQl 방식 중 나는 더 익숙한 rest 방식으로 진행하겠다.
rest 방식으로 핸들러를 작성한다면, rest
를 쓰고 그 뒤에는 GET
, POST
, PATCH
, DELETE
등의 HTTP 메서드를 붙인다.
Ex) rest.get()
, rest.post()
MSW 의 핸들러는 기본적으로 1) 어떤 URL 요청이 들어왔을 때 2) 어떤 동작을 수행할지 로 이루어져있다.
1) 따라서 첫번째 인자는 어떤 URL 로 들어왔을 때를 말하는 URL 경로가 오고,
2) 두번째 인자는 그걸 처리하는 로직이 들어온다.
(Next 환경에서는 '/'
만 적으면 제대로 경로설정이 안되는 문제가 있었다. 왜인지는 모르겠지만.. 그래서 Next 에서는 'http://localhost:3000/' 까지 적어주어야 했다.)
export const handlers = [
rest.get('/', async (req, res, ctx) => {
return res(
ctx.json({
message: "Welcome to 멋쟁이 토마토처럼🍅",
})
)
}),
]
두번째 인자로 들어오는 콜백함수의 매개변수로는 req
, res
, ctx
가 온다.
req
는 흔히 말하는 '요청'에 관한 역할을 처리한다.
res
는 응답을 리턴할 때 쓰이는 함수라고 볼 수 있다.
ctx
는 실제로 응답을 어떻게 처리할지 세세한 내용을 정해줄 수 있다.
위의 코드는 '/'
루트 경로로 요청이 들어왔을 때 리턴으로 프로퍼티 키가 message
이고, value 가 Welcome to 멋쟁이 토마토처럼🍅
인 객체를 json 형태로 리턴하겠다는 코드다.
아주아주 간단한 구조다. 이제 저 ctx.json()
코드 안에 내가 원하는 응답을 json 형태로 보내주면 되는 것이다. 배열이 들어갈 수도 있고, 객체가 와도 되고, 바로 어떤 값을 넣어줄 수도 있다.
이 점이 MSW 의 강력한 기능이다.
해당 URL 로 온 요청에 대해서는 내가 의도한 응답을 내려줄 수 있다. 그런데 그것이 기존의 mock data 를 준비해놓고서 프로젝트를 진행하는 것이 아니라, 실제로 api 요청을 보내고 응답을 보내는 과정 속에서 mock data 를 내려주는 것이기 때문에 네트워크 단에서 모킹을 한다는 점이 차이가 있다.
나중에 백엔드에서 api 가 완성이 된다면 (그리고 모킹할 때의 응답과 똑같이 온다면) 별다른 수정 없이 MSW 만 프로젝트에서 제거한다면 그대로 백엔드 코드와 함께 돌아간다는 것이다.
export const handlers = [
rest.get('/', async (req, res, ctx) => {
return res(
ctx.status(200),
ctx.delay(2000),
ctx.json({
message: "Welcome to 멋쟁이 토마토처럼🍅",
})
)
}),
]
그 외에도 상태코드도 커스텀할 수 있고, 비동기 로직처럼 동작하게 하기 위해 약간의 딜레이를 밀리초(ms) 로 추가할 수도 있다.
POST 방식
이번엔 POST 방식이다. 로그인을 예로 들어보자
export const handlers = [
rest.post('/login', async (req, res, ctx) => {
const { email, password } = req.body
const finded = uesrs.find(user => user.email === email)
if (!finded) {
return res(
ctx.status(401)
)
}
return res(
ctx.status(200),
ctx.delay(2000),
ctx.json({
id: finded.id,
email: finded.email,
name: finded.name,
profileImg: finded.profileImg,
})
)
}),
]
간단하게 로그인은 이러한 방식으로 처리할 수 있다.
요청을 보내는 부분에서 POST
로 요청을 보낼 때 해당 데이터를 함께 보내게 된다.
위 예시에서는 POST
로 email 과 password 를 보낸다면 핸들러에선 req.body.email, req.body.password 로 꺼내쓸 수 있게 된다.
위의 users 는 로그인 기능 구현을 위해 간단하게 준비한 더미데이터다.
이런 식으로 이메일이 일치하는 이메일이 없다면 에러 상태코드를 내보낼 수도 있고, 로그인이 성공했다면 또 다시 원하는 응답을 내려줄 수 있다.
TypeScript 적용하기
타입스크립트로 MSW 로 작성할 때 req.body 에 들어있는 email 과 password 의 타입을 모르기 때문에 에러를 내보내게 된다. 따라서 이 둘의 타입을 지정해주어야 한다.
interface PostLoginReqBody {
email: string
password: string
}
export const handlers = [
rest.post<PostLoginReqBody>('/login', async (req, res, ctx) => {
const { email, password } = req.body
// 이하 동일
}),
]
이렇게 rest.post
뒤에 제너릭 안에 email 과 password 의 타입을 적어준 인터페이스를 넣어줌으로써 req.body 가 어떤 타입으로 오는지를 명시해준다.
그러면 타입스크립트가 req.body 안에 어떤 데이터와 타입이 오는지를 추론할 수 있다.
params 꺼내기
api 요청을 보내다보면 달라지는 파라미터에 대해서 추출해야할 때가 있다.
가령 아래와 같은 요청이 들어왔다고 치자
export const handlers = [
rest.get('/:userId', async (req, res, ctx) => {
const { userId } = req.params
// ...
}),
]
위에처럼 파라미터로 :userId
가 들어온다고 치면, MSW 의 핸들러 내부에선 req.params.userId 로 꺼내쓸 수 있다.
req.params 의 경우는 타입을 따로 지정해주지 않아도 req.params.파라미터로 온 것들은 모두 문자열로 인식한다.
때문에 params 로 숫자타입을 보내도 문자타입으로 변환되기 때문에 적절히 타입변환을 해서 사용하면 된다.
이상 간단하게 MSW 를 사용하는 법에 대해 알아보았다.
이 정도만 돼도 간단한 api 모킹을 사용하는 데에는 충분히 처리할 수 있다.
그 외에 세세한 부분은 MSW 공식문서 를 확인하면서 적용하면 충분할 것이다.
Author And Source
이 문제에 관하여(Mock Service Worker 기본적 사용법 및 TypeScript 적용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ckm960411/Mock-Service-Worker-기본적-사용법-및-TypeScript-적용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)