Next.js에서 데이터그리드(DataGrid)는 어떻게 개발하나요?

메시어스 서포터즈·2024년 11월 19일
ReactReact그리드React데이터그리드next.jsreact gridreact-table
4

Developer Solution

목록 보기
13/17
post-thumbnail

현대 웹 개발 환경에서의 효율성과 성능은 무엇보다 중요합니다. 이러한 요구를 충족시키기 위해 많은 개발자들은 다양한 프레임워크와 라이브러리를 활용하고 있습니다.

Next.js는 그중에서도 사용 편의성 과 확장성이 뛰어난 JavaScript 프레임워크로 동적 라우팅, 코드 스플리팅, 빌트인 CSS 및 Sass 지원 등 다양한 기능을 내장하고 있어 개발자들의 사랑을 받고 있습니다. 특히나 Next.js 빠르고 간편한 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 제공하여, React 애플리케이션의 가능성을 한층 더 확장시켜 줍니다.

이러한 프레임워크의 강점과 고성능의 UI 컨트롤을 지원하는 Wijmo(위즈모)를 결합하여 복잡한 데이터 그리드(grid), 차트(chart), 입력(input) 컨트롤을 손쉽게 구현하면서도 성능 저하 없이 유연하고 직관적인 UI를 구축할 수 있습니다.

이 튜토리얼에서는 Next.js와 Wijmo의 Data Grid를 활용하여, 대규모 데이터셋을 효율적으로 관리하고 시각화하는 방법을 알아볼 것입니다.


Next.js라는 강력한 프레임워크와 Wijmo의 강력한 데이터 그리드 컴포넌트인 "FlexGrid(플렉스그리드)"를 결합하여, 성능과 사용자 경험을 모두 만족시키는 웹 애플리케이션을 구축하는 과정을 함께 살펴보겠습니다.

앞으로의 내용을 통해 여러분은 Next.js의 유연성과 Wijmo의 강력한 기능을 최대한 활용하는 방법을 배울 수 있을 것입니다.


Wijmo는 서버 사이드 렌더링(SSR)을 지원하지 않습니다.

Next.js 애플리케이션에서 Wijmo 컴포넌트를 원활하게 사용하려면 컴포넌트가 클라이언트 측에서만 렌더링되도록 설정해야 합니다.-그렇지 않으면 렌더링에 실패할 수 있습니다.

이를 위해, Wijmo 컴포넌트를 포함하는 파일에 "use client" 지시어를 추가해주시기 바랍니다.

이를 통해 Next.js가 서버 측에서 해당 컴포넌트를 렌더링하려는 시도를 막을 수 있습니다


Next.js와 함께 Wijmo(위즈모) 시작하기 도움말 문서도 있으니 아래 링크를 방문하여 참고하시기 바랍니다.


아래의 순서로 진행됩니다.

  1. 개발환경

  2. Next.js에서 애플리케이션 생성하기

  3. 애플리케이션 실행

  4. Next.js 애플리케이션 시작 & npm 패키지 설치

  5. Wijmo 컨트롤 추가

  6. Next.js 응용 프로그램에서 Wijmo 이벤트 추가

  7. Wijmo 테마 디자이너를 이용한 스타일링


[샘플 프로젝트 다운로드]
이 프로젝트의 샘플을 다운로드하여 따라해 보세요.


1. Next.js DataGrid 개발환경

Next.js를 이용한 개발을 위해서 아래 두 가지가 필요합니다.

  • Node.js: JavaScript 실행 환경
  • npm : npm에서 다양한 모듈을 검색하는 패키지 관리 도구

Node.js의 설치 프로그램은 공식 사이트에서 다운로드 받을 수 있으며, npm은 Node.js를 설치하여 사용할 수 있습니다.

Node.js를 설치한 후 터미널 창을 열고 다음 명령을 실행해보시기 바랍니다.

npm -v

* 위의 명령어를 실행하여 버전(ex. "10.8.1")이 확인되면 설치에 성공하신 겁니다.


2. Next.js 애플리케이션 생성하기

Next.js 프로젝트를 생성하기 위해 Command Line Interface에 "Create Next App" 명령어를 입력하시면 됩니다.

