230111 TIL : 장바구니 만들기 (feat. msw)

오늘은 MSW공부하면서 모킹 데이터를 넣어보는 실습시간을 가져보았다.

최근에 이런 어메이징한 라이브러리를 찾고나서 회사에서 공부한 후 적용하는 시간을 가져보았는데

지금 만들고 있는 장바구니에도 넣으면 딱일거 같아서! 가져왔다 😋

---

오늘은 UI는 변화가 없어서 배운 내용을 중점적으로 작성해 보려고한다.

MSW는 풀어서 쓰면 mocking service worker로 말그대로 request를 클론해서 모킹한 데이터로 응답하는 라이브러리이다.

코드를 보면 더욱 쉽게 이해할 수 있다. 우선 모킹이 될 수 있도록 browser와 index.tsx에 같은 코드를 넣어준다.

그러면 라이브러리가 알아서! public 폴더에 서비스워커가 들어가 모킹을 시작할 수 있도록 도와준다! 

// browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

// index.tsx
if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start()
}

handlers.js의 경우 본인이 원하는 REST API를 공식문서를 기반으로 작성하면 되는데 넘 간단;;;

참고로 Graphql도 가능하지만 나는 아직 어케 쓰는지 모르지...ㅎㅎ

// handlers.js
import { rest } from 'msw'
import AppleImg from '../images/apple.png';
import lemonImg from '../images/lemon.png';

export const handlers = [
  rest.get('/products', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        "data": {
          "products": [
            {id: 0, name: "사과", price: 19000, img: AppleImg},
            {id: 1, name: "레몬", price: 19000, img: lemonImg}
          ]
        }
      })
    )
  })
]

//products.tsx
function Products () {
  const [products, setProducts] = useState<productStateProps[]|null>(null);
  const [error, setError] = useState('');
  const dispatch = useDispatch();

  useEffect(() => {
    fetch(URL)
      .then(res => res.json())
      .then(json => { 
        const { data } = json;
        setProducts(data.products);
      })
      .catch(err => setError(err))
  }, [])


	return (//..)
}

불필요한 코드는 걷어냈다. 요건 GET request 프론트에서 fetch로 요청을 보내면 msw에서 모킹한 데이터를 보내준다

참고로 msw가 정상적으로 작동되면 console에서 이렇게 찍힌다!

그리고 아래에 데이터는 내가 console로 찍어본거 ㅎㅎ

네트워크 탭에서도 바로 확인이 가능하다.

 

자세한건 공식문서가 너무 잘 나와 있어서 첨부~!

https://mswjs.io/docs/

Introduction

 

---

요즘 다른거 하면서 너무 시간을 뺏겨서 ㅠㅠ 하루만에 만들 수 있는것을 며칠을 잡고하네...ㅎ...

30분씩이라도 하고 있는데 여튼 ! 내일은 리덕스에서 데이터를 받아올 때 어떻게 관리하는지 공부해볼 예정이다