왜 데이터 그리드인가? 

여러분이 개발자가 아니더라도 데이터 그리드의 패러다임에 친숙할 것입니다. 데이터 그리드는 최대한 많은 데이터를 효율적으로 받아들이고 이해하도록 하는 본능을 자극합니다.

데이터 그리드의 유용성과 보편성은 데이터 그리드가 지금까지 널리 퍼질 수 있도록 해주었지만, 그렇다고 발전이 없는 것은 아닙니다. 디지털 시대가 도래함에 따라 데이터 그리드는 그 어느 때보다 많은 변화를 겪었습니다.

오늘날은 데이터 표시뿐 아니라 편집에도 그리드가 아주 유용한 시대가 되었습니다. Microsoft Word를 사용하여 판매 보고서 또는 월별 예산을 작성하는 것을 상상할 수 있나요? 정렬, 필터링, 자동 완성과 같은 자동 편의 기능과 사용자 정의 수식 같은 고급 기능을 갖춘 Microsoft Excel이 대부분의 사용자에게 자연스러운 선택일 것입니다.

대부분의 사용자는 컴퓨터의 데이터 그리드를 처음 경험했기 때문에 유용하고 시간을 절약하는 기능이 아니더라도 자연스럽게 Excel을 선택할 것입니다. Excel은 익숙합니다. 훌륭한 UX 디자이너나 비즈니스 분석가는 사용자를 교육하는 것이 어렵고 비용이 많이 든다고 말합니다. 일반적으로 데이터 그리드의 최대 장점 중 하나는 직관적이라는 점입니다.

Excel이 데이터 그리드를 사용하는 소프트웨어의 가장 일반적인 예시가 되었지만 이 패러다임은 소프트웨어 분야에서 더욱 강화되어 왔습니다. 웹 애플리케이션이 익숙한 기존의 기본 애플리케이션을 계속 대체함에 따라 데이터 그리드가 웹 애플리케이션 UI에도 적용된다는 것은 당연한 일입니다.

GrapeCity에서는 업계 전반에서 데이터 그리드 UI 컴포넌트를 새로운 웹 앱 프로젝트에 포함시키고 있습니다.

제조 통계를 추적하거나, 재무 데이터를 분석하거나, 판매 보고서를 작성하기 위한 애플리케이션을 구축할 때, 데이터 그리드가 추가할 직관성에 대해 이미 생각해 보셨을 것입니다. 또한 Wijmo의 FlexGrid는 최고의 성능으로 최고의 데이터 그리드 UX를 제공하여 투자 대비 효과를 극대화할 수 있습니다.

FlexGrid와 같은 데이터 그리드 컴포넌트는 인간과 데이터 사이에 자연스럽고 직관적인 인터페이스를 제공합니다.

Wijmo의 FlexGrid: 최고의 데이터 그리드 컴포넌트 솔루션

이제 우리는 데이터 그리드를 사용할 때의 최대 장점이 직관성이라는 것을 압니다. 이는 최종 사용자 경험에 큰 장점이 됩니다. 하지만 애플리케이션을 빌드하고 있는 개발자는 어떨까요?

데이터 그리드 UI 컴포넌트를 처음부터 만드는 것은 모든 개발 팀에게 결코 작은 일이 아닙니다. 애플리케이션을 위한 데이터 그리드를 빌드하는 것은 사용자가 생성하는 다른 UI 컴포넌트를 사용자에게 교육시키는 것만큼 비용이 많이 들 수도 있습니다.

하지만 다행히도 FlexGrid가 있습니다! Wijmo 라이브러리를 애플리케이션으로 가져오고, FlexGrid를 애플리케이션에 추가하며, 데이터 소스에 첨부하기만 하면 됩니다. 간단한 몇 단계만 거치면 애플리케이션에 완전한 기능을 갖춘 데이터 그리드가 포함됩니다!

데이터 그리드 사용의 가장 큰 장점은 더 나은 최종 사용자 경험을 생성한다는 점입니다. 그러한 경우 타사 데이터 그리드 사용의 이점은 더 나은 개발자 경험을 만든다는 점입니다.

Wijmo의 FlexGrid가 기본 Vue 상호 운용성을 통해 개발 워크플로우의 효율성을 최대화하는 몇 가지 방법을 보여 드리겠습니다. 그러나 먼저 FlexGrid를 플러그 가능한 데이터 그리드 컴포넌트로 경쟁 제품과 차별화하는 요소를 살펴보겠습니다.