관련하여 아래 링크를 참고하여 주시기 바랍니다.


프로젝트를 생성하는 첫번째 단계로 터미널 창에서 원하는 폴더로 이동한 후 아래 명령어를 실행해줍니다.

명령어 뒤에있는 "wijmo-nextjs-app"는 프로젝트 이름이므로 임의의 이름을 설정하시면 됩니다.

또한 --use-npm 옵션을 설정하여 패키지 관리에 명시적으로 npm을 사용하도록 합니다.
※ 이번 포스팅에서는 Next.js 14.2.5를 사용하고 있습니다.

npx create-next-app@latest wijmo-nextjs-app --use-npm

위의 명령어를 실행한 후 원하는 설정에 대해 Yes 또는 No를 선택한 뒤 Enter 키를 누르면 기본 설정으로 진행합니다.
프로젝트 이름이 있는 폴더 "wijmo-nextjs-app"가 생성되면서 프로젝트 생성이 완료됩니다.


3. Next.js 애플리케이션 실행

프로젝트 생성 후, 동작 확인을 위해 실행해보도록 하겠습니다. 프로젝트 폴더 "wijmo-nextjs-app"로 이동하여 아래 명령을 실행해줍니다.

npm run dev

실행 후, 터미널에 표시되고 있는 "http://localhost:3000" 에 브라우저로 접근하면 아래와 같이 Next.js의 애플리케이션이 화면에 표시됩니다.

next.js_실행


4. Next.js 애플리케이션 시작 & npm 패키지 설치

방금 작성한 Next.js의 애플리케이션에 Wijmo(위즈모) FlexGrid를 추가하도록 하겠습니다. 가장 먼저 할 일은 Wijmo 모듈 설치입니다.


Next.js에서 Wijmo를 사용하는 경우 React 용 Wijmo 컴포넌트를 사용합니다.

React 용 Wijmo 컴포넌트는 npm 패키지로 배포되며, 아래와 같은 2가지 방법으로 설칠 할 수 잇습니다.

  • @mescius/wijmo.react.grid 와 같이 필요한 컨트롤에 해당하는 컴포넌트를 개별적으로 설치.
  • 그룹 패키지의 @mescius/wijmo.react.all에서 모든 컨트롤을 함께 설치

이번에는 후자의 그룹 패키지를 사용하는 방법을 소개하도록 하겠습니다.


터미널 창을 사용하여 방금 만든 프로젝트의 루트 폴더에서 다음 명령어를 실행합니다.

npm install @mescius/wijmo.react.all

일반적으로 npm install 명령은 지정된 패키지의 최신 버전을 설치합니다.

설치할 패키지 버전을 지정하려면 패키지 이름 뒤에 "@"와 버전 번호를 붙여 명령을 실행해주시기 바랍니다.


아래 코드는 Wijmo의 패키지 설치에 해당하는 버전을 2024 v2(5.20242.21)로 지정하는 예입니다.

npm install @mescius/wijmo.react.all@5.20242.21

5. Wijmo 컨트롤 추가

npm 패키지를 설치하셨다면 애플리케이션의 프로젝트 폴더에 있는 파일을 편집하여 Wijmo를 구현해줍니다.


먼저 프로젝트의 루트 폴더에 "components"폴더를 만듭니다.

※ "components" 폴더가 이미 존재하는 경우는 이 순서는 필요하지 않습니다.


wijmo_component

이번에는 FlexGrid를 사용해 데이터 표시를 구현하는 컴포넌트를 작성하도록 하겠습니다.

- components 폴더에 FlexGrid.tsx를 추가하고 아래와 같이 작성해주시기 바랍니다.

※ 로컬에서 배포키를 설정하지 않은 경우 평가판 버전을 나타내는 워터마크가 표시됩니다.
※ 배포키를 얻고 설정하는 방법은 라이선싱 페이지를 참조해주시기 바랍니다.


Wijmo는 서버 사이드 렌더링(SSR)을 지원하지 않기 때문에,
아래 코드와 같이 Wijmo 컴포넌트를 포함하는 파일에 "use client" 지시어를 추가해주시기 바랍니다.


[components/FlexGrid.tsx]

'use client'
  
