문제 발견사실 이 문제점을 처음 발견한 것은 지난 7월 말이었습니다. 당시 프로젝트에 투입되어 대부분의 API를 구현하는 역할을 맡다보니 Zustand로 API 통신하기에만 급급했습니다. 이렇다보니 같은 API 통신이 4번이나 발생한다는 것을 알고도, 프로젝트 기한 때문에 React의 Strict.Mode겠지 하며 넘어갔습니다.문제가 되었던 부분당시 구현했던 코드입니다.section: [ { component: 컴포넌트 A, }, { component: 컴포넌트 B, }, { component: 컴포넌트 C, }, { component: 컴포넌트 D, }, { component: 컴포넌트 E, }, {..

이번 글에서는 기존에 사용하던 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..