현재 ssr때문인지 몰라도, msw 서버가 동작은 하는데, 실제로 ajax요청을 보내면 404 not found가 뜹니다. (아직 못 사용한 단 뜻)
Schedule
Global Style, State Management, Hook
To Reviewer
아직 사용은 못 하지만, 사용하는 방법을 알려드리겠습니다.
@/app/mock-apis 폴더로 접근 합니다.
원하는 형태로 모킹 데이터를 생성합니다.
//ex mocking data
const ExData = [
{
id : 1,
name : "이재진".
},
. . .
]
import { http , HttpResponse} from 'msw' 를통해서 http 메서드호출을 위한 준비를 합니다.
그 아래로 use로 시작하는 이름의 handler를 생성합니다.
export const useExHandler = [
//ex조회 api
http.get('/api/ex', () => {
return HttpResponse.json(ExData);
}),
//ex-unit조회 api
http.get('api/ex-unit:id', ({ request }) => {
const url = new URL(request.url);
// Given "/products?id=1&id=2&id=3",
// "productIds" will equal ["1", "2", "3"].
const productId = Number(url.searchParams.getAll('id'));
const foundData = ExData.find((data) => data.id === productId);
if (!productId) {
return new HttpResponse(null, { status: 404 });
}
return HttpResponse.json(foundData);
}),
];
각 기능에 따른 api를 생성할 수 있습니다. 한 마디로 백엔드 단의 api를 만드는 작업을 하는 것이죠,
위에서 부터 하나씩 설명하면 첫 번째는 만들어 놓은 `ExData`리스트를 호출하는 api를 만든 것 입니다. 해당 `end-point-url`로 요청을 보내면 위에 만들어 뇠던 모킹 데이터를 뽑아낼 수 있습니다.
두 번째 api는 `id`라는 `params` 값을 보내면 `id`에 맞는 모킹 데이터를 불러오는 로직을 짠 것 입니다. 제가 직접 짠거라, 그냥 님들 상상하는대로 짜면 됨, 예를들어서 조건문을 걸어서, 맞으면 데이터를 뽑아내고, 아니면 에러를 반환하게 하면 되는 것 입니다.
5. api를 다 만든 후에는 `@/app/mocks/handlers.ts` 폴더가 있는데 거길로 들어갑니다.
6. 그 안에 배열이 하나 존재하는데, 거기에 내가 만든 `msw api`를 넣어주면 됩니다. 넣을 때는 `... (thread연산자)`를 이용하면 됩니다.
```ts
import { useExHandler } from '@/mock-apis/mock-test';
export const handlers = [...useExHandler, ...uesNewHandler]; //이런식으로 새로운 handler를 등록하면됩니다.
<!-- 참고한 레퍼런스 링크 (선택) -->
### Reference Link
<!-- 관련된 이슈 링크 (선택) -->
### Related Issue Link
#3
zzzRYT
commented
3 weeks ago
Description
msw 라이브러리를 다운 받아서mocking 데이터 환경을 구축했습니다.Schedule
Global Style, State Management, Hook
To Reviewer
아직 사용은 못 하지만, 사용하는 방법을 알려드리겠습니다.
@/app/mock-apis폴더로 접근 합니다.import { http , HttpResponse} from 'msw'를통해서http 메서드호출을 위한 준비를 합니다.use로 시작하는 이름의handler를 생성합니다.// Given "/products?id=1&id=2&id=3", // "productIds" will equal ["1", "2", "3"]. const productId = Number(url.searchParams.getAll('id')); const foundData = ExData.find((data) => data.id === productId); if (!productId) { return new HttpResponse(null, { status: 404 }); } return HttpResponse.json(foundData); }), ];
export const handlers = [...useExHandler, ...uesNewHandler]; //이런식으로 새로운 handler를 등록하면됩니다.