Vue Datagrid 응용 프로그램을 최적화하고 만드는 방법 > 시티즌 인사이트

본문 바로가기

시티즌 커뮤니티

시티즌 인사이트

IT&개발 정보 Vue Datagrid 응용 프로그램을 최적화하고 만드는 방법

페이지 정보

작성자 GrapeCity 작성일 22-05-30 11:42 조회 189회 댓글 0건

본문

최적화는 인터넷 응용 프로그램을 구축할 때 디자인 프로세스의 중요한 부분입니다. 연구에 따르면 웹사이트에서 페이지를 로드하는 데 걸리는 이상적인 시간은 2~3초라고 합니다. 이 시간보다 더 길어지면 사용자가 페이지 로드 전에 해당 페이지를 떠날 가능성이 많이 늘어나고 더 빨리 로드되는 페이지에서는 사용자 기반의 광고 수익이 늘어난다고 합니다.

모바일 장치에서 페이지를 방문하는 경우 최적화는 훨씬 중요한 문제가 됩니다. 로드 시간이 길어지면 데스크톱에서 로드하는 페이지의 경우보다 이탈률이 훨씬 높아집니다. 모바일 장치에서 사이트에 방문하는 사용자 수가 늘어남에 따라 Google은 모바일 우선 인덱싱 선호로 방향을 전환했습니다. 즉, Google이 Googlebot의 스마트폰 에이전트 기반의 웹사이트 인덱싱을 더 선호하게 됨에 따라 최적화가 훨씬 더 중요해졌다는 의미입니다.

오늘날의 대형 응용 프로그램은 대용량 데이터 집합과 번들을 취급하고 복잡한 계산을 수행합니다. 다행히 Vue와 Wijmo의 Vue DataGrid, FlexGrid에서 Vue DataGrid 응용 프로그램을 최적화할 수 있는 옵션을 제공합니다.

다음은 Vue 데이터그리드 응용 프로그램을 최적화하고 만들기 위한 5단계입니다.

  1. Observable에서 구독 취소

  2. 경로로 코드를 분할하여 번들 크기를 작게 유지

  3. 모듈 지연 로드

  4. FlexGrid 가상화로 DOM 요소 감소

  5. 요소가 다시 렌더링되지 않도록 방지

Vue에서 FlexGrid를 쉽게 사용할 수 있으며 재미있기도 합니다!


Observable에서 구독 취소

Observable은 말하는 그대로 합니다. 즉, 사용자가 관찰하고 해당 조치를 취하려는 것입니다. 개발자는 Observable을 사용하여 데이터를 응용 프로그램과 응용 프로그램 주위로 쉽게 전달할 수 있습니다. Vue에서는 이벤트 처리, 비동기 프로그래밍 그리고 다양한 데이터 집합 관리에 사용됩니다. 그러나 Observable을 잘못 사용하면 성능이 저하되고 심각한 메모리 관리 문제가 발생할 수 있습니다.

Observable을 사용할 때는 데이터를 얻고 변동이 있는지 확인하기 위해 subscribe 메서드를 사용하는데, 이 모두가 비동기로 이루어집니다. 일반적으로 사용자는 데이터를 얻기 위해 HTTP 호출을 수행하는 서비스의 메서드를 구독하며, 대부분의 경우 이 작업은 컴포넌트의 created() 메서드 내에서 수행됩니다.

<template>
   ...
</template>
<script>
import { mockService } from '@/services';
export default {
   name: 'mock-component',
   data() {
       return {
           apiData: []
      };
  },
   created() {
       this.mockSubscription = mockService.getAPIData().subscribe(data => {
           this.apiData = data;
      });
  }
};
</script>


완료되면 이제 API에서 데이터에 비동기식으로 액세스하고 구독을 통해 데이터에 대한 변경 내용을 모두 수신할 수 있습니다. 그러나 unsubscribe() 메서드라는 중요한 세부 정보가 누락되었습니다. 연결에서 벗어나더라도 컴포넌트 설정과 구독 연결이 계속 유지됩니다. 이는 메모리 누수로 이어지고 심각한 성능 문제를 일으킬 수 있습니다.

