일단해보는거지

들어가기 전에 컴포넌트 단위테스트를 작성할 때에는 관심사가 어떠한 데이터가 잘 주어졌다면 UI가 제대로 렌더링하는지에 한정되어 있습니다. 그러나 통합테스트로 넘어가면 데이터가 잘 주어지는 상황 자체를 Mocking 해야할 필요가 있습니다. 그래서 이전 포스팅에서는 msw를 활용하여 REST API를 Mocking 하여 LoginPage에 대한 통합테스트를 작성할 수 있었는데요. msw에서는 단방향 통신에 대해서는 지원을 해주지만 WebSocket과 같은 양방향 통신에서는 적합하지 않았습니다. 따라서 이번 포스팅에서는 Socket.IO를 활용하여 양방향 통신, 즉 채팅과 같은 실시간 통신을 Mocking 하는 방법을 공유해드리고자 합니다. Socket.IO에 대한 Mocking은 공식문서를 참고하였습니다...

들어가기 전에이전 포스팅에서는 LoginForm 컴포넌트에 대한 단위테스트(Unit test) 코드를 작성하면서 리팩토링까지 해보았습니다. 단위테스트에 대한 내용은 아래 링크를 통해서 확인하실 수 있으며, 이 글을 이해하는데에도 도움이 됩니다. testing-library, vitest로 리액트 Unit test 작성하며 리팩토링하기늘어가는 기능과 화면에 비례해서 버그 또한 늘어나기 마련입니다. 그런데 그 버그를 수정하면 또 다른 곳이 터져버리는 불상사가 눈앞에 펼쳐지게 됩니다. 사람은 실수를 하기 마련이고 그것mitchellglobal.tistory.com 아래 라이브러리들에 대해서 선행적으로 학습하시면 글을 이해하는데 도움이 됩니다.React Query, React Router, React-toast..

문제의 배경일전에 UI 컴포넌트 라이브러리를 만들어 배포하는 프로젝트를 진행하였습니다. CommonJS와 ESM 두 모듈시스템을 지원해주기 위해서 Rollup과 package.json 설정해주었는데요. (아래 포스팅에서 자세히 볼 수 있습니다.) [UI 컴포넌트 라이브러리] 2. 라이브러리 배포하고 사용하기 (NPM, Github Packages, Docker)[UI 컴포넌트 라이브러리] 1. Typescript로 React 컴포넌트 만들고 Rollup으로 빌드하기 💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예mitchellglobal.tistory.com배포된 컴포넌트 라이브러리를 실제 프로젝트에서 적용해보는데에서 문제를 발견하게 됩니다. UI ..

회사에서 운영하는 서비스가 늘어갈수록 UI에 대한 반복작업은 점차 많아지게 됩니다. 곧 디자인시스템의 필요성이 나타는데요. 여러가지를 아우르는 디자인시스템에서 개발자들은 특히 UI 컴포넌트 라이브러리에 책임을 두고 있습니다. 도입하게 된다면 각 서비스에서 UI에 관한 코드를 작성하는 효율도 높아지고 유지보수도 간단해질 것입니다. 다음 기술들과 함께 시작해보겠습니다. Typescript, React Emotion: CSS in JS 라이브러리로 컴포넌트의 모든 스타일에 적용합니다. Rollup: 모듈 빌드와 트리쉐이킹에 특화된 빌드툴을 사용합니다. NPM: 빌드된 코드를 어디서든 사용할 수 있게 배포합니다. Storybook: 테스팅, 협업, 문서화 등의 기능으로 디자인시스템 구축을 쉽게 시작할 수 있습니..