728x90 반응형 mocking7 [React] Jest에서 호출되는 함수 mocking 하기 안녕하세요. J4J입니다. 이번 포스팅은 jest에서 호출되는 함수 mocking 하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Jest에서 Mocking이 필요한 이유 mock이란 번역을 했을 때 확인할 수 있는 것처럼 모조품, 가짜라는 의미를 가지고 있습니다. 그래서 mocking이라는 것은 mock 데이터를 활용하는 것으로 해석해볼 수 있으며 주로 테스트 케이스를 작성할 때 mock 데이터를 활용하여 테스트 코드를 작성하는 것을 의미합니다. jest에서 mock 데이터가 필요한 이유는 간단합니다. jest에 의해 테스트될 수 있는 다양한 모듈 및 컴포넌트들에는 다양한 함수들이 존재할 수 있고 한 가지의 함수가 올바르게 동작되는지 테스트할 때 함수에 의존된 여러 가지 함수들이 실행될 수도 있습.. 2024. 1. 20. [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 사용하기 (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 하기 (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 반응형