이 컴포넌트가 로드된 상태에서는 이 연결이 계속 유지되기를 원하므로 우리는 DOM에서 컴포넌트가 제거되어 구독이 취소될 때까지 계속 기다릴 것입니다. Vue에서는 이렇게 할 수 있는 beforeDestroy()라고 하는 라이프사이클 후크를 제공합니다.

<template>
   ...
</template>
<script>
import { mockService } from '@/services';
export default {
   name: 'mock-component',
   data() {
       return {
           apiData: []
      };
  },
   created() {
       this.mockSubscription = mockService.getAPIData().subscribe(data => {
           this.apiData = data;
      });
  },
   beforeDestroy() {
       this.mockSubscription.unsubscribe();
  }
};
</script>


사용자가 이 컴포넌트에서 나가면 응용 프로그램은 Observable에서 구독을 취소하여 연결을 닫고 메모리 누수를 방지합니다. Observable에 대해 자세히 알아보려면 추가 정보를 제공하는 RxJS 문서를 참조하세요.


경로로 코드를 분할하여 번들 크기를 작게 유지

웹 사이트를 만드는 경우 대부분은 사이트에 페이지가 여러 개 있습니다. 이 예에서 응용 프로그램에는 정보(About) 페이지가 있습니다. 페이지는 두 개뿐이지만 응용 프로그램 내에서 라우터를 구현해야 합니다.

import HomePage from './HomePage.vue';
import AboutPage from './AboutPage.vue';

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage }
];


Vue에서 라우터를 구현할 때 기본적인 방법을 사용합니다. HomePage 및 AboutPage 컴포넌트는 사용자가 연락처 페이지 등과 같은 다른 페이지를 방문하더라도 다운로드 됩니다. 응용 프로그램을 빌드할 때 HomePage 및 AboutPage 컴포넌트는 동일한 번들에 포함됩니다. 페이지가 2~3개인 작은 응용 프로그램의 경우 이는 문제가 되지 않을 수 있지만 응용 프로그램이 더 커져 번들 크기가 늘어나면 이로 인해 사용자가 응용 프로그램을 로드하려고 할 때 로딩 시간이 늘어날 수 있습니다.

동시에 로드할 필요가 없는 컴포넌트를 함께 번들링하지 않기 위해 동적 가져오기를 사용하여 코드를 각 경로에 대해 개별 번들로 분할할 수 있습니다.

const routes = [
  { path: '/', component: () => import('./HomePage.vue') },
  { path: '/about', component: () => import('./AboutPage.vue') }
];


import() 메서드를 사용하여 컴포넌트를 가져오면 응용 프로그램을 빌드할 때 컴포넌트를 별도 번들로 분할하여 번들 크기가 줄어듭니다. 따라서 사용자가 이동하는 페이지를 기반으로 필요한 코드가 있는 번들만 로드하여 응용 프로그램 로드 시간이 단축됩니다.


모듈 지연 로드

이전 섹션에서는 라우팅과 함께 코드 분할을 사용하여 기본 번들을 더 작은 번들로 나눠 번들 크기를 줄이는 방법에 대해 살펴보았습니다. 멋진 점은 단순히 라우팅을 사용하여 번들 파일을 분할하는 데 그치지 않는다는 사실입니다. 라우팅을 사용하여 분할했을 때와 같은 방식으로 모듈을 지연 로드하여 번들 파일을 나눌 수도 있습니다.

<template>
   ...
</template>
<script>
export default {
   name: 'mock-component',
   data() {
       ...
  },
   components: {
       UserComponent: () => import('./UserComponent.vue')
  }
}
</script>


응용 프로그램 로드 시 UserComponent 컴포넌트는 별도 번들 내에 배치됩니다. 해당 번들은 응용 프로그램 및 기본 번들 파일이 로드될 때가 아니라 MockComponent가 로드될 때 로드됩니다.

그런데 이 방법에는 한 가지 단점이 있습니다. 사용자의 연결 속도가 느리거나, 로드 중인 번들 파일이 크면 페이지의 일부 요소가 동시에 로드되지 않습니다. 이 예에서 사용자는 페이지가 로드될 때와 UserComponent가 페이지로 로드될 때 사이에 지연을 경험할 수 있습니다. 때문에 모든 컴포넌트를 지연 로드하는 것은 좋은 방법이 아닙니다. 따라서 어떤 모듈이 즉시 필요하지 않은지 정확하게 파악하여 즉시 필요한 모듈은 기본 번들 파일에 포함하고 그 외 번들은 지연 로드해야 합니다.


