저번에 웹소켓을 이용하여 React로 채팅을 구현한 경험이 있다. [바로가기] 리액트 웹소켓(Stomp) 이번 토이프로젝트로 MBTI 유형을 선택해서 채팅을 할 수 있는 서비스를 구현했다. 서버는 Java, Spring을 사용했고 클라이언트는 React, Typescript를 사용했다. 처음에 버전이 안 맞아서 조금 헤매었었 1yoouoo.tistory.com 위의 글에선 사용자가 채팅을 이용할 때 네트워크 연결에 성공한 케이스만 다뤘었다. 하지만 언제나 그렇듯 항상 행복한 상황만 나오진 않는다. 실패 케이스도 처리를 해줘야 한다. 그래서 어떠한 방법이 있는지 구글링을 통해 알아냈고, 이를 블로깅 하려고 한다. 어렵지 않은 내용이니 글을 모두 읽으면 구현하는데 어렵지 않을 거라고 믿는다. 우선, 네트워크..
개발을 진행하면서 HTTP 요청을 다루게 되는데, 이때 많은 경우에 반복되는 패턴이나 코드를 발견할 수 있다. 토큰을 헤더에 포함시키거나, 공통된 에러처리 등이 그 예다. 이러한 반복적인 코드를 줄이고, 더 효과적으로 코드를 관리하기 위해 Axios 인스턴스와 인터셉터를 사용하는 방법에 대해 알아보자. Axios 인스턴스 생성 먼저, 반복적으로 사용되는 Axios 설정을 추상화하기 위해 Axios 인스턴스를 생성한다. Axios 인스턴스는 주어진 설정으로 초기화된 새로운 Axios 요청을 만들어낸다. 이렇게 생성된 인스턴스는 설정이 미리 적용되어 있으므로, 각 요청에서 이 설정을 반복하지 않아도 된다. // customApi.ts import axios, { AxiosInstance } from 'axi..
웹에서 애니메이션은 사용자 경험을 향상하고, 사용자의 관심을 끌며, 사용자에게 시각적 피드백을 제공하는 데 사용됩니다. 이런 애니메이션을 생성하는 데는 크게 두 가지 접근 방법이 있다: CSS 애니메이션과 JavaScript 애니메이션이다. 이 두 가지 방법은 각각 장점과 단점이 있으며, 프로젝트 정책에 따라 다른 방법이 더 적합할 수 있다. 그렇다면 두 방법의 차이는 무엇이고 어떤 경우에 어떤 방법을 선택해야 하는지, 그리고 이 모든 것을 이해하기 위해 브라우저의 렌더링 원리부터 간단하게 알아보자. 브라우저 렌더링 원리: Reflow와 Repaint 브라우저가 웹페이지를 렌더링하는 과정은 크게 Layout, Paint, Composite 세 단계로 이루어진다. Layout(Reflow): 브라우저가 요..
배경 개발을 하다 보면 항상 에러를 마주하기 마련이다. 그리고 터미널에 띄워주는 오류는 문제해결을 할 수 있는 아주 큰 도움을 주는 건 사실이다. 하지만 위에 보여주는 에러는 내가 믿고 거르는 에러이다. 보통은 오류의 권고는 아주 유용하지만 이 케이스는 유용하지 않은 경우이다. 오류 메세지를 보면 act에서 코드를 감싸라고 권고하는데 여기서는 그렇게 해선 안된다. 비슷한 에러중 하나는 Warning: Cant' perform a React state update on an unmounted component. 라고 하는 에러다. 이 두 가지 오류 중 하나가 나타났다면 아마도 원인은 테스트가 끝난 뒤에 컴포넌트가 바뀌기 때문이다. 이게 무슨 소리냐면, 일부 비동기 상태 업데이트가 완료되기 전에 테스트 함수..
배경 다음과 같은 간단한 페이지를 테스트하려고 했다. _app.tsx const App = ({ Component, ...rest }: AppPropsWithLayout) => { const { store, props } = wrapper.useWrappedStore(rest); const getLayout = Component.getLayout ?? ((page) => page); return ( {getLayout()} ); }; export default App; Login.tsx const Login = () => { const dispatch = useAppDispatch(); useEffect(() => { dispatch(routerSlice.actions.loadLoginPage()); }..
1. 각 라이브러리 소개 프론트엔드 테스팅에 있어서 React Testing Library(RTL)와 Enzyme는 대표적인 라이브러리이다. 이 둘은 같은 목적을 가지고 있지만, 서로 다른 방식과 철학으로 테스팅을 접근한다. 이 글에서는 RTL과 Enzyme의 장단점을 비교하고, 나의 생각을 공유해보려고 한다. 1-1. React Testing Library의 장점 및 단점 RTL은 테스팅 라이브러리로서의 새로운 패러다임을 제시한다. 사용자 중심의 테스트를 가능하게 하여 실제 사용자 경험에 더 가깝게 테스트를 작성할 수 있게 도와줍니다. 장점 사용자의 관점에서 테스트를 작성하도록 돕는다. 컴포넌트의 구현 세부 사항보다는 실제 동작에 집중하게 한다. UI가 예상대로 동작하는지 검증하는 데 초점을 맞춘다. ..
TCP와 UDP: 인터넷의 중추, 전송 프로토콜 이해하기 인터넷은 복잡한 시스템이며, 데이터는 우리가 웹 브라우저를 사용해 웹 페이지를 요청하거나 이메일을 보내는 등의 작업을 수행할 때 수많은 네트워크와 장비를 거쳐 이동합니다. 이 과정에서 TCP와 UDP라는 두 가지 주요 전송 프로토콜이 핵심적인 역할을 합니다. 이 글에서는 TCP와 UDP가 무엇인지, 어떻게 작동하는지에 대해 알아보겠습니다. TCP란 무엇인가? TCP(Transmission Control Protocol)는 인터넷 프로토콜 스위트(IP)의 핵심 프로토콜 중 하나로, 데이터를 패킷으로 나누어 인터넷을 통해 전송하고 수신 측에서 이 패킷을 원래의 데이터로 재조립하는 역할을 합니다. TCP는 신뢰성 있는 데이터 전송을 보장하는 프로토콜로,..
소프트웨어 테스트란 무엇인가? 테스트는 무엇인가가 잘 동작하는지 확인하는 활동입니다. 이러한 컨셉을 소프트웨어에 적용한 것이 바로 '소프트웨어 테스트'입니다. 소프트웨어 테스트는 우리가 만든 소프트웨어가 예상한 대로 동작하는지 확인하는 과정입니다. 과거에는 개발자가 소프트웨어를 만들고, 별도의 테스트 팀이 그 소프트웨어가 제대로 동작하는지 확인하는 구조였습니다. 그러나 현대의 소프트웨어 개발 흐름에서는 개발자가 자동화된 테스트를 작성하고 실행하는 것이 일반적인 상황이 되었습니다. 자동화된 테스트란, 사람이 직접 테스트하는 것이 아닌, 컴퓨터가 대신 테스트하는 것을 의미합니다. 이렇게 컴퓨터를 통한 자동화된 테스트에는 다음과 같은 이점이 있습니다: 컴퓨터가 테스트를 수행하므로, 사람이 직접 테스트를 수행하..
