프론트엔드 개발자로서 GraphQL은 더할 나위 없이 훌륭해 보이죠. GraphQL을 사용해 데이터 액세스를 단순화하여 작업을 훨씬 쉽게 수행할 수 있습니다.

GraphQL이란?

GraphQL은 임의의 수의 데이터 소스 위에 놓이는 추상화 레이어이며, 제공되는 간단한 API로 모든 기능을 이용할 수 있습니다.

GraphQL의 장점은 서버에서 반환받을 데이터 및 데이터의 형식을 지정할 방식을 정확하게 정의할 수 있다는 것입니다. 또한 단일 요청으로 많은 소스에서 데이터를 가져올 수 있습니다. GraphQL은 유형 시스템을 사용해 더 나은 오류 확인 및 메시지 기능을 제공합니다.

아주 기본적인 GraphQL 샘플을 살펴보겠습니다.

다음 URL의 서비스가 사용됩니다.

https://demodata.grapecity.com/northwind/graphql

GraphQL에는 쿼리를 테스트하기에 좋은 UI도 있어 매우 편리합니다.

> 쿼리 테스터 바로 가기

이 예에서는 Microsoft에서 제공하는 기본 Northwind 데이터베이스를 사용합니다.

제품 ID 및 이름 필드만 필요하다고 가정합니다. 사용할 쿼리는 다음과 같습니다.

{
  products {
    productId
    productName
  }
}

다음은 쿼리 테스터의 결과입니다.

GraphQL은 이렇게나 간단합니다.

JavaScript 응용 프로그램에서 GraphQL을 사용하고 강력한 JavaScript DataGrid(FlexGrid)를 데이터에 바인딩하겠습니다.

간단한 이 응용 프로그램에서는 가져오기 API를 사용해 GraphQL 서비스를 호출합니다. > 라이브 샘플 및 코드(Code)를 통해서 확인할 수 있습니다.

위와 유사한 쿼리를 사용하지만 필드를 몇 개 추가하겠습니다.

가져오기 요청은 다음과 같습니다.

fetch("https://demodata.grapecity.com/northwind/graphql", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 Accept: "application/json"
 },
 body: JSON.stringify({
 query:
 "{ products { productId, productName, unitPrice, unitsInStock, unitsOnOrder, reorderLevel, discontinued, categoryId }}"
 })
})

JS 콘솔을 보면 바인딩하기 위해 사용할 수 있는 제품의 배열과 함께 반환된 결과를 확인할 수 있습니다.

해당 데이터에 적절한 사용자 인터페이스를 제공할 수 있도록 응용 프로그램에 Wijmo를 추가하겠습니다.

Wijmo를 사용하려면 다음 명령을 사용하십시오.

npm install @grapecity/wijmo.all

먼저, Wijmo CSS를 @grapecity/wijmo 및 @grapecity/wijmo.grid 모듈과 함께 가지고 와야 합니다.

이번 사례에서는 응용 프로그램의 index.ts 파일에 다음을 추가합니다.

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

또한 FlexGrid에는 호스팅할 DOM 요소가 필요합니다.

따라서 index.html 파일에 빈 <div> 을(를) 고유 ID와 함께 추가합니다.

<div id="results"></div>

이제 두 개의 컴포넌트를 만들 수 있습니다.

1. CollectionView - 데이터로 채우고 그리드를 바인딩할 식별 가능한 컬렉션(배열)입니다.

2. FlexGrid - 데이터를 표시하는 데 사용되는 JavaScript DataGrid입니다.

두 컴포넌트를 초기화하고 CollectionView에 그리드를 바인딩할 수 있는 방법은 다음과 같습니다.

let productView = new wjcCore.CollectionView([]);

let grid = new wjcGrid.FlexGrid("#results");
grid.itemsSource = productView;

이제 데이터와 컴포넌트가 있으며, 모두 통합할 수 있습니다.

가져오기 호출 후에는 then() Promise를 추가해 JSON으로 변환하고 CollectionView를 결과로 채워 줍니다.

fetch("https://demodata.grapecity.com/northwind/graphql", {
 ...
})
 .then(r => r.json())
 .then(data => bindData(data));

