지금까지 써 본 상태 관리 라이브러리는 Redux toolkit, mobX, Recoil이었다. 처음 썼던 상태관리가 Redux toolkit이었기 때문에 주로 사용해오다가 이직을 하면서 Recoil을 사용하게 되었다. 그런데 Recoil이 업데이트가 느리다는 글을 보게 된 후에 다른 상태 관리 라이브러리를 찾아보았다. Next도 15가 나왔고 React도 19가 임박한 시점에서 Recoil이 자주 업데이트가 안된다는 점이 맘에 안들었던 것 같다. 그러다 찾게 된 Zustand Zustand는 독일어로 라는 뜻이다. 아직 Redux가 많이 사용된다고 하는데 작은 기능을 사용하더라도 몇개의 파일과 코드들을 만들어야하는 boilerplate의 단점은 어쩔 수 없는 것 같다. Zustand 장점? 간단하고 직관적인 API를 제공한다. boilerplate가 거의 필요 없다. 사용 방법이 간단하다. 상태 변경 시 불필요한 컴포넌트 렌더링을 방지하는 최적화를 자동으로 처리한다. Zusta…

다른 페이지에 있을 때도 알림이 오면 보여주는 기능을 만들려고 한다. 그러기 위해서는 실시간으로 데이터를 받아오는 로직이 필요하다. SSE(Server-Sent-Events) 라는 것을 알게 되었다. SSE (Server-Sent-Events) 란? 간단하게 서버의 데이터를 실시간, 지속적으로 Streaming 하는 기술이다. SSE 특징 서버에서 클라이언트로 실시간 이벤트를 전송하는 웹 기술로 서버에서 발생하는 업데이트나 알림 등을 으로 클라이언트에 전달할 수 있다. 단방향 통신이기 때문에 만 데이터를 전송할 수 있다. 클라이언트는 HTTP 프로토콜을 통해 SSE 연결을 설정하고, 서버는 HTTP 응답을 유지한 상태에서 데이터를 전송한다. 을 제공하기 때문에 연결이 끊어졌을 때 자동으로 다시 연결한다. WebSocket과의 차이점 가장 큰 차이점은 데이터 흐름에 있다. SSE는 서버 —> 클라이언트 ( 통신 방식) 일방적인 데이터 전송이 필요한 주가 업데이트, 실시간 알림에 적…

React Router와 같은 라우팅 라이브러리를 사용하여 페이지를 이동할 때 React Router는 React 컴포넌트의 라이프사이클과 히스토리 API를 이용하여 스크롤 위치를 관리하고, 페이지 간 전환 시 스크롤 위치를 초기화하지 않도록하기 때문에 스크롤 위치가 유지된 채로 페이지가 이동된다. 이를 해결하기 위해 아래와 같이 컴포넌트를 생성해서 사용하였다. ScrollToTop Component useLocation을 이용하여 현재 페이지의 경로를 가져오고, useEffect를 이용하여 경로가 변경될 때마다 window.scrollTo(0,0)을 호출하여 스크롤을 페이지의 맨 위로 이동시킨다. 생성한 ScrollToTop 컴포넌트를 BrowserRouter의 내부에 포함시킨다. Router Component BrowserRouter는 라우트를 처리하고 URL과 연결된 컴포넌트를 렌더링하는 역할을 합니다. 따라서 ScrollToTop 컴포넌트를 BrowserRouter내에 …

API 통신이 안된다.. 왜? 로컬에서는 잘 되는데 서버에서는 통신이 안되는 이유는 뭘까… 먼저 오류에 대해 알아보자 Access to XMLHttpRequest at ’https://cedarsojt.store:4000/signup/list/country/branch’ from origin ’https://cedarsojt.store’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 오류 내용을 해석해보면 XMLHttpRequest 요청이 CORS(Cross-Origin Resource Sharing) 정책에 의해 차단된 것을 나타냅니다. 이 에러는 요청된 리소스에 ‘Access-Control-Allow-Origin’ 헤더가 없기 때문에 발생합니다. 악명 높은 CORS 에러 메세지라고 한다. 웹 개발을 하다 보면 반드시 마주치는…