@defer를 사용한 지연 로딩
@defer로 템플릿 영역을 지연 로드합니다.
@defer를 사용한 지연 로딩은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
defer를 사용한 지연 로딩
at-defer 블록은 템플릿의 일부와 해당 종속 항목을 지연 로드하여 초기 로딩 성능을 향상합니다. 지연된 콘텐츠는 별도의 청크로 분리됩니다.
기본 defer 구문
콘텐츠를 at-defer 블록으로 감쌉니다. 기본적으로 브라우저가 유휴 상태가 되면 로드됩니다.
// @defer {
// <app-heavy-chart></app-heavy-chart>
// }defer를 사용하는 이유
무거운 구성 요소나 화면 아래쪽에 있는 구성 요소의 로딩을 지연하면 초기 번들의 크기를 줄이고 첫 화면 렌더링을 빠르게 할 수 있습니다. 구성 요소는 실제로 필요할 때만 로드됩니다.
placeholder 블록
at-placeholder 블록은 지연 블록이 트리거되기 전에 콘텐츠를 표시합니다.
// @defer {
// <app-comments></app-comments>
// } @placeholder {
// <p>Comments will load soon</p>
// }로딩 블록
지연 청크를 가져오는 동안 at-loading 블록이 표시됩니다.
// @defer {
// <app-comments></app-comments>
// } @loading {
// <p>Loading comments...</p>
// }오류 블록
지연된 종속 항목을 로드하지 못하면 at-error 블록이 렌더링됩니다.
// @defer {
// <app-comments></app-comments>
// } @error {
// <p>Failed to load comments</p>
// }트리거
idle 시, viewport 시, interaction 시, hover 시 또는 timer 시와 같이 on 절의 트리거를 사용하여 로딩이 시작되는 시점을 제어할 수 있습니다.
// @defer (on viewport) {
// <app-chart></app-chart>
// }on viewport
on viewport 트리거는 콘텐츠가 뷰포트에 나타날 때 콘텐츠를 로드하므로, 스크롤해야 볼 수 있는 섹션에 적합합니다.
on interaction 및 on hover
on interaction은 사용자가 플레이스홀더를 클릭하거나 포커스를 맞출 때 로드하고, on hover는 포인터를 플레이스홀더 위에 올렸을 때 로드합니다.
// @defer (on interaction) {
// <app-editor></app-editor>
// } @placeholder {
// <button>Open editor</button>
// }when 조건
when을 사용하여 부울 표현식으로도 트리거할 수 있으며, 표현식이 true가 되는 순간 로드됩니다.
// @defer (when shouldLoad()) {
// <app-details></app-details>
// }사전 가져오기
렌더링과 별도로 지연 청크를 미리 가져올 수 있습니다. 예를 들어 idle 시 사전 가져오기를 수행하면 렌더링 트리거가 실행되기 전에 청크를 준비할 수 있습니다.
// @defer (on viewport; prefetch on idle) {
// <app-chart></app-chart>
// }빠른 확인: defer
지연 콘텐츠를 트리거합니다.
복습: 지연 로딩
지연 로딩을 위한 at-defer 블록과 at-placeholder, at-loading, at-error 블록, 그리고 idle 시, viewport 시, interaction 시, hover 시, timer 시, when과 같은 트리거 및 사전 가져오기를 배웠습니다. Built-in Control Flow 과정을 완료하셨습니다.
자주 묻는 질문
“@defer를 사용한 지연 로딩” 강의는 무료인가요?
네 — “@defer를 사용한 지연 로딩” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“@defer를 사용한 지연 로딩”에서 뭘 배우나요?
@defer로 템플릿 영역을 지연 로드합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“@defer를 사용한 지연 로딩” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- @if를 사용한 조건부 렌더링
- @for를 사용한 반복
- @switch를 사용한 분기
- @defer를 사용한 지연 로딩