기존 프로젝트에서 1.2.3 버전을 사용하고 있었는데
2.0.8버전으로 msw가 업데이트 되면서 너무 많은 것이 달라졌다.
이전버전) 로그인 mock api (1.2.3)
import { rest } from 'msw'
const loginHandler = rest.post(
'/api/auth/signin',
(req, res, ctx) => {
const { email, password } = req.body
if (email === 'qwe@qwe.com' && password === 'qwer1234!') {
return res(
ctx.status(200),
ctx.json({
accessToken: '12343',
refreshToken: '12342',
}),
)
} else {
return res(
ctx.status(400),
ctx.json({
status: 400,
errorCode: 'authentication_failed',
message:
'이메일 또는 비밀번호가 올바르지 않습니다. 다시 확인해주세요.',
}),
)
}
},
)
export default loginHandler
업데이트 버전) 로그인 Mock API (2.0.8)
import { http, HttpResponse } from 'msw'
export const loginHandler = http.post(
'/api/auth/signin',
async ({ request }) => {
const data = {
accessToken: '12341234',
refreshToken: '1234',
}
const result: any = await request.json()
const email = result?.email
const password = result?.password
if (email === 'qwe@qwe.com' && password === 'qwer1234!') {
return new HttpResponse(JSON.stringify(data), {
status: 200,
})
} else {
return new HttpResponse(null, {
status: 400,
statusText: 'authentication_failed',
})
}
},
)
rest와 req, res, ctx를 사용하는 것이 아니라
http, HttpResponse를 사용한다
이메일, 비밀번호와 같이 입력한 값에 접근하는 것도
req.body가 아니라 request.json()으로 접근해야한다.
데이터 불러오는 mock api
api를 사용할때 params 값을 전달해주는데
이 부분을 mock api에서 어떻게 적용하지 고민하다가 아래처럼 적용했다.
params: {
page: pageParam,
size: pageSize,
sort: sort,
},
data: data,
})
export const postProjectList = http.post(
'/api/projects/list',
({ request }) => {
const url = new URL(request.url)
const page = url.searchParams.get('page')
const size = url.searchParams.get('size')
const startIndex = Number(page) * Number(size)
const endIndex = startIndex + Number(size)
const slicedData = projectData.slice(startIndex, endIndex)
const data = {
content: slicedData,
totalElements: slicedData.length,
}
return HttpResponse.json(data, {
status: 200,
headers: {
'Content-Type': 'application/json',
},
})
},
)
아직 업데이트 버전이 익숙하지 않아서 어렵게 느껴지는데
익숙해지면 이전버전보다 더 편하게 느껴질 것 같다.
728x90