FlexGrid 패키지 성능 : 작은 사용 공간으로 확장성과 친숙함 제공

Vue의 가장 강력한 데이터 그리드 컴포넌트는 하룻밤 사이에 만들어지지 않았습니다. 사실 FlexGrid는 Wijmo보다 오래되었습니다. FlexGrid는 Visual Basic용 C++를 사용하여 1996년에 처음 작성되었습니다. Visual Studio의 일부로 제공되기도 했죠! 그 후 발전하여 많은 플랫폼에서 개선되었으며, 가장 최근의 모습은 JavaScript입니다.

수십 년에 걸친 사용자 입력과 개선을 통해 광범위하게 문서화된 API가 포함된 고성능 데이터 그리드가 탄생했습니다. 하지만 FlexGrid가 지금까지 그 이름을 유지한 데는 이유가 있습니다. "Flex 철학"을 강조하는 것이 우리의 최우선 과제입니다.

컨트롤에는 필요한 주요 기능만 포함되고 확장성 모델을 통해 그 밖의 모든 기능을 제공해야 합니다.

정렬, 그룹화, 편집, 필터링과 같은 기능이 내장되어 있으며, 원하는 모든 요소는 FlexGrid의 선택적 확장 기능으로 쉽게 구현할 수 있습니다. 이를 통해 컨트롤을 작고 빠르게 유지하고 고객과 우리 모두 고유한 사용자 정의 기능을 빌드할 수 있습니다.

성능

다른 프레임워크와의 손쉬운 통합, 잘 정의된 아키텍처 그리고 Vue의 CLI를 사용하는 Vue 에코시스템의 단순성 때문에 이 프레임워크를 선택하는 Vue 개발자가 많습니다. Wijmo는 빠른 속도와 적은 사용 공간을 유지하면서 Vue 프레임워크에서 제공하는 옵션을 활용하도록 설계되어 있습니다.

Wijmo 개발 팀은 외부 종속성을 요구하지 않으므로 FlexGrid의 사용 공간을 작게 유지합니다. 사실 FlexGrid는 응용 프로그램에 약 25k(gzip으로 압축)만 추가합니다.

그러나 가장 큰 성능 개선은 가상 렌더링을 통해 이루어집니다. FlexGrid는 모든 DOM을 가상화하고 뷰포트를 채우는 데 필요한 셀만 렌더링합니다(원활한 스크롤을 위해 약간의 추가 버퍼 발생). 그리드를 스크롤하면 셀(DOM 요소)이 재순환됩니다. 가상 렌더링은 1초가 안 되는 시간에 그리드가 수백만 개의 레코드에 바인딩할 수 있음을 의미합니다.

친숙함

FlexGrid의 경우 거의 모든 상호 작용 동작이 Excel을 기반으로 하며, 앞에서 언급한 대로 최종 사용자가 사용하는 가장 일반적인 데이터 그리드/데이터 표일 것입니다. 사람들은 스크롤할 때, 클릭할 때, 그리고 특히 클립보드 기능을 포함한 주요 명령을 사용할 때 특정 동작을 기대합니다.

Excel은 자체 동작을 고안하는 대신 최종 사용자가 데이터 그리드 사용을 즉시 편하게 느낄 수 있도록 지원합니다. 놀랍게도 많은 데이터 그리드는 자체 동작을 고안하거나 키보드 동작을 완전히 지원하지 않습니다. 예를 들어 그리드에서 행을 선택하고 아래쪽 화살표 키를 누른 채로 있으면 그리드가 예상대로 작동하지 않을 수 있습니다.

접근성

FlexGrid 컨트롤이 최신의 가장 인기 있는 웹 브라우저 모두에 대한 완벽한 접근성 지원을 제공하게 되어 매우 기쁩니다. 액세스 가능한 데이터 그리드만큼 조밀하고 복잡한 컨트롤을 만드는 것은 어려우며 다른 데이터 그리드 컴포넌트는 FlexGrid 수준의 프레임워크 상호 운용성 및 접근성을 제공하지 못합니다.

FlexGrid를 통해 모든 사용자가 데이터에 액세스할 수 있는 방법에 대한 자세한 내용은 FlexGrid에 접근성 추가하기 블로그를 참조하세요. 독립 실행형 접근성 팀의 여부와 관계없이 FlexGrid를 사용하여 애플리케이션이 최신 표준을 준수하는지 확인할 수 있습니다.

FlexGrid 와 Vue

