공부/FE8 상태 관리 라이브러리 비교해보기 개발을 해보며 사용해본 상태 관리 라이브러리가 어느덧 꽤 늘었다.이제껏 써본 상태 관리 라이브러리는 Redux Toolkit/Recoil/Zustand 의 3가지 였는데, 여기에 많이 들어본 Jotai 까지 총 4가지의 라이브러리를 사용해보고 어떤 차이점이 보이는지 한 눈으로 확인해보기 위해 간단한 투두 화면을 만들었다.공통 조건 위에서 언급한 대로 간단한 Todo List 화면을 만든다고 가정하고, 이 때 필요한 상태들을 위 4개의 라이브러리로 구현한다. 아래의 항목들을 구현했다(Recoil의 공식 문서 튜토리얼을 참고했다). interface TodoItem { id: string; title: string; description: string; isDone: boolean; date: Date;}.. 2024. 12. 19. 프록시 설정을 알아보자 회사 프로젝트를 하며 처음 프록시 관련 설정을 다뤄본 적이 있었는데, 그때부터 프록시에 대해 조금 정리해봐야겠다고 생각했었다.일단 Proxy란?Proxy Server (프록시 서버)클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 시스템 혹은 프로그램(위키피디아).프론트엔드가 프록시를 설정하는 주된 이유로는 개발 시 CORS에러를 방지하기 위한 경우가 많다.CORS(Cross-Origin Resource Sharing): 교차 출처 리소스 공유.풀이하면 ‘서로 다른 출처 간의 리소스 공유’라고 할 수 있다.‘출처(Origin)’이란 URL의 프로토콜, 호스트(도메인), 포트를 아울러 이르는 말이다. 두 URL이 출처를 이루는 모든 요소가 다 같다면 이들은 같은 출처를 가졌.. 2024. 11. 23. 웹소켓 연결을 해보자 (커스텀 웹소켓 훅 만들어보기) 이 글은 전에 작성했던 게시물과 이어진다. 지난번 실시간으로 데이터를 가져오는 것에 대한 몇 가지 방법에 대해 작성했었다.당시 작성했던 웹소켓 연결 코드는 정말 간단한 부분만 구현되어 있었기 때문에, 좀더 그럴싸하게(?) 보충할 수 있지 않을까 하고 몇 가지를 추가해보았다.※ 아래의 코드는 핵심적인 부분만 발췌해 추가하였기에 실제로 사용하려면 개인의 환경에 맞게끔 보완하는 과정이 필요하리라 예상된다.초기 코드 서론에서 이미 언급했듯 초기 코드는 상당히 기본적인 기능만 구현되어있었다. 아래가 대강의 초기 코드를 재현한 코드이다. 나중에 다른 페이지에서도 사용할 수 있게 만들기 위해 커스텀 훅의 형태로 구현한 모습이다.import { useEffect } from 'react';export const us.. 2024. 11. 16. Hydration이란? 전에 Next.js를 공부할 때 hydration이란 단어를 접한 적이 있었다. 그런데 근래에 Zustand 공식문서를 훑어 보다가 Hydrate라는 단어를 또 접했다.둘이 같은 의미라기엔 정의가 미묘하게 달라서 헷갈리는 일이 없도록 간단하게라도 정리하기로.Next.js 에서의 Hydration사실 Next.js에서만 쓰는 개념은 아닌 것 같다.정확히는, SSR에서 언급되는 용어. (https://www.patterns.dev/react/server-side-rendering/)React 공식 문서에도 서버에서 생성된 컨텐츠를 처리하는 hydrateRoot 가 존재한다.https://react.dev/reference/react-dom/client/hydrateRoot hydrateRoot – Reac.. 2024. 11. 7. 실시간으로 서버에서 데이터를 가져와보기 (feat. Polling/Websocket/SSE) 회사에서 다양한 프로젝트를 진행하며, 서버에서 실시간으로 갱신되는 데이터를 가져오는 작업을 몇 번 경험했다.그 과정에서 다양한 방식을 접하고 경험할 수 있었는데, 간단하게 복습 겸 정리해보기로.Polling 방식새로운 데이터를 받아오기 위해 API를 일정한 간격으로 계속해서 호출하는 것. 즉 클라이언트가 주기적으로 서버에 요청을 보낸다.setInterval 등으로 일정 간격을 두고 서버에 데이터를 요청하는 방식으로 구현하면 되기 때문에, 다른 방식들에 비해 비교적 구현이 간단하다.다만, 새로 가져올 데이터가 없더라도 무조건 요청을 보내기 때문에 비효율적이고 서버의 부담을 증가시킨다는 단점이 존재한다.또한, 갱신된 데이터를 제때제때 받아오는 방식이 아니기 때문에 실시간성이 떨어진다. 위에서 언급한대로 .. 2024. 11. 3. PostMessage 알아보기 개발 중 브라우저 창끼리 데이터를 주고 받아야 하는 상황이 생겼다.이를 구현하기 위해 방안을 찾아보던 결과, GPT가 제시한 방안이 PostMessage를 사용하는 것이었다.사용법 및 용도에 대해 간단히 복습 겸 메모해보기로.PostMessage란?Window 창 사이 Cross-Origin 통신을 할 수 있게 해주는 메서드다.즉, 별도의 Cross Origin 설정을 하지 않더라도 안전하게 서로 다른 출처 간 통신이 가능하다! 개발 상황 PostMessage를 사용하여 구현하기로 한 상황은 대충 아래와 같았다. 아래의 상황을 재현하기 위해 간략하게 구현해보기로 한다.웹 A에서 특정 메뉴를 통해 웹 B를 새 윈도우로 띄운다.이때 웹 A는 웹 B가 필요로 하는 데이터를 보내주어야 한다.웹 B는 웹 A가 .. 2024. 10. 20. 이전 1 2 다음
