MSW 컨벤션

• dev 환경에서는 이제 api 요청을 직접 서버에 보내지 않고 service worker에서 가르채서 응답함

• 끄고 싶으면 콘솔창켜서 끌 수 있음

• 현재 msw 2버전이 최신버전이지만, 너무 최신버전이고 아직 안정화가 안되었다는 의견이 많아 1버전으로 설치

• 2버전 공식문서말고 1버전 공식문서로 봐야 함

URI - `/api/v1/users/{userId}`
response sample
{
"user_info": {
"nickname": "sehee",
"introduction": "hi~ H~ I~!",
"profile_image_url": "profile_image_url",
"job": "백엔드 개발자",
"career": "0년차",
"github_url": "https://www.naver.com",
"blog_url": "https://www.naver.com",
// 너무 길어져서 생략
}



import { rest } from 'msw'

rest.get('/api/v1/users/:userId',(req,res,ctx) => {
	//해당 URI로 요청했을 경우 어떤 응답을 내려주고 싶은지를 작성하면 됨
	return res(
		ctx.status(200), - 어떤 status code를 내려줄건지
		ctx.json({ - 어떤 데이터를 내려줄건지
		"user_info": {
		"nickname": "sehee",
		"introduction": "hi~ H~ I~!",
		"profile_image_url": "profile_image_url",
		"job": "백엔드 개발자",
		"career": "0년차",
		"github_url": "https://www.naver.com",
		"blog_url": "https://www.naver.com",
		})
	)
)

• req, an information about a matching request

• res, a functional utility to create the mocked response

• ctx, a group of functions that help to set a status code, headers, body, etc. of the mocked response.

•  msw 가 켜져 있다면, api/v1/users/a 라고 요청을 보내면, statusCode 200 과 함께 ctx.json 안에 정의한 데이터가 응답으로 내려온다

• get 말고 post,put 등등도 가능함

• 실제 서버에 요청보내는게 아님

• 컴포넌트에서는 아직 API가 완성되지 않았다고 해도 실제 API가 나와있는것처럼 사용할 수 있다(어차피 실 서버에 요청이 가지 않기 때문),
• API가 완성되었다고 해도 요청 방식이 바뀌지 않는 이상 컴포넌트에서 따로 수정할 필요가 없음
• 더 다양한 사용방식은 공식문서 참고하기

• 다양한 테스팅 라이브러리와 사용할 수 있다
• 지금 당장 하지 않더라도, 확장성 고려

• rest 요청들은 src/mocks/index.ts 의 handlers 배열 안에 들어가 있어야 동작함
• 모든 rest 요청들을 하나하나 저 배열 안에 넣게 되면 관리가 힘들기 때문에, 요청의 성격별로 파일을 나누어 관리해서, src/mocks/index.ts 에서 import 해서 사용하는 방식으로 사용

• 최대한 API 폴더의 구조를 따라가기

• API 명세서 잘 확인하여 더미 데이터 만들기

index.ts - handlers 라는 배열을 생성하여 여기에서 rest 요청들을 담는다

• 현재 폴더명과 동일한 API 폴더에서 다루고 있는 api 요청만 담기!!

• Ex) api/User에서 `get '/a' 라는 요청을 다루고 있다면, mocks/User에서 get '/a' 요청을 mocking하는 rest 요청을 생성한다

src/mocks/User/index.ts

export const userHandlers = [
	rest.get('/a',(req,res,ctx) => {
		return res(
			ctx.status(200), //반환할 status Code
			ctx.json({
				//반환할 데이터, ./mockData.ts에서 import해서 사용하기
			})
		)
	}),
	
	rest.get('/b',(req,res,ctx) => {
		...
	})

]

• parameter , query string 등을 이용하는 방법은 공식문서 참고

• 에러에 관련한 응답도 가능함

mockData.ts - ctx.json 에 들어갈 dummy data들을 관리하는 곳

• 이 부분은 API 명세서를 활용하여 자유롭게 작성

3. 정의해놓은 handlers는 src/mocks/index.ts의 handlers 배열에 넣어주기

• 여기에 넣지 않으면 작동 안함

• 배열 그대로 넣는게 아니라 ...handlers 로 넣기