FlexGrid는 Vue의 강력한 고성능 프레임워크와 원활하게 통합되는 것 이상의 역할을 합니다. 데이터 그리드 컴포넌트를 사용하면 웹 응용 프로그램 UI에 데이터 그리드를 재미있고 쉽고 간편하게 추가할 수 있습니다.

이제 FlexGrid의 Vue 상호 운용성 이점을 보여주는 몇 가지 구체적인 예를 살펴보겠습니다.

데이터 그리드 예 : vue create로 시작 및 실행

Wijmo는 FlexGrid를 포함한 모든 컴포넌트에 대해 CommonJS 및 ES 모듈과 함께 제공됩니다!

FlexGrid를 사용하는 것이 얼마나 쉬운지 설명하기 위해 응용 프로그램에 Wijmo를 포함하여 Vue 앱을 설정하고 데이터로 가득 찬 그리드를 화면에 렌더링하는 과정을 살펴보겠습니다.

먼저 자체 Vue 응용 프로그램을 만들어야 합니다. 프로젝트를 실행할 위치에서 다음 명령을 실행하여 만들 수 있습니다.

vue create flexgrid-app

이렇게 하면 "flexgrid-app"이라는 Vue 응용 프로그램이 설정됩니다.

다음으로 응용 프로그램에 Wijmo를 설치합니다. Vue 응용 프로그램을 빌드 중이므로 Vue 모듈만 포함하면 됩니다. 이 작업은 다음 명령을 사용하여 수행됩니다.

npm install @grapecity/wijmo.vue2.all

축하합니다! 이제 FlexGrid와 해당 API를 포함한 Wijmo의 전체 UI 라이브러리에 액세스할 수 있습니다. HTML 마크업에서 직접 사용할 수 있습니다! 관련 내용은 다음에 알아보겠습니다.

HTML 마크업에서 FlexGrid 선언

위에서 설명한 작업을 계속하면서 Wijmo 코드를 Vue 응용 프로그램으로 가져왔으므로 FlexGrid를 렌더링할 수 있는 방법을 알아보겠습니다.

실제 코드를 작성하기 전에 FlexGrid가 올바르게 표시되도록 Wijmo의 CSS 파일과 함께 사용할 컴포넌트를 가져와야 합니다.

import "@grapecity/wijmo.styles/wijmo.css";
import "@grapecity/wijmo.vue2.grid";
import * as wjcCore from "@grapecity/wijmo";

또한 App.vue 파일에는 몇 가지 기본 마크업이 있습니다. 기본 마크업을 삭제하고 다음으로 바꾸세요.

<template>
  <wj-flex-grid :itemsSource="data"></wj-flex-grid>
</template>

3줄짜리 코드 조각에서 많은 일이 진행되고 있습니다. 마크업에서 컴포넌트를 선언하는 것이 중요한 이유에 대해 이야기하기 전에 예제를 마치겠습니다. 아직 FlexGrid를 제대로 로드하지 못했을 수 있는 부분이 하나 있습니다.

itemsSource 속성이 "data" 변수를 참조한다는 것을 눈치채셨을 것입니다. 현재 응용 프로그램에 대해 정의된 데이터 변수가 없으므로 FlexGrid는 데이터 없이 렌더링됩니다! 이 문제를 해결하기 위해 데이터 그리드에 몇 가지 모의 데이터를 추가할 것입니다. App.vue 파일에 다음을 추가하면 됩니다.

