블로그

illustrations illustrations illustrations illustrations illustrations illustrations illustrations

Vue Table 10만 데이터 로드하기

Published on Jul 06, 2024 by ultrakeypoint on dev Element UI el-table virtual scroll

Vue Table 10만 데이터 로드하기

서비스 초기에는 데이터가 많지 않아 테이블에 데이터를 로드하는 데 이슈가 많지 않습니다. 하지만, 서비스가 한 달, 두 달, 1년, 5년 되다 보면 데이터의 양도 많고 데이터의 종류도 다양해진다. 이번에는 국내에서 활발하게 사용하고 있는 VueJS와 Element UI를 통해서 웹 브라우저에서는 많다고 생각하는 데이터인 10만 개 데이터를 화면에 분할 로드하지 않고 한번에 보여줄 방법을 설명합니다.

핵심 이론은 아래와 같이 데이터를 가공하는 것입니다. 전체 목록의 데이터(rawList) 중 가공할 데이터(viewList)를 찾는 것이다. 위치는 전체 스크롤에서 해당 스크를의 위치에 보여줄 데이터만 계산하면 됩니다.

const rawList = ["ant", "bison", "camel", "duck", "elephant"];
const viewList = rawList.slice(2, 4);

하지만, 우리는 시간도 없고, 고객님은 항상 급해서, 빠르게 만들어야 되기 때문에 패키지를 사용합니다.

예제: virtual scroll 예제
소스: virtual scroll 예제 소스
패키지: el-table, el-table-virtual-scroll

핵심 소스
<virtual-scroll
  :data="list"
  :item-size="62"
  key-prop="id"
  @change="(renderData) => (virtualList = renderData)">
  <el-table
    row-key="id"
    height="500px"
    :data="virtualList">
    <el-table-column
      prop="id"
      label="No"
      width="80" />
    <el-table-column
      prop="date"
      label="Date"
      width="100"></el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="100"></el-table-column>
    <el-table-column
      prop="address"
      label="Address"></el-table-column>
  </el-table>
</virtual-scroll>
`오늘도 울킷!`
도움이 되셨다면, 댓글 부탁 드립니다. :+1:

다른 스토리

다국어 처리 개발 빠르게 하기

다국어 처리 개발 빠르게 하기

웹페이지 전체 중 우리나라 한국말로 작성된 페이지의 총수는 1%도 안 된다는 사실 알고 계셨나요? 전 구글의 디렉터이자, 최초의 비영어권 출신인 로이스 김은 성장하기 위한 3가지 요소를 건강, 네트워크, 그리고 영어라고...

더 보기
Vue Table 10만 데이터 로드하기

Vue Table 10만 데이터 로드하기

서비스 초기에는 데이터가 많지 않아 테이블에 데이터를 로드하는 데 이슈가 많지 않습니다. 하지만, 서비스가 한 달, 두 달, 1년, 5년 되다 보면 데이터의 양도 많고 데이터의 종류도 다양해진다. 이번에는 국내에서...

더 보기
오라클 클라우드 우분투 기본 설정

오라클 클라우드 우분투 기본 설정

오라클 클라우드 컴퓨터 인스턴츠 관리 관련 기본적으로 해야될 설정을 메모합니다. 설정하지 않으면 SSH 사용 시 멈추거나 서버가 다운되는 현상이 있기 때문에 필수사항은 반드시 적용해서 안정적인 서버 운영에 도움되세요

더 보기

`울트라키포인트`에게 메세지 보내기