[Vuejs] Vuetify 를 활용한 Lazy Loading 구현하기

문제인식

• 고객 유입량 급증에 따른 메인 화면 비정상 미출력
  • WAS 커넥션 MAX 초과에 따른 https api 호출 대기에 따른 pending
• 메인 화면에서는 10개의 rest API를 비동기, 동시 호출
  • Was to 대외기관 Web Server
• API 비동기 호출을 유지하면서 WAS 커넥션 부하를 방지할 수 있는 방안을 찾아보자.

해결방안

1. 동기 호출을 통한 동시 점유 커넥션 개수 감소 => 화면 출력 속도 저하
2. scroll 이동을 통해 모바일 웹뷰와 데이터 출력 필요 영역이 교차되는 순간, 데이터 출력을 위한 로직 수행 => Lazy Loading

Lazy Loading (지연 로딩) 이란?

웹뷰에 출력되는 영역을 먼저 로드하고, 그 외 영역은 출력이 필요할 때까지 지연시키는 방식

솔루션

• Intersection Observer API 활용
• Vuetify 에서 제공하는 v-intersect 속성을 통한 Lazy Loading 구현

샘플소스

<!-- 데이터 출력 필요 영역 감지 -->
<div>
	<CrdScoreCmprDtl :crd-score-cmpr="dataCrdScoreCmpr"></CrdScoreCmprDtl>
    <v-btn v-intersect.once="onLazyLoad">...</v-btn>
</div>

methods: {
  	/**
     * 웹뷰에서 v-intersect 영역 교차 시, onLazyLoad 함수 호출
     * @param {object} entries IntersectionObserverEntry Array
     * @param {object} observer IntersectionObserver Array
     * @param {boolean} isIntersecting 특정영역교차여부
     */
	onLazyLoad(entries, observer, isIntersecting) {
      	if (isIntersecting) {
    		this.callCrdScoreCmpr();
        }
    },
},

결론

• 웹뷰에서 여러 API를 동시에 호출할 때, Lazy Loading을 적용하면 WAS 커넥션 부하를 줄일 수 있다.
  • 특정 시점에 필요한 API 호출하기 때문
• Vuetify에서 제공하는 v-intersect로 간편하게 Lazy Loading을 구현할 수 있다.

참고

• vuetify v-intersect 참고 문서
• lazy loading을 한번만 호출하기 위해 v-intersect.once 활용