머릿말이번에는 PWA를 구현하게 되었습니다.PWA에 대해 간단히 말해보자면, Progressive Web APP입니다.기본적으로 PWA는 HTML, CSS, JS로 만들어졌지만 네이티브 앱과 유사한 경험을 제공하는 웹 어플리케이션입니다.왜 React Native나 Flutter가 아닌 PWA인지?사실 처음에는 RN과 Webview를 사용하여 App store와 구글 플레이 스토어에 앱을 출시해보려고 했습니다.하지만 개발 전 설계를 하다보니 여러 관문에 부딪혔습니다.1. App store에 출시하기 위해서는 최소한 소셜 로그인 또는 자체 로그인이 필요한 점2. 내 애플 계정으로 출시할 경우 만약 내가 퇴사하는 경우 인도하는 부분이 힘든 점3. 알림 서비스는 굳이 네이티브 앱이 아니여도 PWA도 가능한 점P..

올해 상반기에 우리 회사는 가장 매출이 큰 프로젝트 중 하나를 리뉴얼을 하게 되었습니다.왜 Sentry를 도입하게 되었는지프로젝트에서도 가장 중요한 서비스 (서비스 A라고 하겠습니다.)는 주말에도 정상적으로 실행이 되어야하고, 새벽 시간대에도 정상적으로 실행이 되어야합니다.하지만 지금까지 에러 모니터링은 기획팀에서 하루에 3번 씩 실행하는 방법이었습니다.이 방법은 현실적으로 주말이나, 늦은 새벽에 실행하기에는 어려움이 있습니다.따라서 저는 자동 모니터링을 해주는 시스템을 개발하기로 했습니다.왜 굳이 Sentry냐, WebSocket을 연결해서 API 통신 중 이벤트가 발생하면 catch하면 안되는 것인지에 대해 저도 많은 생각을 해봤는데요.이미 Sentry라는 좋은 툴이 있고, WebSocket 연결을 ..

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

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