일단해보는거지

Vite devServer를 nginx proxy 하기 사내 개발환경에서 백엔드서버와 프론트엔드 서버들을 Docker 위에서 nginx의 리버스 프록시로 띄워서 사용하고 있었습니다. 그 중 Vite로 빌드한 React App과 devSever도 포함되었습니다. devServer와의 연결을 위해서 nginx에선 HTTP를 WebSocket으로 업그레이드 하느 설정이 반드시 필요합니다. 설정은 아래와 같이 간단합니다. server { listen 80; client_max_body_size 50M; location /api { proxy_pass http://backend; } location / { proxy_pass http://frontend; proxy_http_version 1.1; proxy_se..

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

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