import { useState } from "react";
import "@mescius/wijmo.styles/wijmo.css";
import * as WjCore from "@mescius/wijmo";
import * as WjGrid from "@mescius/wijmo.react.grid";
import { FlexGridFilter } from "@mescius/wijmo.react.grid.filter";
import "@mescius/wijmo.cultures/wijmo.culture.ko";
  
const FlexGrid = () => {
  const [data, setData] = useState(getData());
 
  return (
    <div>
      <WjGrid.FlexGrid itemsSource={data}>
        <FlexGridFilter />
        <WjGrid.FlexGridColumn header="아이디" binding="id"  />
        <WjGrid.FlexGridColumn header="제품명" binding="product"  />
        <WjGrid.FlexGridColumn header="출시일" binding="date"  />
        <WjGrid.FlexGridColumn header="수량" binding="sales"  format='n0' />
      </WjGrid.FlexGrid>
    </div>
  );
}
  
 
const getData = () => {
  var products = 'Piano,Violin,Flute,Guitar,Cello'.split(',');
  var data = [];
  for (var i = 0; i < 100; i++) {
      data.push({
          id: i,
          product: products[i % products.length],
          date:new Date(2024, i % 12, i % 28),
          sales: Math.random() * 1000
      })
  }
 
  return data;
}
 
  
export default FlexGrid;

그 다음 app/page.tsx 파일의 내용을 아래 코드를 덮어 씌워주시기 바랍니다.

"components/FlexGrid.tsx" 파일을 동적으로 가져오고 ({ ssr: false }) 옵션을 지정하여 대상 파일이 SSR(서버측 렌더링)하지 않도록 설정합니다.

[app/page.tsx]

import dynamic from 'next/dynamic'
 
const FlexGrid = dynamic(
    () => {
        return import("../components/FlexGrid");
    },
    <b>{ ssr: false }</b>
);
 
export default function Home() {
    return (
        <>
            <h2 className="title">
            Wijmo×Next.js 프로젝트 
            </h2>
            <FlexGrid></FlexGrid>
        </>
    )
}

더불어 "app/globals.css" 파일에 아래와 같은 코드를 작성하여 FlexGrid 스타일을 설정해줍니다.

[app/globals.css]

@tailwind base;
@tailwind components;
@tailwind utilities;
  
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
 
body {
  font-family: "nanumsquare";
}
.title {
  margin: 10px;
  color: #48A9C5;
  font-size: 30px;
  font-weight: bold;
}
.wj-flexgrid {
  width: 570px !important;
  height: 400px;
  margin: 10px;
}

이상으로 코드 입력은 완료되었으며 터미널 창에서 아래 명령어를 실행하여 결과를 확인해줍니다.

npm run dev

명령어에 의해 실행된 결과는 아래 이미지와 같이 표시됩니다.


6. Next.js 응용 프로그램에서 Wijmo 이벤트 추가


이번 단계에서는 Next.js 애플리케이션에서 Wijmo 이벤트를 사용하는 방법을 보여주도록 하겠습니다.
components/FlexGrid.tsx 파일을 다음과 같이 추가하고 셀 편집이 끝날 때 발생하는 cellEditEnding 이벤트에서 편집한 값을 콘솔에 출력하도록 설정해보겠습니다.

[components/FlexGrid.tsx]

'use client'
  
import { useState } from "react";
import "@mescius/wijmo.styles/wijmo.css";
import * as WjCore from "@mescius/wijmo";
import * as WjGrid from "@mescius/wijmo.react.grid";
import { FlexGridFilter } from "@mescius/wijmo.react.grid.filter";
import "@mescius/wijmo.cultures/wijmo.culture.ko";
  
