리액트 + MSW

리액트에서 개발을 할 때 실제 백엔드 개발자가 없다면 api를 호출하고 받아오는 과정을 테스트하기가 어렵다. 또한 여러 open api 들은 자신이 개발하고자 하는 데이터 구조가 아닐 가능성이 크다. 따라서 우리는 msw mocking service worker 라이브러리를 이용해서 mock data들을 만들고 서비스에서의 요청을 msw가 가로채서 실제 서버와 통신하는 것처럼 진행해 볼 것이다. 

 

우선 msw를 이용하려면 package를 설치해 주어야한다. 

yarn이나 npm을 통해 설치할 수 있고 msw는 실제 서비스에서는 이용하지 않고 dev환경에서만 이용하므로 옵션을 준다. 

 

$ npm install msw --save-dev

2# or

3$ yarn add msw --dev

 

위의 명령을 통해 패키지를 추가할 수 있고 그 후 mocking api를 작성할 handler.ts와 browser.ts 파일을 만들어준다. 

src파일 안에 만들어주었다. 

browser.ts의 파일의 내용은 간단하다. setupWorker함수를 이용해서 worker를 설정해주면 되는 데 이 때 handler들을 전개 연산자로 얕은 복사를 해준다. 

export const handlers = [
	rest.post("loginlaboratory", async (req: RestRequest<LoginRequest>, res, ctx) => {
		const { id, password } = req.body;

		if (id === "jeongho" && password === "daeun") {
			return res(
				ctx.json({
					loginRequest: {
						id: id,
						password: password,
					},
					admin: true,
					message: "/loginlaboratory admin",
				}),
			);
		} else {
			return res(
				ctx.json({
					loginRequest: {
						id: id,
						password: password,
					},
					admin: false,
					message: "/loginlaboratory not admin",
				}),
			);
		}
	}),
];

handler는 다음과 같이 rest api로 작성해주었다. 나는 로그인 화면에서 입력 받은 id와 password에 따라 관리자의 상태를 다르게 응답해주는 api를 handler에 작성하였다. 

 

또한 원래 app전역적으로 쓰이는 라이브러리는 index.tsx파일에서 설정을 해주는 것이 대부분이다. redux와 마찬가지로 index.tsx파일을 다음과 같이 설정해준다. 

위에 환경이 development일때만 worker를 시작하는 것을 확인할 수 있다. 

 

이제 ui 를 만들 것이다. 나는 스타일링은 styled-components라이브러리를 이용했다. 

import useInput from "@hooks/useInput";
import { useState } from "react";
import axios from "axios";
import { LoginLabButton, LoginLabContainer, LoginLabFormInput, LoginLabFormLabel } from "./styled";
import { LoginResult } from "@auth/types";

const LoginLab = () => {
	const [userid, setUserId] = useInput("");
	const [userpassword, setUserPassword] = useInput("");
	const [admin, setadmin] = useState<Boolean>(false);
	console.log(userid);

	const handleSubmitLoginLab = (e: React.FormEvent) => {
		e.preventDefault();
		axios.post("/loginlaboratory", { id: userid, password: userpassword }).then((res: LoginResult) => {
			const { admin } = res.data;
			if (admin === true) {
				setadmin(true);
			} else {
				setadmin(false);
			}
			const { id, password } = res.data.loginRequest;
		});
	};

	return (
		<>
			<LoginLabContainer onSubmit={handleSubmitLoginLab}>
				<LoginLabFormLabel>안녕하세요 로그인 실험실입니다.</LoginLabFormLabel>
				<LoginLabFormInput value={userid} onChange={setUserId} placeholder="여기는 id"></LoginLabFormInput>
				<LoginLabFormInput
					value={userpassword}
					onChange={setUserPassword}
					placeholder="여기는 비밀번호"
				></LoginLabFormInput>
				<LoginLabButton type="submit">로그인 실험실</LoginLabButton>
				{admin ? <h1>관리자입니다. </h1> : <h1>그냥 유저입니다. </h1>}
			</LoginLabContainer>
		</>
	);
};

export default LoginLab;

 

다음과 같이 form을 작성해 준 후 handlesubmit함수가 불리면 axios post요청을 보내기로 했다. 이 때 이 요청은 우리가 앞 서 만들어놓은 handler의 post응답이 실제 서버로 가는 요청을 가로채서 대신 답해준다. 

실제 설계된 화면 

아무 id와 password를 입력해보겠다. 

그냥 유저라고 나온다. 

아이디를 jeongho 비밀번호를 daeun으로 입력해보겠다. 

관리자로 나오는 것을 확인할 수 있다. 

상태를 조건에 따라 변경함으로써 우리가 원하는 동작 또한 할 수 있을 것이다.