🎉TOAST UI Grid 4.0🎉

TOAST UI Grid는 여러분의 데이터를 효과적으로 표현하고, 편리한 사용성을 제공하기 위해 많은 노력을 해왔습니다. TOAST UI Grid 4.0은 더 빠르고, 가벼우면서 사용하기 편리한 제품을 제공하는 것을 목표로 올해 초부터 시작되었습니다. 의존성 제거, 가상 DOM을 통한 성능 향상, API 개선을 목표로 대대적인 작업을 진행하였고, 마침내 더 강력하고 가벼워진 TOAST UI Grid 4.0을 선보이게 되었습니다.

v4.0에 어떤 변화가 있는지 아래 내용에서 확인해 보세요!

⭐️Feature

TOAST UI Grid 4.0에서 제공하는 핵심 기능들을 정리해보았습니다. 업데이트 내용을 보기 전에 확인해보세요!

• 빠른 가상 스크롤 성능
• 다양한 입력 형식 지원
• 키보드 입력 완벽 지원
• 컬럼 간 관계 지정
• 트리 데이터

더 자세한 내용은 Github을 참고해주세요.

🌈What's updated?

경량화, No Dependency

TOAST UI Grid 4.0은 Backbone과 jQuery로 작성된 기존의 코드를 모두 버리고 Preact와 직접 구현한 반응형 시스템을 이용하여 처음부터 새롭게 작성되었습니다. 결과적으로 이 두 가지 기술을 도입함으로써, 전체 번들 파일의 용량은 327KB에서 154KB로 50% 이상 경량화되었고, 코드는 훨씬 간결해졌습니다.

아래는 타사 Grid들의 minified 번들 파일 용량과 비교한 차트입니다.

Grid는 데이터를 다루기 위한 다양한 기능을 제공하기 때문에 보통 용량이 큰 편입니다. 하지만 TOAST UI Grid 4.0은 차트에 나타난 것처럼 어떠한 의존성도 없고 굉장히 가볍습니다. 이 의미는 웹 페이지의 로딩 속도 저하 없이 Grid의 핵심 기능을 사용할 수 있다는 의미이기도 합니다. 가볍고 강력한 TOAST UI Grid 4.0 매력적이지 않나요?

TypeScript

TOAST UI Grid 4.0은 TypeScript로 개발되었습니다. 유연한 타입 추론을 통해 안정성을 확보할 수 있었고, 가독성도 높일 수 있었습니다. 컨트리뷰터가 되고 싶은 개발자들은 타입을 통해 더 쉽게 TOAST UI Grid에 적응할 수 있습니다! 적극적인 공헌과 PR은 언제든지 환영합니다 :)

커스텀 에디터 / 커스텀 렌더러

TOAST UI Grid 4.0에서는 커스텀 에디터와 커스텀 렌더러를 추가하여, 나만의 포맷을 적용할 수 있도록 확장 기능을 제공합니다. 아래 예시의 슬라이더나 컬러피커처럼 원하는 포맷으로 데이터 표현이 가능합니다.

커스텀 렌더러의 사용 방법은 다음과 같습니다.

MyColorRenderer class 처럼 CellRenderer 포맷에 맞춰서 생성자 함수와 메서드를 정의하면 끝입니다. 정말 간단하죠? (class가 지원되지 않는 환경에서는 function과 prototype을 이용하여 작성하면 됩니다.)

interface CellRenderer {
  getElement(): HTMLElement;
  focused?(): void;
  mounted?(parent: HTMLElement): void;
  render(props: CellRendererProps): void;
  beforeDestroy?(): void;
}

class MyColorRenderer {
  constructor(props) {
    const el = document.createElement('input');
    const { grid, rowKey, columnInfo } = props;

    el.type = 'color';
    el.addEventListener('input', () => {
      grid.setValue(rowKey, columnInfo.name, el.value);
    });

    this.el = el;
    this.render(props);
  }

  getElement() {
    return this.el;
  }

  getValue() {
    return this.el.value;
  }

  render(props) {
    this.el.value = String(props.value);
  }
}

