Angular 앱에서 로딩 스플래시 화면과 진행 상태 추적 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
Angular 프레임워크를 사용하는 개발자, 앱 초기 로딩 성능 개선에 관심 있는 프론트엔드 개발자
난이도: 중간 (Angular 앱의 초기화 및 라우팅 이해 필요)
핵심 요약
- Angular 앱에서 스플래시 화면 구현은
provideAppInitializer를 사용하여 초기화 작업 전에 처리해야 한다. index.html에 스플래시 화면의 스타일과 스크립트를 직접 삽입하면 즉시 표시할 수 있으며, 초기화 완료 후 제거 가능하다.updateTitle함수를 사용하여 스플래시 화면의 진행 상태를 실시간으로 업데이트할 수 있다.
섹션별 세부 요약
1. 스플래시 화면 필요성과 문제점
- Angular 앱의 초기화 작업이 오랜 시간 소요될 수 있으며, 사용자 경험 저하를 유발할 수 있다.
- 스플래시 화면은 사용자에게 즉각적인 피드백을 제공하여 앱이 반응적이며 세련된 인상을 줄 수 있다.
- Angular 컴포넌트는 프레임워크 부트스트랩 후에만 렌더링되므로, 초기화 작업 전에 스플래시 화면을 표시할 수 없다.
2. `provideAppInitializer`를 사용한 초기화 작업
provideAppInitializer는 Angular이 UI 렌더링을 시작하기 전에 초기화 작업을 실행한다.ConfigLoaderService,ConnectionCheckerService,StorageInitializerService,TranslationLoaderService와 같은 서비스를 초기화에 사용할 수 있다.performAsyncInitialization()함수는 비동기 작업을 시뮬레이션하고splashFadeOut()은 스플래시 화면의 페이드아웃 애니메이션을 처리한다.
3. `index.html`에 스플래시 화면 삽입
index.html의- 초기화가 완료되면 스플래시 화면을 제거하여 잔여 효과를 방지할 수 있다.
- 스플래시 화면이 복잡한 경우, 외부 파일로 분리하여 유지보수성을 높일 수 있지만, HTTP 요청 증가로 인해 초기 로딩 시간이 증가할 수 있다.
4. 실시간 진행 상태 업데이트
updateTitle함수를 사용하여 스플래시 화면의 내용을 실시간으로 업데이트할 수 있다.- HTML과 Angular 로직에서 동일한
id를 참조해야 하므로, 일관성이 중요하다. document.getElementById('updater')를 사용하여 DOM 요소를 참조하고textContent를 업데이트한다.
5. 생산성 향상을 위한 고급 기술
- 최초 로딩 후
LocalStorage또는IndexedDB에 초기화 데이터를 캐싱하여 재사용 가능하게 만든다. - Angular Service Worker를 사용하여 스플래시 화면의 HTML, 이미지, 스타일을 캐싱하여 오프라인에서도 빠르게 로딩한다.
결론
- Angular 앱에서 스플래시 화면을 구현하려면
provideAppInitializer와index.html에 직접 스타일 및 스크립트를 삽입하는 것이 효과적이다. updateTitle함수를 활용하여 진행 상태를 실시간으로 업데이트하고,LocalStorage또는Service Worker를 사용하여 성능을 최적화해야 한다.