서버에서 Gantt 사용하기

때로는 dhtmlxGantt의 특화된 로직을 간트 차트 자체와 분리하여 사용해야 할 필요가 있습니다. 예를 들어:

• 다른 소스(모바일 앱 등)에서 작업 업데이트를 받아 자동 스케줄링을 실행하여 관련 작업의 일정을 조정해야 할 때
• 여러 사용자가 동시에 변경을 하여 일정의 동기화 및 검증이 필요한 경우
• 서버 사이드 코드로 일정을 계산 및 분석해야 할 때

이러한 상황을 지원하기 위해, Node.js 환경에서 서버 사이드로 실행되는 dhtmlxGantt의 별도 빌드가 제공됩니다.

DHTMLX Gantt for Node.js는 Commercial/Enterprise/Ultimate 패키지와 동일한 기능을 제공하며, 새로운 간트 인스턴스를 생성할 수 있는 Gantt.getGanttInstance 메서드도 사용할 수 있습니다.

이용 조건

DHTMLX Gantt의 Node.js 서버 모듈은 클라이언트 버전의 애드온입니다. 어떤 상업용 라이선스(Individual, Commercial, Enterprise)로 Gantt를 구매할 때 추가 비용을 지불하여 사용할 수 있습니다. Ultimate 라이선스에는 이 모듈이 기본 포함되어 있습니다.

이미 메인 dhtmlxGantt 라이브러리를 보유하고 있다면, Node.js 모듈을 별도로 구매할 수 있으며, 서버 사이드 버전의 다운로드 링크가 제공됩니다.

버전 관리

dhtmlxGantt의 Node.js 패키지는 브라우저 패키지와 동일한 버전 넘버링 체계를 따릅니다(예: v7.0.0이 Node.js용 첫 버전입니다).

프로젝트에 라이브러리 추가하기

dhtmlxGantt for Node.js 패키지는 로컬에 설치할 수 있습니다:

"dependencies": {
    "@dhtmlx/gantt-node": "file:../../gantt_7.0.0_node"
    ...
}

또는 아래와 같이 코드에서 dhtmlxgantt.node.js를 직접 import할 수 있습니다:

import { Gantt } from "@dhtmlx/gantt-node";
 
const gantt = Gantt.getGanttInstance({
    plugins:{
        auto_scheduling: true,
    },
    config: {
        work_time: true,
        duration_unit: "hour",
        auto_scheduling: true,
        auto_scheduling_strict: true,
        auto_scheduling_initial: false
    },
    data: {
        tasks: [
            { id: 1, text: "Project #1", type: "project", parent: 0 },
            { id: 2, start_date: "05-04-2020 00:00", text: "Task #1", duration: 1, 
            parent: 1, type: "task" },
            { id: 3, start_date: "05-04-2020 00:00", text: "Task #2", duration: 3, 
            parent: 1, type: "task" },
            { id: 4, start_date: "05-04-2020 00:00", text: "Task #3", duration: 3, 
            parent: 1, type: "task" },
            { id: 5, start_date: "05-04-2020 00:00", text: "Task #4", duration: 3, 
            parent: 1, type: "task" },
            { id: 6, start_date: "05-04-2020 00:00", text: "Task #5", duration: 1, 
            parent: 1, type: "task" }
        ], 
        links: [
            { id: 1, source: 1, target: 2, type: "0" },
            { id: 2, source: 2, target: 3, type: "0" },
            { id: 3, source: 3, target: 4, type: "0" },
            { id: 4, source: 4, target: 5, type: "0" },
            { id: 5, source: 5, target: 6, type: "0" }
        ]
    },
    events:{
        onAfterAutoSchedule: function(taskId, updatedTasks) {
            console.log("Following tasks were auto scheduled:");
            console.table(updatedTasks.map((taskId) => {
                return {
                    id: taskId,
                    text: this.getTask(taskId).text
                };
            }));
        },
        onParse: function() {
            console.log("Loaded data:")
            console.table(this.serialize().data);
        },
        onGanttReady: () => {
            console.log("Running dhtmlxGantt on the backend");
        }
    }
});
 
console.table(gantt.serialize());

제한 사항

dhtmlxGantt의 Node.js 버전은 브라우저 버전과 동일한 핵심 API를 제공합니다.

하지만, 일부 클라이언트 사이드 메서드는 서버 라이브러리에서 사용할 수 없거나 동작하지 않습니다. 예를 들어:

• 서버 사이드 렌더링은 지원되지 않습니다. gantt.render, gantt.refreshData, gantt.refreshTask 등과 같은 메서드는 HTML을 생성하지 않지만, onBeforeGanttRender, onGanttRender와 같은 관련 API 이벤트는 여전히 트리거됩니다.
• Popup messages API는 포함되어 있지 않습니다. gantt.message, gantt.alert, gantt.confirm과 같은 메서드는 정의되어 있지 않습니다.
• 내장 ajax 헬퍼는 Node.js로 포팅되지 않았으므로 gantt ajax API, gantt.load, 기본 dataProcessor 라우팅은 동작하지 않습니다. 대신 gantt.parse를 사용하고 dataProcessor를 위한 커스텀 라우팅을 구현해야 합니다.

Back to top