function bindData(data) {
 productView.sourceCollection = data.data.products; //populate CollectionView with results
}

DataGrid가 이미 CollectionView에 바인딩되어 있고 CollectionView가 식별 가능하므로, CollectionView가 채워지면 그리드에서 곧바로 데이터를 렌더링합니다. 식별 가능한 컬렉션 및 이를 지원하는 컴포넌트를 사용하면 다음과 같은 장점이 있습니다.

한 컴포넌트의 최신 정보가 다른 컴포넌트에 자동으로 전파되므로 진정한 데이터 바인딩이 됩니다.

그리드는 다음과 같이 렌더링됩니다.

그리고 약간의 코드를 사용하면, 모든 기능을 갖춘 DataGrid를 GraphQL 소스에 바인딩할 수 있습니다! GraphQL과 Wijmo와 같은 강력한 컴포넌트를 함께 사용하면 생산성이 매우 높습니다.

이 응용 프로그램을 직접 사용해 보려면 라이브 샘플 및 코드(Code)를 참고하시기 바랍니다.

고급 DataGrid 및 GraphQL 기능 

GraphQL 및 Wijmo의 기능을 더 사용하여 한 단계 더 나아가보겠습니다!

조회 테이블 및 DataMap

GraphQL의 흥미로운 기능 중 하나는 여러 다양한 쿼리를 단일 요청으로 집계하는 기능입니다. 이 기능은 서버로의 왕복 이동을 최소화하여 응용 프로그램의 대응 속도를 향상하는 데 사용됩니다.

서버로 여러 번 왕복 이동하는 방식이 적절할 수 있지만, 이 기능은 매우 간편하게 사용할 수 있는 기능입니다. 이 예에서는 제품을 로드했습니다. 또한 각 제품이 다른 데이터 집합의 범주와 연결되어 있기 때문에 각 제품의 categoryID를 가져왔습니다.

categoryID는 Category를 조회하는 데 사용됩니다. GraphQL의 장점은 한 쿼리로 제품과 범주를 모두 로드할 수 있다는 점입니다.

다음과 같이 범주를 포함하도록 쿼리를 확장하겠습니다.

{
  products {
    productId
    productName
    unitPrice
    unitsInStock
    unitsOnOrder
    reorderLevel
    discontinued
    categoryId
  }
  categories {
    categoryId
    categoryName
  }
}

이 쿼리를 쿼리 테스터에 입력하면 두 개의 배열(하나는 제품용이며 다른 하나는 카테고리용)을 얻을 수 있음을 알 수 있습니다.

Categories 및 Products를 로드하므로, 다른 CollectionView가 필요합니다.

let categoryView = new wjcCore.CollectionView();

그리고 FlexGrid는 DataMaps라는 API를 사용하여 조회 테이블을 지원합니다. DataMap을 사용해 인덱스 열을 지정하면 텍스트 값을 조회할 수 있으며, 사용 가능한 옵션이 모두 나열된 간편한 드롭다운 편집기가 자동으로 표시됩니다.

이 기능을 사용하기 위해, DataMap을 만들어 새로운 Category CollectionView에 바인딩합니다.

let categoryMap = new wjcGrid.DataMap(
  categoryView,
  "categoryId",
  "categoryName"
);

마지막으로 그리드의 Category 열을 새 DataMap에 지정합니다.

let grid = new wjcGrid.FlexGrid("#results", {
  columns: [
    ...
    {
      header: "Category",
      binding: "categoryId",
      dataMap: categoryMap
    },
    ...
  ]
});

결과를 살펴보겠습니다.

Category 열에 CategoryID만 표시되는 대신 관련된 Category Name이 표시됩니다. 그리고 셀을 편집하는 경우 선택 가능한 모든 Category의 목록이 표시됩니다.

이 방법으로 GraphQL 및 Wijmo에서 조회 테이블을 간단하게 구현할 수 있습니다!

형식이 지정된 데이터

GraphQL의 또 한 가지 멋진 기능은 형식이 지정된 데이터 구조를 포함한다는 것입니다. 데이터에 형식이 지정된 개체를 사용하여 데이터 유형을 기반으로 더 나은 서식 및 편집기를 제공합니다.

