728x90 반응형 MSW8 [Next] Next13 이후로 MSW 사용하기 (3) - Storybook에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 마지막인 storybook에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (4) - Storybook에서 사용하기 이전 글 [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 [Next] Next13 이후로 MSW 사용하기 (2) - Node 환경 설정 들어가기에 앞서 들어가기에 앞서 storybook에 msw를 적용하기 위해서는 2가지 환경이 설정되어 있어야 합니다. storybook 사용 환경 msw browser 사용 환경 storybook 사용 환.. 2024. 1. 9. [Next] Next13 이후로 MSW 사용하기 (2) - Node 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 두 번째인 node 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 들어가기에 앞서 들어가기에 앞서 msw가 무엇이고 msw에서 말하는 node 환경이 무엇인지는 위의 관련 링크를 참고해 주시면 됩니다. 해당 글에서는 next에서 msw node 환경 사용을 위한 설정 방법에 대해서만 다루도록 하겠습니다. Node 환경 설정 방법 [ 1. 패키지 설치 ] 현.. 2024. 1. 8. [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 첫 번째인 browser 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 들어가기에 앞서 들어가기에 앞서 msw가 무엇이고 msw에서 말하는 browser 환경이 무엇인지는 위의 관련 글 링크를 참고해 주시면 됩니다. 해당 글에서는 next에서 msw 사용을 위한 설정 방법에 대해서만 다루도록 하겠습니다. 그리고 next에서는 SSR, SSG 등의 데이터 fetching과 next 13 이후로 등장한 RSC와 같이 서버 단에서 발생되는 API .. 2024. 1. 5. [React] MSW로 API Mocking 하기 (5) - Cypress에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 MSW API Mocking 하기 마지막인 Cypress에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 [React] MSW로 API Mocking 하기 (4) - Storybook에서 사용하기 설정 방법 Cypress에 MSW를 적용하기 위해서는 Cypress를 사용할 수 있는 환경과 MSW Browser 환경 설정이 되어 있어야 합니다. 만약 각 환경 구축이 필요하신 경우 다음 글들을 참고.. 2023. 10. 24. [React] MSW로 API Mocking 하기 (4) - Storybook에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 MSW API Mocking 하기 네 번째인 Storybook에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 설정 방법 Storybook에 MSW를 적용하기 위해서는 Storybook을 사용할 수 있는 환경과 MSW Browser 환경 설정이 되어 있어야 합니다. 만약 각 환경 구축이 필요하신 경우 다음 글들을 참고해 주시면 됩니다. [React] Storybook으로 컴포넌트 문서화하기 [R.. 2023. 10. 16. [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 MSW API Mocking 하기 세 번째인 Node 환경에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 Node 환경이란? MSW에서는 Browser, Node 총 2개의 환경을 제공해 줍니다. 여기서 Node 환경은 Node를 이용하여 실행할 때 발생되는 API 처리를 Mocking 해주는 것을 의미합니다. Node 환경으로 간단하게 생각해 볼 수 있는 것은 테스트 도구인 Jest를 언급할 수 있습니다. Jest를 이용하여 테스트를 실행시킬 때 발생되는 API들을 MSW에서 .. 2023. 10. 11. [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 MSW API Mocking 하기 두 번째인 Browser 환경에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] MSW로 API Mocking 하기 (1) - MSW란? Browser 환경이란? MSW에서는 Browser, Node 총 2개의 환경을 제공해 줍니다. 여기서 Browser 환경은 말 그대로 Browser에 접속했을 때 발생되는 API 처리를 Mocking 해주는 것을 의미합니다. 쉽게 접근할 수 있는 것은 React를 이용하여 서버를 실행한 뒤 브라우저를 통해 실행된 서버에서 접속했을 때 요청되는 API들을 Mocking 해준다고 생각하면 됩니다. Browser 환경에서 MSW를 사용하게 되면 실제 API가 개발이.. 2023. 10. 9. [React] MSW로 API Mocking 하기 (1) - MSW란? 안녕하세요. J4J입니다. 이번 포스팅은 MSW로 API Mocking 하기 첫 번째인 MSW가 무엇인지에 대해 적어보는 시간을 가져보려고 합니다. MSW란? MSW는 Mock Service Worker의 약자로 Service Worker를 활용하여 API 요청을 Mocking 하도록 도와주는 라이브러리입니다. Mocking을 한다는 것은 단어의 의미대로 실제 값을 활용하는 것이 아닌 허구의 값이 사용되도록 만드는 것이고, API 요청을 Mocking 하도록 도와주기 때문에 API 처리에 대한 결괏값을 허구의 값으로 만들 수 있도록 도와줍니다. MSW를 사용하지 않을 경우 API 요청에 대한 Mocking을 하기 위해 다른 여러 방법들이 활용될 수 있습니다. 예를 들면 Mocking 처리를 위한 서버를 .. 2023. 10. 8. 이전 1 다음 728x90 반응형