const FlexGrid = () => {
  const [data, setData] = useState(getData());
 
  const cellEditEnding = (s: any, e: any) => {
    console.log("변경된 값  : " + s.activeEditor.value);
  }
 
  return (
    <div>
      <WjGrid.FlexGrid itemsSource={data} cellEditEnding={cellEditEnding}>
        <FlexGridFilter />
        <WjGrid.FlexGridColumn header="아이디" binding="id"  />
        <WjGrid.FlexGridColumn header="제품명" binding="product"  />
        <WjGrid.FlexGridColumn header="출시일" binding="date"  />
        <WjGrid.FlexGridColumn header="수량" binding="sales"  format='n0' />
      </WjGrid.FlexGrid>
    </div>
  );
}
  
 
const getData = () => {
  var products = 'Piano,Violin,Flute,Guitar,Cello'.split(',');
  var data = [];
  for (var i = 0; i < 100; i++) {
      data.push({
          id: i,
          product: products[i % products.length],
          date:new Date(2024, i % 12, i % 28),
          sales: Math.random() * 1000
      })
  }
 
  return data;
}
 
  
export default FlexGrid;

더불어 이번 샘플에서는, 아래 코드와 같이 FlexGridFilter 컴포넌트를 추가 해주었습니다. (FlexGrid.tsx 소스코드 19행)


FlexGridFilter는 열 헤더에 필터 아이콘을 추가하여 Excel과 같은 UI를 지닌 필터 기능을 구현해주는 클래스입니다.


FlexGridFilter를 통해 사용자는 값 또는 조건을 기준으로 필터를 적용하여 그리드의 데이터를 쉽게 검색하거나 정렬할 수 있습니다. 특히, FlexGridFilter는 대량의 데이터를 처리해야하는 프로젝트에나 웹 애플리케이션에서 유용하게 사용할 수 있는 컨트롤입니다.

(...)
import { FlexGridFilter } from "@mescius/wijmo.react.grid.filter";
import "@mescius/wijmo.cultures/wijmo.culture.ko";
const FlexGrid = () => {
(...)

 
  return (
    <div>
      <WjGrid.FlexGrid itemsSource={data} cellEditEnding={cellEditEnding}>
        <FlexGridFilter />

코드를 추가한 후 애플리케이션을 다시 실행합니다.

npm run dev

FlexGrid에서 셀을 편집하면 다음과 같이 cellEditEnding 이벤트를 통해 편집 후 값이 콘솔에 출력됩니다.


wijmo_실행화면

7. Wijmo 테마 디자이너를 이용한 스타일링

추가적으로 Wijmo 그리드 외관을 스타일링하고 싶으신 경우, 사용자 정의된 테마를 설정할 수 있도록 도와주는 Wijmo 테마 디자이너를 사용하여 편리하게 설정할 수 있습니다.

wijmo_디자이너

먼저 테마 디자이너 페이지에 방문하여 콤보박스 등을 이용하여 컨트롤에 적용하고 싶은 입력값(ex. 배경색, 테두리 등)을 설정해줍니다.


그 다음 페이지 하단의 CSS 영역을 그대로 복사하여 프로젝트의 CSS 파일(이번 포스팅에서는 app/global.css)에 붙여넣기하시면 됩니다.

wijmo_css

CSS 코드 적용한 후, 결과는 아래와 같습니다.

wijmo_datagrid_스타일

예제를 통해 완성된 프로젝트 코드는 "wijmo-nextjs-sample.zip" 링크를 통해 다운로드하여 확인하실 수 있습니다.

[샘플 프로젝트 다운로드]
이 프로젝트의 샘플을 다운로드하여 따라해 보세요.

이번 포스팅을 통해 Next.js 프레임워크에 Wijmo(위즈모) 컨트롤을 설정하여 웹 애플리케이션을 구축할 수 있는 방법에 대해 살펴보았습니다. Next.js의 유연성과 SEO 최적화 기능에 Wijmo(위즈모)의 고성능 UI 컴포넌트를 결합하여 복잡한 데이터를 효율적으로 처리하고, 사용자 경험을 극대화하는 웹 애플리케이션을 개발할 수 있습니다.

이제 Next.js 프로젝트에 Wijmo(위즈모)를 적용하여 UI의 잠재력을 최대한 활용하여 다양한 비즈니스 분야에서 효과적으로 활용해 보시기 바랍니다!

profile
메시어스 서포터즈
메시어스는 개발자분들을 응원합니다.
이전 포스트

엑셀을 웹으로, 그 이상의 가능성을 열다! – SpreadJS로 경험하는 완벽한 웹 Excel 에디터 개발

다음 포스트

Next.js에서 Excel 개발하기

0개의 댓글