리액트 최적화 (4) 코드 스플리팅

* 코드 스플리팅 하는 이유 : 현재 필요한 파일만 다운받기 위함 ▼ 코드 스플리팅을 위한 라이브러리 (lazy) ▼ lazy – React The library for web and native user interfaces react.dev 1. lazy + Suspense > MarkdownPreview = 컴포넌트명 > 웹팩이라는 모듈번들러가 별도의 chunk 파일로 만들어겠다! > JS엔진이 위에서부터 아래로 읽다가 lazy 이 부분은 나중에 다운로드함 > MarkdownPreview 컴포넌트를 만났을때, 다운로드 함 > 다운받는 동안은 fallback에서 Loading 컴포넌트를 보여줌 끝.

• format_list_bulleted TIL :: Today I Learned
• · 2024. 3. 2.
• textsms

리액트 최적화 (3) 폰트 : FOIT | FOUT | Subsets | Preload

1. FOIT (Flash Of Invisible Text) - block > 폰트 다운로드 전까지 아무런 글자 안보여줌 > 다운로드 후에 적용된 글자를 보여줌! (1) 웹폰트 자체가 중요 + 사용자가 기다릴 수 있겠다! @font-face { font-display:block; } > 3초동안 아무것도 안 보여주다가 폰트 보여주기 (ㅁ 👉🏻 웹폰트) > 3초 이후에는 기본폰트 보여준 후 다운로드 완료되면 폰트 보여주기 (ㅁ 👉🏻 기본폰트 👉🏻 웹폰트) 2. FOUT (Flash Of Unstyled Text) - swap > 폰트 다운로드 전에 기본 폰트 적용된 글자 보여줌 > 다운로드 후에 적용된 글자로 변경해서 보여 (1) 사용자에게 빠른 컨텐츠 노출이 중요 ( 기본폰트 👉🏻 웹폰트 ) @font-..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 3. 1.
• textsms

리액트(CRA) 최적화(2) Lazy-Loading | Preload | CLS 제거

1. Lazy-Loading > 이미지 viewport에 노출될 때 로드 > 화면에 보이는 사진만 로딩하고, 안보이는 건 나중에 처리 > intersection observer 보다 간단한 라이브러리 사용 가능 import { LazyLoadImage } from "react-lazy-load-image-component"; // 이미지 viewport 보일 때 로드 react-lazy-load-image-component React Component to lazy load images using a HOC to track window scroll position.. Latest version: 1.6.0, last published: 9 months ago. Start using react-lazy-l..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 3. 1.
• textsms

망고 프로젝트 : useInfiniteQuery + Optimistic Update (React Profiler를 사용하여 성능 측정)

1. 좋아요 버튼: 하트 10번 계속 클릭하기 (Optimistic Update 사용) * Priority : Normal ➡️ Immediate * Commited at : 0.5 s ➡️ 1.8 s * Render : 38.5 ms ➡️17.4 ms * Layout effects : 8.2 ms ➡️ 0.2 ms * Passive effects : 2 ms ➡️ 0.6 ms 2. 카테고리 - 습관 인증 * Render : 41.8 ms ➡️26.8 ms * Layout effects : 6 ms ➡️ 3.7 ms * Passive effects : 2.2 ms ➡️ 1.7 ms 3. 카테고리 - 전체보기 * Render : 45.7 ms ➡️ 29.9 ms * Layout effects : 4.8 m..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 2. 18.
• textsms

리액트 최적화(1) 이미지 : Format + cloudinary

리액트 : SPA는 JS 파일을 실행시켜서 동적으로 보여주는 것 => 더 빨리 실행해서 사용자화면에 더 빨리 나타나게 하기 위함 1. Format 최적화 * Rendered Size: 사용자 화면에 보여지는 사이즈 * Intrinsic Size : 다운로드된 실제 원본 사이즈 => Rendered Size의 2배정도가 적당함 * jpg보다는 webp 형식으로 변환 (1) 파일 이미지 하나씩 직접 변형하기 (배너 이미지 변경) https://squoosh.app/ Squoosh Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller f..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 2. 13.
• textsms

useEffect의 dependency array에서 무한루프

* 콜백함수 + role & setRole 과 같이 set로 들어가있는지 확인 필요 문제 : useEffect의 dependency array에서 무한루프 => 글쓰기에서 입력할때마다 해당 콘솔이 계속 찍힘 해결 : useEffect의 dependency array의 값을 확인해야함

• format_list_bulleted TIL :: Today I Learned
• · 2024. 2. 6.
• textsms