일단해보는거지

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

💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예제로 사용할 소스코드가 있을 것입니다. 해당 코드들 위에서 아주 간단한 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"..

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