data: function() {
  return {
      data: new wjcCore.CollectionView(getData(), {}),
  }
},
methods: {
  getData: function() {
      return [
          { id: Math.floor(Math.random() * 1000), customer: 'Gia Shields', sale: Math.random() * 100000 },
          { id: Math.floor(Math.random() * 1000), customer: 'Jayden Foster', sale: Math.random() * 100000 },
          { id: Math.floor(Math.random() * 1000), customer: 'Selena Casey', sale: Math.random() * 100000 },
  ]
}

이제 npm run serve를 실행하여 앱을 실행하고 FlexGrid의 모든 장점을 확인해 보세요! Vue에서 FlexGrid가 제공하는 흥미로운 기능을 살펴보기 전에 마크업에서 복잡한 데이터 그리드 컨트롤을 완전히 선언할 수 있다는 의미에 대해 생각해 보세요.

선언적 마크업은 MVVM 설계 패턴을 따르는 데 이상적이며 보기(마크업) 내에서 컴포넌트를 완전히 구성할 수 있습니다. FlexGrid는 확장되지 않은 자연스러운 HTML 마크업을 사용하여 전체 API를 선언할 수 있도록 지원합니다. 마크업에서 속성을 설정하고 이벤트를 첨부하며 열 등의 하위 컴포넌트를 구성할 수도 있습니다.

FlexGrid API 이벤트를 컴포넌트 기능에 쉽게 바인딩할 수 있습니다.

FlexGrid 속성을 컴포넌트 상태에 연결하는 것이 너무 쉽기 때문에 FlexGrid 이벤트를 처리기 함수에 연결하는 것도 간단해야 합니다. App.vue 파일의 데이터가 속성을 통해 FlexGrid에 전달될 수 있는 것처럼 컴포넌트 함수는 FlexGrid 이벤트의 처리기로 전달될 수 있습니다.

시연을 위해 예제에 새 기능을 추가해 보겠습니다. 일부 데이터가 포함된 FlexGrid는 이미 작동 중이므로 FlexGrid API가 즉시 지원하는 수십 개의 이벤트에 액세스할 수 있습니다. 사용자가 데이터 그리드에서 셀 편집을 시작할 때 설명 메시지를 표시하기 위해 beginningEdit과 cellEditEnded 이벤트 중 두 가지를 사용하겠습니다.

먼저 편집 모드에서 셀 좌표와 함께 셀이 편집되고 있는지 여부를 추적하기 위해 Vue 파일에 새 변수를 몇 개 추가해야 합니다.

data: function() {
  return {
      data: [
          { id: Math.floor(Math.random() * 1000), customer: 'Gia Shields', sale: Math.random() * 100000 },
          { id: Math.floor(Math.random() * 1000), customer: 'Jayden Foster', sale: Math.random() * 100000 },
          { id: Math.floor(Math.random() * 1000), customer: 'Selena Casey', sale: Math.random() * 100000 },
      ],
      cellEditEnd: false,
      editingCell: '',
  }
}

기본적으로 앱이 로드되면 셀이 편집 모드일 수 없다고 가정합니다. 다음으로, 셀이 편집 모드에 있을 때 보이는 요소를 추가하고 편집 중인 셀이 없을 때는 숨깁니다. 사용자에게 추가 컨텍스트를 제공하기 위해 요소의 텍스트에는 편집 중인 셀의 좌표가 포함됩니다.

도움이 되는 텍스트가 눈에 띄도록 h5 태그에 배치합니다. FlexGrid HTML 마크업 바로 아래에 다음 내용을 추가합니다.

<h5>
  Currently editing cell at
</h5>

해당 코드 전체는 Vue의 아주 기본적인 부분입니다. 아주 쉽지요! 이제 마지막을 장식하기 위해 우리가 만든 변수를 FlexGrid 이벤트에 연결합니다. 여기에는 복잡하면서 관찰 가능한 처리기가 필요합니다. 과연 그럴까요?

아닙니다! 사용자가 직접 작성한 Vue 컴포넌트에서 기대하는 것처럼 FlexGrid 이벤트를 컴포넌트 클래스 함수에 연결할 수 있습니다. 먼저 처리기 함수를 앱 클래스에 추가합니다.

methods: {
  beginningEdit: function(grid) {
      this.cellEdit = true;
      this.editingCell = '{' + grid.selection.col + ', ' + grid.selection.row + '}';
  },
  endingEdit: function() {
      this.cellEdit = false;
  }
}

다시 말씀드리면, 간단한 일부 Vue 컴포넌트 함수는 셀 편집 여부에 따라 상태를 업데이트하도록 설계되었습니다. beginningEdit 함수에 전달되는 그리드 개체에 유의하세요. FlexGrid에서는 모든 이벤트 처리기에 관련 컨텍스트를 자동으로 전달합니다. 특정 이벤트에 대해 어떤 정보가 전달되는지 알아보려면 FlexGrid API 문서를 참조하세요.

이 유용한 새 기능을 끝내려면 FlexGrid에게 이벤트 처리기를 호출하도록 지시해야 합니다. 다행히 FlexGrid는 기본 Vue 컴포넌트이므로 이러한 처리기를 마크업으로 쉽게 연결할 수 있습니다. FlexGrid 선언에 다음 속성을 추가하면 됩니다.

<wj-flex-grid :itemsSource="data" :beginningEdit="beginningEdit" :cellEditEnding="endingEdit"></wj-flex-grid>

모든 준비가 완료되면 브라우저에서 FlexGrid를 사용하여 앱을 실행할 수 있습니다! 실행 중인 이벤트를 보려면 FlexGrid의 셀을 두 번 클릭하면 됩니다. beginningEdit 이벤트가 즉시 전달되고 앱의 변수 상태가 업데이트되어 적절한 셀 좌표가 있는 레이블이 표시됩니다. 그리드 외부를 클릭하면 레이블이 사라집니다.

데이터 바인딩으로 FlexGrid 자동 업데이트

이제 앱이 FlexGrid 컴포넌트의 데이터 표시를 처리하고 사용자의 편집 이벤트에 응답하므로 사용자가 판매 데이터 목록에 다른 판매를 추가할 수 있는 양식을 제공하는 것이 도움이 될 수 있습니다. 상태를 업데이트하기 위한 양식을 제공하는 것은 어렵지 않습니다. 하지만 변경 사항이 데이터 그리드 컴포넌트로 전파되도록 하려면 어떻게 해야 할까요?

데이터 그리드의 데이터가 이미 컴포넌트 내 속성에 바인딩되어 있기 때문에 앱이 해당 속성을 업데이트하면 FlexGrid가 그에 따라 업데이트됩니다. 시스템의 각 사용자는 주문 ID, 고객 이름, 판매 가격의 3가지 고유한 특성을 가지므로 App.vue 파일에 해당하는 3개의 새 속성을 추가합니다.

saleId: null,
customerName: '',
saleAmount = null

다음으로 '사용자 추가' 양식의 입력으로 속성을 업데이트하고 응용 프로그램 컴포넌트가 상태 저장 데이터 배열에 새 개체를 추가할 수 있도록 하는 몇 가지 빠른 함수를 추가합니다.

addSale() {
  if(this.saleId == null || this.customerName.length == 0 || this.saleAmount == null) {
      return;
  }
  this.data.items.push({ id: +this.saleId, customer: this.customerName, sale: +this.saleAmount });
  this.data.refresh();
  this.saleId = null;
  this.customerName = '';
  this.saleAmount = null;
}

다시 말해, 이러한 기능은 컴포넌트가 응용 프로그램을 특정 방식으로 업데이트할 수 있도록 하는 오래된 일반 Vue 컴포넌트 클래스 함수일 뿐입니다. 마지막 단계는 양식에 대한 실제 마크업을 추가하는 것입니다.

<h4>Add Sale</h4>
<div>
  <label htmlFor="saleId">Sale ID: </label>
  <input type="text" id="saleId" v-model="saleId">
</div>
<div>
  <label htmlFor="customerName">Customer Name: </label>
  <input type="text" id="customerName" v-model="customerName">
</div>
<div>
  <label htmlFor="saleAmount">Sale Amount: </label>
  <input type="text" id="saleAmount" v-model="saleAmount">
</div>
<button v-on:click="addSale()">Add Sale</button>

이제 계속해서 앱을 시작할 수 있습니다. 사용자로부터 3개의 입력을 수신하는 간단한 양식을 볼 수 있습니다. 작성 후 "판매 추가" 버튼을 클릭하면 그리드가 방금 추가한 새 판매 정보로 즉시 업데이트됩니다. 이것이 기본 양방향 데이터 바인딩을 지원하는 FlexGrid의 마법입니다.

이렇게 하면 완료된 것입니다! FlexGrid와 Vue를 통해 쉽고 빠르며 자연스러운 양방향 데이터 바인딩이 가능합니다! 더 많은 코드를 제공하지는 않겠지만 마지막으로 FlexGrid를 사용하여 더 쉽게 수행할 수 있는 방법이 있습니다. 관심이 있으면 FlexGrid의 allowAddNew 속성을 확인하세요.

나만의 FlexGrid 앱을 빌드해 보세요.

저처럼 Vue의 열렬한 팬이고 위의 FlexGrid 예제에 관심이 있으면 Wijmo 를 직접 사용해 보세요! Wijmo를 사용하여 UI 개발 워크플로를 강화하는 수천 명의 사용자, 회사와 함께 해보세요.

"우리는 Wijmo를 구입했는데 Wijmo 팀에서는 뛰어난 디자인, 세심한 아키텍처, 문서화, 다른 것과는 달리 계속 변화하는 환경에 대처할 수 있는 능력 등을 포괄하는 탁월한 제품을 만들었습니다." -Bj Jeoing, Cisco

GrapeCity는 20년 동안 그리드를 개선하는 것을 멈추지 않았으며 앞으로도 그럴 것입니다. 

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

• Wijmo 공식 홈페이지
• Wijmo 튜토리얼 및 샘플
• Wijmo Q&A
• Wijmo FAQ