일단해보는거지

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은 공식문서를 참고하였습니다...

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

늘어가는 기능과 화면에 비례해서 버그 또한 늘어나기 마련입니다. 그런데 그 버그를 수정하면 또 다른 곳이 터져버리는 불상사가 눈앞에 펼쳐지게 됩니다. 사람은 실수를 하기 마련이고 그것을 줄이기 위해서는 더 많은 시간을 쏟아야 합니다. 이러한 이유 때문에 테스트코드는 결국 필요하게 됩니다. 따라서 이번 포스팅에서는 Frontend 영역에서의 Unit test에 대해서 작성하고, 테스트를 작성하면서 기존 코드의 문제점을 분석하고 리팩토링 하겠습니다. 예시로는 LoginForm 컴포넌트에 대해서 작성합니다. 들어가기 전에 선수지식에 대해서는 반드시 알고 가셔야 이해하실 수 있습니다. 이 글에서 사용되는 기술들에 대해서 전부 알 필요는 없습니다만 참고용으로 적어두었습니다. ✅ 선수지식 React, Vitest(..

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

[UI 컴포넌트 라이브러리] 1. Typescript로 React 컴포넌트 만들고 Rollup으로 빌드하기 💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예제로 사용할 소스코드가 있을 것입니다. 해당 코드들 위에서 아주 간단한 Input 컴 mitchellglobal.tistory.com 이번에는 1편에 이어서 빌드한 소스를 만들어둔 소스를 필요한 곳에서 사용할 수 있도록 NPM registry에 배포하고 프로젝트에서 불러와 사용하는 방법을 공유하겠습니다. 전체적으로 다음과 같은 내용을 학습하게 되겠습니다. 오픈소스로 라이브러리 배포하기 Private으로 라이브러리 배포하기 Github Action으로 배포 자동화하기 Docker 환경에서 Privat..

💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예제로 사용할 소스코드가 있을 것입니다. 해당 코드들 위에서 아주 간단한 Input 컴포넌트를 타입스크립트로 작성하고 Rollup으로 빌드하도록 하겠습니다. 01. Typescript 셋팅하기 (tsconfig) 먼저 타입스크립트 패키지를 설치합니다. npm install -D typescript​ tsconfig.json 파일을 루트에 생성합니다. // tsconfig.json { "target": "ES5", "lib": [ "DOM", "DOM.Iterable", "ESNext" ], "jsx": "react-jsx", "jsxImportSource": "@emotion/react", "module"..

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

사용자의 세션처리는 회원가입과 로그인이 있는 프로젝트에서는 언제나 중요한 관문으로 만나게 됩니다. 일반적으로는 서버에서 전달받은 토큰을 쿠키에 저장하고 사용자의 HTTP요청에 응답하는 방법으로 진행하게 됩니다. 하지만 이번에는 앱과 웹뷰의 환경 속에서도 같은 방법으로 세션과 HTTP 통신을 할 수 있는 사례를 공유해보겠습니다. 목차 프로젝트 환경 Flutter, Webview(Nextjs)에서 쿠키로 세션관리하기 서버사이드와 클라이언트에서 효율적으로 Axios 라이브러리 사용하기 1. 프로젝트 환경 현재 진행중인 프로젝트는 webview중심으로 구현된 앱 프로젝트입니다. Flutter로 앱의 껍데기를 만들고 대부분의 주요 기능은 내부의 Webview를 통해서 제공하는 형태입니다. Webview에 띄워진 ..