# MSW
리액트 프로젝트 세팅하기
Node.js 개발 환경 세팅TypeScriptESLintReactJestParcelReact Routerstyled-componentsstyled-resetusehooks-tsusestore-tsAxiostsyringereflect-metadatajest-domMSW
NextJS에서 MSW를 사용해보자
Mock Service Worker의 약자로 Service Worker API를 사용하여 실제 요청을 가로채는 API mocking 라이브러리보통 프로젝트를 진행할 때, 백엔드가 API를 만들면 그 API를 통해 프론트엔드가 인터페이스를 만든다. 만약 같이 시기에 프로
[Next.js] MSW 적용하기
SNS 프로젝트를 진행하면서 아직 백엔드 api 개발이 다 되지않아서 모의 데이터를 만들어야해서 찾아보다가 MSW(Mock Service Worker)를 알게 되어서 프로젝트에 MSW를 적용시켜보았다. MSW(Mock Service Worker)란? MSW(Mock
graphql codegenerator를 활용한 msw 자동화 세팅
웹프론트엔드 개발 시 msw를 사용할 코드를 codegen plugin을 이용하여 자동화 하기
Story Controls에서 MSW 응답 조작하기
Storybook controls를 이용해 MSW 응답을 조작할 수 있게 만들었습니다. 즉, 1개의 story에서 여러 개의 MSW 응답을 받을 수 있게 되면서 다수의 story를 생성해야 하는 불편함을 해소했습니다.
vite 프로젝트에서 msw, vitest를 이용해 테스트 코드 작성해보기 (2)
저번 시간에 이어 오늘은 본격적인 테스트 코드를 작성해볼 예정입니다. 제가 원하는 테스트는 저번 시간에 말씀드렸다 싶이 4가지 유형에 대해 테스트 코드를 작성해보도록 하겠습니다. 그 과정에서 발생한 이슈사항이 여러 개 있었는데 어떻게 해결하였는지 정리하였습니다.
vite 프로젝트에서 msw, vitest를 이용해 테스트 코드 작성해보기 (1)
vite 프로젝트에서 msw를 통해 mock api를 구성하고 jest와 비슷한 vitest를 이용해 테스트 코드를 작성해보는 것을 목표로 진행해봤습니다. 이렇게 제대로 테스트 코드 작성은 거의 처음이다보니 하다가 막히는 부분과 고민이 많았습니다.
[MSW] Mock Service Worker 사용 하기
프로젝트 중에 클라이언트 코드를 테스트할 때, 서버가 구축되어 있지 않을 때 더미 데이터를 이용해서 테스틀르 진행하고는 합니다.
MapleStoryWorld
hitDong과 deleteDong 함수를 만든 후 handletriggerenterevent 두개를 만들어 하나는 똥에 맞았을때, 하나는 바닥에 닿았을때.그리고 클리아언트와 서버를 잘 선택해준다.time변수를 만들어준후delta는 0.xx초로 흘러가는데 이걸 self
MSW(Mock Service Worker) 모킹하기
MSW는 Mock Service Worker로 서비스 워커를 이용하여 API를 모킹하는 라이브러리입니다. 네트워크 요청을 가로채도록 설계된 Service Worker API를 활용하기 때문에 목 사용 여부 관계 없이 동일한 애플리케이션 동작을 보장합니다.MSW를 여러가
MSW(Mock Service Worker) 적용기 😀
프론트엔드 개발을 하면서 구현이외에 불편했던 점들은 백엔드 개발이 끝나야 프론트엔드 개발을 할 수 있다는 점이었다. 그리고 프론트엔드는 나 혼자였고, 3명에 백엔드 개발자들과 함께 하여서 한 번에 API가 많이 업데이트 되면 그만큼 몰아서 해야했다. 또한 로딩, 에러등
Angular에서 MSW 사용하기
서버가 없는 경우 프론트엔드에서 api 요청으로 가져온 데이터를 서버의 역할을 해주는 Mock을 만들어서 활용하는 방식서비스워커를 이용해 서버를 향한 네트워크요청을 가로채서 모의 응답을 주는 라이브러리임.npm install msw --save-dev명령어로 설치를 한
MSW (Mocking Service Worker) ?
기획 : XX 작업은 진행 중인가요? 나 : 네? 그게... 아직 API 부분이 준비되지 않아서 보류 중이라 아마 빠르면 다음주부터 시작해서 조금 기다리셔야 될거 같습니다. ㅜㅜ
nextjs + redux toolkit 프로젝트에 Mocking Service Worker 적용 (MSW)
nextjs, redux toolkit 프로젝트에 MSW(Mocking Service Worker)를 적용해보았다.적용방법은 쉽고 간단해서 빠르게 적용하고 실제 api요청을 가로채어 mock데이터를 response로 넘겨주는 것까지 확인하였다.다만... 포스팅을 하는
메월드 패키지
커뮤니티 활동이나 이번에 에듀 크리에이터 캠프 하면서 메이플스토리 월드 용 패키지를 꽤 많이 만들어뒀다. 이제 그냥 드라이브에 대충 박는걸로 끝낼 수 없으니 깃허브 리포지토리를 이용하기로 했다.
[MSW] Mock Service Worker
전에 프로젝트를 할때 팀원이 MSW를 쓰자하여 따라해보긴 했었다.MSW를 써보니 express로 Mock 서버를 만드는것보다 간단하고 편리했다.그래서 이번 사이드프로젝트를 하며 MSW를 써보기로 하였다.MSW는 서비스 워커(Service Worker)를 사용하여 네트워