4

[React/리액트] 웹 폰트 로딩 최적화하기: preload와 swap 적용하기

문제 상황개발을 진행하면서 눈에 거슬릴 정도로 사용자 경험을 해치는 부분이 하나 있었다. 바로 폰트이다. 영상을 보면 폰트가 깜빡인다는 문제를 확인할 수 있다. 이게 바로 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)폰트 로딩 전까지 텍스트 자체를 숨김폰트 로드 후 텍스트가 갑자기 나타남이런 문제라고 설명할 수 있다. 나는 이를 개선하기 위해 ..

React 2025.01.08

[React/리액트] API 성능 최적화하기: 단일 조회 API와 중앙화된 상태 관리

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

React 2025.01.08

BOM 이란?

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com   브라우저 객체 모델(BOM)이란 무엇인가?브라우저 객체 모델(BOM) 개요브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저를 객체화한 것이다.BOM은 자바스크립트로 브라우저를 제어하기 위해 사용된다.브라우저에서 제공하는 여러 기능들을 자바스크립트로 제어할 수 있다.주요 브라우저 객체Window 객체브라우저 창 자체..

자바스크립트 2024.07.08

DOM 이란?

지나친 이론 공부를 다시 해보겠다... 해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com  돔(DOM)이란 무엇인가?자바스크립트의 탄생 배경자바스크립트는 웹문서를 제어하기 위해 개발된 언어이다.HTML 요소를 추가, 제거, 변경하는 등의 작업을 위해 사용된다.HTML 파일을 자바스크립트로 제어하는 방법브라우저에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있다.ex) 크롬 : 블링크, 파이어폭스: 게..

자바스크립트 2024.07.08
728x90