자바스크립트 + 리액트 디자인 패턴

330

자바스크립트 + 리액트 디자인 패턴

만

preload

를 잘못 사용하면

FCP

에 필수적인 리소스 (예:

CSS

, 폰트 )를 지연시켜 원하는 것

과 정반대의 결과를 초래할 수 있습니다. 또한 이러한 리소스 로딩 우선순위 조정이 제대로

효과를 발휘하려면 서버 사이드에서도 요청 우선순위를 올바르게 처리해야 합니다.

스크립트를 실행하지 않고 가져와야 하는 경우에도

preload

가 유용할 수 있습니다. 다음

web

.

dev

문서

21

에서는

preload

를 어떻게 활용해야 하는지에 대해 다양한 사례를 소개하고

있습니다.

■

Preload

key

scripts

required

for

interactivity

22

■

Preload

your

LCP

image

23

■

Load

fonts

while

preventing

layout

shifts

24

12.13

마치며

이번 장에서는 최신 웹 애플리케이션의 아키텍처와 디자인을 결정짓는 여러가지 중요한 요

소들에 대해 논의했습니다. 또한 리액트의 디자인 패턴이 이러한 문제들을 어떻게 해결하는

지에 대한 다양한 방법을 살펴보았습니다.

이 장의 앞부분에서는

CSR

,

SSR

, 하이드레이션 개념을 소개했습니다. 자바스크립트는 페이

지 성능에 상당한 영향을 미칠 수 있으며, 렌더링 기법을 선택하는 것은 자바스크립트가 페

이지 라이프사이클 중 언제,