형식이 지정된 값

먼저, 더 사용자 친화적으로 보이도록 데이터의 형식을 지정하겠습니다. Wijmo에는 globalization API를 사용하는 형식이 기본으로 제공됩니다. 따라서 값의 형식이 현재 문화에 따라 지정됩니다.

FlexGrid에서는 형식을 지정하려는 열에 형식 속성을 제공하는 것과 같이 간단하게 형식을 지정할 수 있습니다. 형식 구문은 .net 표준을 기반으로 합니다. FlexGrid는 또한 데이터의 첫 번째 행을 기반으로 dataType을 추론하지만, 형식 지정 또는 특수 편집기가 필요한 열에 dataType을 명시적으로 설정하는 것이 가장 좋습니다.

여기서는 세 개의 숫자 열을 하나의 Number 유형으로 설정합니다. Price 열의 형식은 두 개의 소수 자릿수를 표시하는 통화(형식: "c")로 설정합니다.

그런 다음, Stock 및 On Order 열을 소수 자릿수를 표시하지 않는 숫자 형식(형식: "n0")으로 설정합니다. 통화의 경우 소수 자릿수를 표시하는 것이 중요하지만, 정수 값만 갖는 항목에는 소수 자릿수를 표시해서는 안 됩니다.

let grid = new wjcGrid.FlexGrid("#results", {
  columns: [
    ...
    {
      header: "Price",
      binding: "unitPrice",
      dataType: wjcCore.DataType.Number,
      format: "c"
    },
    {
      header: "In Stock",
      binding: "unitsInStock",
      dataType: wjcCore.DataType.Number,
      format: "n0"
    },
    {
      header: "On Order",
      binding: "unitsOnOrder",
      dataType: wjcCore.DataType.Number,
      format: "n0"
    },
    ...
  ]
});

결과는 다음과 같습니다.

데이터 유형을 기반으로 하는 사용자 친화적인 편집기

이제 FlexGrid에서 열의 dataType 속성만 설정하면 편집 기능이 어느 정도 자동으로 개선됩니다. 예를 들어 그리드에서는 숫자 열에 숫자가 아닌 값을 입력할 수 없습니다. 하지만 뛰어난 사용자 경험을 제공하기 위해 사용자 정의 편집기를 사용하겠습니다.

FlexGrid 열에는 기본 제공 편집기를 사용자 정의 편집기로 바꿀 수 있는 편집기 속성이 있습니다. Wijmo에는 숫자, 통화, 날짜, 컬렉션, 마스크 등을 위한 유용한 편집기가 있는 입력 모듈이 포함되어 있습니다. 따라서 해당 편집기를 사용하면 편집 환경을 쉽게 향상할 수 있습니다.

먼저, Price 열의 편집기를 바꾸겠습니다. 더 사용자 친화적으로 설정하기 위해 InputNumber 컨트롤 및 일부 설정을 사용합니다. 열에 사용한 것과 동일한 형식의 문자열이 사용됩니다. 이에 따라 편집기가 표시된 값과 일치하게 됩니다.

let grid = new wjcGrid.FlexGrid("#results", {
  columns: [
   ...
    {
      header: "Price",
      binding: "unitPrice",
      dataType: wjcCore.DataType.Number,
      format: "c",
      editor: new wjcInput.InputNumber(document.createElement("div"), {
        format: "c"
      })
    },
    ...
  ]  
});

이제 편집기가 숫자 입력 상자를 사용하며 통화처럼 보이도록 형식이 지정됩니다.

또한 In Stock 및 On Order 열과 유사한 작업을 실행할 수 있습니다. InputNumber 컨트롤을 사용하지만 설정을 추가하여 이러한 단위를 더 사용자 친화적으로 변경하겠습니다.

열과 일치하도록 형식을 "n0"으로 설정합니다. 또한 단계 속성을 사용하여 컨트롤에 증가 및 감소 버튼을 표시합니다. 그리고 최솟값과 최댓값을 설정해 해당 범위 내에서 편집을 제한하겠습니다.

