공부하자

문제 상황개발을 진행하면서 눈에 거슬릴 정도로 사용자 경험을 해치는 부분이 하나 있었다. 바로 폰트이다. 영상을 보면 폰트가 깜빡인다는 문제를 확인할 수 있다. 이게 바로 FOUT(Flash of Unstyled Text)나 FOIT(Flash of Invisible Text) 현상인데  FOUT(Flash of Unstyled Text)나 FOIT(Flash of Invisible Text)이란?FOUT (Flash of Unstyled Text) 폰트 로딩 전에 기본 폰트로 텍스트 표시폰트 로드 후 깜빡이면서 폰트 교체 FOIT (Flash of Invisible Text)폰트 로딩 전까지 텍스트 자체를 숨김폰트 로드 후 텍스트가 갑자기 나타남이런 문제라고 설명할 수 있다. 나는 이를 개선하기 위해 ..

프로젝트의 규모가 커지면서 초기 로딩 속도가 느려지는 문제가 발생했다. 특히 홈페이지 접속 시 불필요한 코드까지 모두 다운로드되는 현상을 발견하고, 이를 개선하기 위한 최적화 작업을 진행했다. 말로만 들어보던 lazy loading을 처음으로 적용해봤다! 각 이론에 대한 간단한 설명과 함께 내가 적용했던 코드와 성능 분석 방법들을 말해보고자 한다. Code Splitting이란?Code Splitting은 번들링된 코드를 여러 개의 작은 청크(chunk)로 분할하는 기술이다.초기 로딩 시 필요한 코드만 다운로드 -> 나머지 코드는 필요할 때 로드 -> 전체 페이지 로드 시간 감소 이런 효과를 얻을 수 있고 React에서는 React.lazy()와 Suspense를 통해 쉽게 구현할 수 있다! 문제 상황불..

문제 상황프로젝트를 진행하다 보니 북마크 기능에서 불필요한 API 호출이 발생하는 것을 발견했다. 정보 딱 하나만 조회하면 되는데 전체 정보 조회 API가 하나만 존재하는 상황이었다. 그리고 각 페이지마다 중복된 북마크 로직이 존재하는 구조적으로 비효율적인 부분을 발견했다! 나는 단순한 북마크 상태 변경에도 전체 상세 정보를 다시 불러오는 것이 비효율적이라고 판단했고, 이를 개선하기 위해 백엔드 팀과 적극적으로 소통하며 해결책을 찾아갔다. (= 설득해서 단일 조회 API를 만들었다 ㅎㅎ) 기존 코드의 문제점 1처음에는 북마크 상태 변경 시 전체 상세 정보를 조회하는 API만 있었다. 백엔드 팀의 초기 설계는 단순했지만, 실제 사용에서는 비효율적인 부분이 있었다.이 구조의 문제점은 API 비효율, 즉 불필..

평소 프론트엔드 모니터링에 관심이 많았는데, 운영 중인 서비스에서 발생하는 에러를 실시간으로 파악하지 못하는 불편함을 겪고 있었다. 이를 해결하고자 Sentry를 도입한 경험을 공유하고자 한다.Vite + React 프로젝트에서 Sentry를 설정하고 활용하는 방법을 상세히 다룰 예정이다.Sentry란?Sentry는 실시간으로 애플리케이션의 에러를 감지하고 모니터링할 수 있는 플랫폼이다Sentry를 선택한 이유프론트엔드 모니터링 도구로 Google Analytics나 Microsoft Clarity 같은 대안들도 있었다. 하지만 이 도구들은 사용자 행동 분석이나 일반적인 웹 분석에 초점이 맞춰져 있다는 한계가 있었다. GA, Clarity와 Sentry의 차이점Google Analytics: 사용자 행동..

umc 6주차 과제중 Debounce와 Throttling이라는 개념을 배웠다! Debounce : 연속된 이벤트 호출을 제한하여 마지막 이벤트만 처리하도록 하는 기술→ 연속된 이벤트가 발생할 때마다 타이머를 리셋하고, 일정 시간이 지난 후에 이벤트를 처리Debounce는 주로 어디에 사용하나요?ex) 검색어 자동 완성 기능에서 사용자가 입력을 멈춘 후에만 서버에 요청을 보냄사용자 입력 필드에서 입력이 끝난 후 일정 시간 동안 입력이 없을 때만 서버에 요청을 보내는 경우적용 과정1. debounce hook 만들기2. 적용하기 1. useDebounce.js hook 구현import { useState, useEffect } from "react";export const useDebounce = (val..

https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통해 props 전달이 깊은 컴포넌트 트리를 통해 이루어지는 것을 피할 수 5ffthewall.tistory.com 위 글과 같이 context API로 전역 상태를 관리하는 코드를 작성한 적이 있다. 하지만 이 코드에는 문제점이 있는데 바로 Provider의 상태가 변했을때 이를 구독하고 있는 컴포넌트의 경우 일제히 리렌더링이 일어난다는 문제이다. 하위 컴포넌트의 개수가 많아지거나 프로젝트의 규모가 커지면 불필요한 리렌더링이 많아지면서 ..