이번 글에서는 기존에 사용하던 Context API에서 Zustand로 마이그레이션 하게 된 썰을 한 번 풀어보려고 합니다. 처음에는 상태관리에 대해 잘 모르기도 했고 단순한 전역 상태만 관리하면 되겠지 싶었습니다.  그래서 Context API를 루트에 넣고, 하나 둘 Provider를 감쌌죠.하지만 어느 순간부터 컴포넌트가 불필요하게 리렌더링 되고 수정하지 않은 컴포넌트도 갑자기 반응하며 성능 저하 이슈까지 발생하기 시작했습니다.그때 든 생각은 하나였습니다."내가… 왜 그랬을까?"이 글에서는 Context API를 쓸 때 겪었던 리렌더링 이슈와 Zustand로 어떻게 개선했는지를 공유해보려고 합니다. 왜 나는 Context API를 선택했을까?사실 Context API는 제가 선택해서 사용한 기술은 ..

이 글을 작성하는 이유기존에 진행했던 세종피어 프로젝트를 되살려보려고 했지만 백엔드 팀원들의 개인 사정 때문에 더는 이어 나갈 수 없기도 하고 이전에 존재했던 API 역시 사용할 수 없기에 어떻게 할까 고민을 하다가 마침 올리브영 테크블로그의 글을 읽게 되었습니다. 여기서 MSW라는 개념에 대해 알게 되어 한 번 사용해 보고 느낀 점을 기술하고자 글을 작성하게 되었습니다.또, 사실 해커톤에서나 프로젝트에서나 프론트엔드 개발자는 백엔드 API가 나오기 전에 UI를 완성해 놓으면 시간이 붕 뜨기 마련입니다. 앞으로는 이런 일을 방지하고자, API를 Mocking하는 MSW를 사용해 보았습니다. 다음은 기본적인 페이지 구성 및 UI 구현이지만 이 부분은 생략하고 MSW (Mocking Service Worke..

저번 글에 이어서 이번 글에서는 React, Typescript, Electron으로 간단한 게임 런쳐를 구현해보려고 합니다. 우선 프로젝트 구조는 다음과 같습니다.my-game-launcher/├── package.json // Electron과 React 실행 스크립트 포함├── tsconfig.json ├── public/│ └── index.html // React HTML 템플릿 (Create React App 템플릿)| └── electron.js └── src/ ├── index.tsx // React 진입점 (TypeScript) ├── App.tsx // React 컴포넌트 ..

Suspense 란?Suspense는 리액트에서 제공하는 컴포넌트로 일부 데이터 또는 리소스가 불리울때까지 로딩 상태를 처리하고 대체 컨텐츠를 표시할 수 있다.주로 동적 import와 비동기 데이터 Fetching을 처리할 때 사용된다.그렇다면 왜 사용할까?비동기 데이터나 컴포넌트가 로드될 때, 로딩 상태를 직접 관리하지 않아도 된다.사용자에게 더 나은 로딩 경험을 제공한다.코드 분할과 비동기 데이터 처리를 쉽게 구현할 수 있다.Suspense의 주요 특징Lazy Loading: 컴포넌트를 비동기적으로 로드할 때 사용한다.비동기 데이터 Fetching: React Server Components 및 React Concurrent Features와 함께 사용비동기 데이터 Fetching과 Suspense ..

Lazy Loading을 사용하게 된 이유SejongPeer를 리팩토링하면서 성능 최적화를 하기로 했다.그 중 첫 번째 단계가 바로 Lazy Loading인데 무슨 개념인지 알아보자.Lazy Loading이란?보통 웹페이지를 불러올 때 페이지 전체에 대한 데이터(리소스)를 불러오면서 초기 로드 시간이 길어지고, 사용자가 당장 필요하지 않은 리소스까지 모두 다운로드하므로 불필요한 네트워크 사용을 초래한다.때문에 페이지 수가 수십 페이지 정도 되는 SejongPeer에게는 꼭 필요한 기능 중에 하나라고 생각했다.기존에 도입하려는 방식기존에는 React의 React.lazy()와 Suspense를 사용해 지연 로딩 중 로딩 상태를 표시하려고 했다.하지만 우린 프로젝트 사이즈가 크기도 하고 추후 React Qu..