let grid = new wjcGrid.FlexGrid("#results", {
  columns: [
    ...
    {
      header: "In Stock",
      binding: "unitsInStock",
      dataType: wjcCore.DataType.Number,
      format: "n0",
      editor: new wjcInput.InputNumber(document.createElement("div"), {
        format: "n0",
        step: 1,
        min: 0,
        max: 10000
      })
    },
    {
      header: "On Order",
      binding: "unitsOnOrder",
      dataType: wjcCore.DataType.Number,
      format: "n0",
      editor: new wjcInput.InputNumber(document.createElement("div"), {
        format: "n0",
        step: 1,
        min: 0,
        max: 10000
      })
    },
    ...
  ],
});

그 결과 값을 한 단위씩 증가하거나 감소하기 위한 간편한 버튼이 존재하며, 숫자 입력이 표시됩니다.

유효성 검사 사용

다음은 응용 프로그램에 유효성 검사를 추가합니다.

Wijmo의 CollectionView에는 getError라고 하는 간단하지만 강력한 유효성 검사 메서드가 있습니다. 이 메서드가 정의되면, 동일한 CollectionView에 바인딩된 모든 FlexGrid에서 사용됩니다.

따라서 getError 핸들러를 작성하고 일부 유효성 검사 규칙을 추가하겠습니다.

이 데이터는 재고 관리를 위한 것이며, 데이터 안에 이미 규칙을 만드는 데 사용할 수 있는 몇 가지 속성이 기재되어 있습니다. 

function getError(item, propName) {
  switch (propName) {
    case "unitsInStock":
      return item.discontinued == false &&
        item.unitsInStock < item.reorderLevel &&
        item.unitsOnOrder == 0
        ? "Units too low and none on order!"
        : "";
  }
  return null;
}

이 유효성 검사 핸들러에서는 unitsInStock을 살펴보고 새 규칙의 순서를 지정해야 하는지를 확인합니다. unitsInStock이 reorderLevel보다 낮은(그리고 unitsOnOrder가 0인) 경우 오류 메시지가 표시됩니다.

이제 핸들러가 준비되었으므로, CollectionView 초기화에 추가할 수 있습니다.

let productView = new wjcCore.CollectionView([], { getError });

이제 데이터 집합이 변경되거나, 변경되려고 할 때마다 CollectionView에서 해당 핸들러를 실행합니다.

FlexGrid에서는 다음과 같은 방식으로 오류를 렌더링합나다.

전체 텍스트 검색 추가

Datagrid에서 또 한 가지 유용한 기능은 전체 텍스트 검색입니다. FlexGrid에는 검색을 쉽게 할 수 있는 선택적 확장 기능이 있습니다. FlexGrid에는 또한 쉽게 추가할 수 있는 Excel과 같은 필터링이 있습니다. 하지만 이 경우에는 검색을 사용합니다.

이 확장 기능을 추가하기 위해 HTML에 검색 상자를 위한 컨테이너를 추가합니다.

<div id="search"></div>

그런 다음 검색 모듈을 가져옵니다.

import * as wjcGridSearch from "@grapecity/wijmo.grid.search";

마지막으로, FlexGridSearch 컴포넌트를 초기화하고 바인딩할 FlexGrid의 인스턴스에 지정합니다.

let search = new wjcGridSearch.FlexGridSearch("#search", {
  placeholder: "Search Records...",
  grid: grid
});

앱을 실행할 때 FlexGrid에서 전체 텍스트 검색이 사용됩니다.

추가 기능

GraphQL은 JavaScript 응용 프로그램에서 데이터를 관리하기 위한 뛰어난 도구입니다. 또한 Wijmo, 특히 CollectionView 및 FlexGrid 컴포넌트와 매우 잘 짝을 이룹니다.

이번 스터디에서는 간단한 GraphQL과 Wijmo를 사용하여 응용 프로그램을 빌드하는 방법을 보여줍니다.

GraphQL과 Wijmo 모두 더 많은 기능이 포함되어 있으며, 이번 포스팅의 샘플보다 훨씬 더 많은 작업을 처리할 수 있습니다.

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

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