공부하자

문제 상황개발을 진행하면서 눈에 거슬릴 정도로 사용자 경험을 해치는 부분이 하나 있었다. 바로 폰트이다. 영상을 보면 폰트가 깜빡인다는 문제를 확인할 수 있다. 이게 바로 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 비효율, 즉 불필..