들어가기 전 - Fiber의 등장fiber는 일반적인 자바스크립트 객체지만, 본질적으로는 UI 상태를 값으로 표현한 구조체다.React는 이 Fiber 노드들을 연결해 렌더 트리(가상 DOM 트리)를 구성하고, 이를 실제 DOM과 비교(diff)하여 변경사항만을 반영하는 방식으로 렌더링 효율을 높인다.React 공식 문서에서는 렌더링을 “상태 업데이트가 발생한 컴포넌트를 재귀적으로 호출하며 변경 사항을 계산하는 과정”이라고 설명한다.하지만 나는 이 설명이 너무 추상적어서 이해하기 어려웠다..『모던 React 딥 다이브』도 참고해봤지만, 내부 구조를 모른 채 개념만 다루다 보니 오히려 더 혼란스러웠다.그래서, 직접 React 코드를 뜯어보기로 결심했다. 🫠 FiberNode 구조function Fiber..

🖥️ 코드리뷰 中export const createPost = async (data: ICreatePostRequest) => { const response = await axiosInstance.post>( `${API_SUB_URLS_V3}/posts`, data ); return response.data.data;}; 코드 리뷰에서 위와 같은 질문을 받고 비동기 처리 로직을 돌아보았고, react query의 에러 핸들링 메소드와 try, catch를 혼용해서 사용하고 있었습니다. 비동기 로직 되돌아보기export const createPost = async (data: ICreatePostRequest) => { const response = await axiosInstance..

프로젝트를 진행하며 폰트 최적화 및 preload를 적용한 내용을 기록 프로젝트 현재 폰트 현황과 배포 방식 코코 프론트엔드는 CloudFront + S3 방식으로 배포따라서, 사용한 데이터 용량과 네트워크 요청 수에 의해 비용 산정된다.현재 폰트 관련 최적화 및 고려가 하나도 이루어지지 않은 상태이다. index.html 폰트 로드 Pretendard : 서비스 메인 폰트Jua 특정 컴포넌트에서만 사용되는 폰트현재 웹폰트를 외부 CDN 두 군데에서 각각 불러오고 있으며,둘 다 폰트 서브셋이 아니어서 용량이 매우 크다. ❓폰트 서브셋이란필요하지 않은 글자는 다 제외하고 필요한 글자들만 불러오는 것. 그래서 결론은 웹 폰트를 외부 CDN으로 불러 오는 방식 대신 폰트 파일을 올려 서빙하는 방..

들어가기 전 `vite-bundle-analyzer`로 시각화한 현재 번들 사이즈다.현재 페이지 별로 필요한 부분들을 코드 스플리팅해 지연 로딩 해놓은 상태다. (Dynamic Import)(페이지/컴포넌트 별로 지연로딩한 포스팅 참고 ➡️ https://hyemmimi.tistory.com/28 ) 초기 로딩 속도 (네트워크 Slow 4G 기준) 초기 로딩 시 하나로 뭉쳐진 청크를 다운로드하며, Finish 시간은 10.88초이다. 이제 이 하나로 뭉쳐진 무거운 번들을 분리해보고자 한다.분리하고자 하는 이유를 아래와 같이 정리해보았다. 라이브러리를 청크로 분리하고자 하는 이유1. 초기 로딩 속도 개선브라우저는 필요한 앱 코드만 먼저 로딩하고, 무거운 라이브러리는 캐시된 청크에서 비동기 로딩할..

Lazy loading이란?필요한 시점에만 리소스를 로딩하는 기법이다.특히나 React를 사용해 클라이언트 사이드 렌더링을 하는 어플리케이션의 경우, 초기 접근 시 모든 리소스(js, css, html, 이미지 등)를 한 번에 다운로드 하는데, 네트워크 환경이 좋지 않을 경우 사용자는 빈 페이지를 오래 보게 된다.그렇기 때문에 lazy loading으로 초기에 다운 받는 리소스의 양을 줄이는 것이 목적이다.초기에 번들에서 제외 시켰다가 정말 필요할 때 (페이지 이동으로 접근할 때 등) 해당 리소스를 다운 받는 것이다. Code Splitting과의 관계code splitting은 전체 JS 코드를 여러 개의 작은 chunk로 나누는 작업이다.이렇게 나뉘어진 chunk 단위로 필요한 시점에만 불러오는 la..