그리고 작성한 커스텀 렌더러를 renderer 옵션 객체에 type으로 지정하면 TOAST UI Grid에 적용되어 렌더링되는 것을 보실 수 있습니다.

const grid = new Grid({
  // ...
  columns: [
    {
      name: 'genre',
      renderer: {
        type: MyColorRenderer,
        options: {
          myColorRendererOptions: {
             // ...
          }
        }
      }
    }
  ]
});

기존 text, password, checkbox, radio, select 에디터 포맷들과 디폴트 렌더러도 동일하게 제공되니, 상황에 맞게 조합하면 데이터를 효과적으로 표현할 수 있습니다!

더 자세한 내용을 보고 싶다면 마이그레이션 가이드를 참조해주세요.

편리한 백엔드 API 연동, DataSource

TOAST UI Grid 4.0에는 DataSource라는 개념이 추가되었습니다. 백엔드 API와 통신을 위한 기존의 Net을 완전히 대체하는 개념이며, 내부적으로 데이터의 추가, 수정, 삭제를 보다 효율적으로 처리합니다. 또한 사용법과 API들도 더 직관적으로 개편되었습니다.

아래 예시처럼 v3.0에서는 data 옵션이 비어있는 그리드 인스턴스를 생성한 후, use 메소드를 이용하여 Net에 관련된 옵션들을 설정해주었습니다. 한 번에 할 수 있는 과정을 두 번에 나눠하다보니 번거로운 부분이 있었습니다.

// v3.0
var grid =  new tui.Grid({
  columns: [{ title: 'Name', name: 'name' }]
  // ...
});

grid.use('Net', {
  withCredentials: false,
  api: {
      readData: './api/read',
      createData: './api/create',
      updateData: './api/update',
      deleteData: './api/delete',
      modifyData: './api/modify'
  }
});

v4.0에서는 별도의 API 호출 없이 data 옵션에 dataSource 객체를 정의하여 넣어주기만 하면 됩니다.

// v4.0
var dataSource = {
  withCredentials: false,  
  initialRequest: true,
  api: {
      readData: { url: '/api/read', method: 'GET' },
      createData: { url: '/api/create', method: 'POST' },
      updateData: { url: '/api/update', method: 'PUT' },
      deleteData: { url: '/api/delete', method: 'DELETE' },
      modifyData: { url: '/api/modify', method: 'POST' }
  }
}
  
var grid =  new tui.Grid({
  data: dataSource,
  columns: [{ title: 'Name', name: 'name' }]
  // ...
});

이외에도 DataSoure의 다른 옵션들과 API들도 간단 명료하게 개편되었습니다. 자세한 내용은 마이그레이션 가이드를 참조해주세요.

컬럼 가상 스크롤

TOAST UI Grid 4.0은 로우 단위 가상 스크롤뿐만 아니라, 컬럼 단위 가상 스크롤도 적용하였습니다. 이제 TOAST UI Grid와 함께라면 컬럼 수에 제약받지 않고 부드럽게 스크롤할 수 있습니다. 부드럽고 빠른 로우, 컬럼 스크롤을 경험해 보세요!

☀️What's next?

다음은 TOAST UI Grid를 더 알차게 만들어 줄 신규 기능들의 릴리즈 일정입니다.

• 모바일 지원(7월)
• 필터링(7월)
• 다중 컬럼 정렬(8월)
• 컬럼, 셀 컨텍스트 메뉴(8월)
• 클라이언트 페이지네이션(8월)

🍀Migration Guide

TOAST UI Grid v3.x에서 v4.0으로 업데이트를 원한다면 친절한 마이그레이션 가이드가 준비되어 있으니 참고해주세요:)

🚀3000만큼 사랑하는 TOAST UI Grid

TOAST UI Grid는 v4.0출시로 구조와 기능적인 면에서 많은 부분이 진보되었습니다. 그리고 릴리즈 노트에서 확인할 수 있듯이 계속 꾸준한 업데이트를 진행할 예정입니다. 기능에 대한 적극적인 의견 제시나 피드백은 언제든지 환영입니다. TOAST UI Grid의 Github은 언제나 열려 있습니다! 앞으로도 기대해주세요 :)