FlexGrid 가상화로 DOM 요소 감소

Wjimo의 Vue DataGrid인 FlexGrid의 기본 목적은 JavaScript 객체를 사용자가 조작할 수 있는 DOM 요소로 변환하는 것입니다. 많은 인스턴스에서 이 데이터는 수백, 수천 또는 수백만 행의 데이터로 구성됩니다. 따라서 이러한 각 항목에 대해 DOM 요소를 생성할 경우 리소스를 많이 소모하게 되어 페이지 속도가 느리고 비대해질 수 있습니다.

가상화는 사용자에게 보이는 데이터 부분을 추적하고 해당 섹션만 DOM에서 렌더링하는 프로세스입니다. 이렇게 하면 특히 방대한 데이터 집합으로 작업할 때 문서 트리의 DOM 요소 수가 감소하고 성능이 훨씬 향상됩니다.

Wijmo는 viewRange 속성을 통해 데이터의 보이는 부분을 노출합니다. 사용자가 화면 크기를 변경하거나 그리드를 스크롤할 때마다 viewRange도 업데이트되어 DOM을 업데이트하게 됩니다. DOM의 요소 수가 증가하는 것을 방지하기 위해 FlexGrid는 viewRange에서 벗어나는 셀을 가져와 재활용함으로써 저장하고 있던 데이터에서 제거하고 viewRange로 들어오는 새 데이터로 다시 채웁니다. 이를 통해 DOM을 간단하게 만들고 응용 프로그램을 빠르고 가볍게 유지합니다.

이 샘플에서 관련 내용을 확인할 수 있습니다.

빠른 Vue Datagrid

보다시피 현재 그리드에는 100개의 데이터 행이 있고 60개의 셀 요소만 DOM에 의해 렌더링되고 있습니다. 다음 코드를 사용하여 이 수치를 얻을 수 있습니다.

flexgrid.updatedView.addHandler((s, e) => {
   this.rowCount = s.rows.length.toString();
   this.cellCount = s.hostElement.querySelectorAll(".wj-cell").length.toString();
});


s.hostElement.querySelectorAll('.wj-cell') 메서드는 .wj-cell 클래스가 추가되어 DOM에서 렌더링된 요소의 배열을 반환합니다. 그리드를 아래로 스크롤하면 FlexGrid 내의 데이터 행 수는 늘어나고 셀 요소 수는 그대로인 것을 확인할 수 있습니다.

빠른 Vue Datagrid


요소가 렌더링되지 않도록 방지

페이지의 요소가 바뀌면 응용 프로그램은 DOM에서 요소를 살펴보고 렌더링합니다. 정기적으로 변경되는 컴포넌트가 포함된 페이지가 있는 경우 응용 프로그램에서 렌더링을 수행해야 합니다. 그러나 페이지에 초기에 렌더링된 이후에는 절대 바뀌지 않는 부분이 있는 경우가 있습니다. 바뀌지 않는다는 점을 알고 렌더링으로 인해 응용 프로그램의 성능이 저하되기 때문에 응용 프로그램에서 해당 부분을 렌더링할 필요가 없습니다. 다행히 Vue에서는 v-once라는 지시문을 제공하여 요소를 한 번만 렌더링하도록 응용 프로그램에 지시합니다.

컴포넌트 내 요소에 v-once 지시문을 추가하면 응용 프로그램에서 살펴보고 렌더링을 수행할 때 v-once로 표시된 요소는 건너뜁니다. 따라서 응용 프로그램의 성능을 최적화할 수 있습니다.

<template>
   <div>User Information:</div>
   <UserInfo v-once></UserInfo>
</template>


UserInfo 컴포넌트에는 v-once 지시문을 첨부했으므로 컴포넌트가 다시 렌더링될 때마다 UserInfo 컴포넌트를 건너뛰고 DOM에서 다시 렌더링하지 않습니다.

이제 이 모든 도구를 마음대로 사용함으로써 사용자가 응용 프로그램에서 작업할 때 Vue가 수행해야 할 작업량을 줄이면서 컴포넌트를 렌더링하고 제거할 때 브라우저의 DOM 부하를 줄일 수도 있습니다.




지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!

wj.png

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.