Vue와의 통합
DHTMLX To Do List는 Vue 3와 호환됩니다. 아래 예제에서 두 기술을 함께 사용하는 방법을 보여줍니다. 완성된 프로젝트 예제는 GitHub 예제를 참조하세요.
프로젝트 생성
새 Vue 프로젝트를 스캐폴딩하고 의존성을 설치합니다.
새 프로젝트를 생성하기 전에 Node.js를 설치하세요.
Vue 프로젝트를 생성하려면 다음 명령어를 실행합니다:
npm create vue@latest
이 명령어는 공식 Vue 프로젝트 스캐폴딩 도구인 create-vue를 설치하고 실행합니다. 자세한 내용은 Vue.js 빠른 시작을 참조하세요.
프로젝트 이름을 my-vue-todo-app으로 지정합니다.
의존성 설치
앱 디렉터리로 이동합니다:
cd my-vue-todo-app
패키지 매니저로 의존성을 설치하고 개발 서버를 시작합니다.
yarn으로 다음 명령어를 실행합니다:
yarn
yarn start
npm으로 다음 명령어를 실행합니다:
npm install
npm run dev
앱이 로컬호스트 주소(예: http://localhost:3000)에서 실행됩니다.
To Do List 생성
앱을 중단하고 To Do List 패키지를 설치합니다.
1단계. 패키지 설치
평가판 To Do List 패키지를 다운로드하고 README 파일의 단계를 따르세요. 평가판은 30일 동안만 사용할 수 있습니다.
2단계. 컴포넌트 생성
Toolbar가 포함된 To Do List를 애플리케이션에 추가할 Vue 컴포넌트를 생성합니다. src/components/ 디렉터리에 ToDo.vue라는 새 파일을 추가합니다.
소스 파일 가져오기
ToDo.vue를 열고 To Do List 소스 파일을 가져옵니다. 두 가지 가져오기 경로 중 하나를 선택하세요:
- 로컬 폴더에서 설치한 PRO 버전 -
dhx-todolist-package에서 가져오기 - 평가판 버전 -
@dhx/trial-todolist에서 가져오기
아래 예제는 PRO 패키지에서 가져옵니다:
<script>
import { ToDo, Toolbar } from 'dhx-todolist-package';
import 'dhx-todolist-package/dist/todo.css';
</script>
패키지에 따라 소스 파일이 압축될 수 있습니다. 그 경우 CSS 파일을 todo.min.css로 가져오세요.
아래 코드 조각은 평가판 패키지에서 가져옵니다:
<script>
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import '@dhx/trial-todolist/dist/todo.css';
</script>
이 튜토리얼에서는 평가판 버전을 사용합니다.
컨테이너 설정 및 Toolbar가 포함된 To Do List 추가
페이지에 Toolbar가 포함된 To Do List를 표시하려면 두 컴포넌트의 컨테이너를 생성하고 생성자로 초기화합니다. 아래 예제는 mounted() 훅 내부에서 컴포넌트를 초기화합니다:
<script>
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export default {
mounted() {
// To Do List 컴포넌트 초기화
this.todo = new ToDo(this.$refs.todo_container, {});
// Toolbar 컴포넌트 초기화
this.toolbar = new Toolbar(this.$refs.toolbar_container, {
api: this.todo.api, // To Do List 내부 API 제공
// 기타 구성 속성
});
},
unmounted() {
this.todo.destructor(); // To Do List 소멸
this.toolbar.destructor(); // Toolbar 소멸
}
};
</script>
<template>
<div class="component_container">
<div ref="toolbar_container"></div>
<div ref="todo_container" style="height: calc(100% - 56px);"></div>
</div>
</template>
데이터 로드
src/ 디렉터리에 data.js 파일을 생성하고 데이터를 추가합니다. 아래 예제는 tasks, users, projects를 반환하는 getData() 함수를 내보냅니다:
export function getData() {
const tasks = [
{
id: "temp://1652991560212",
project: "introduction",
text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
priority: 1
},
{
id: "1652374122964",
project: "introduction",
text: "You can assign task performers and due dates using the menu.",
assigned: ["user_4", "user_1", "user_2", "user_3"],
due_date: "2033-03-08T21:00:00.000Z",
priority: 2
},
// ...
];
const users = [
{
id: "user_1",
label: "Don Smith",
avatar:
"https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
},
// ...
];
const projects = [
{
id: "introduction",
label: "Introduction to DHTMLX To Do List"
},
{
id: "widgets",
label: "Our widgets"
}
];
return { tasks, users, projects };
}
App.vue를 열고 데이터를 가져온 다음 내부 data() 메서드를 통해 초기화합니다. 데이터를 props로 <ToDo/> 컴포넌트에 전달합니다:
<script>
import ToDo from "./components/ToDo.vue";
import { getData } from "./data";
export default {
components: { ToDo },
data() {
const { users, projects, tasks } = getData();
return {
users,
projects,
tasks
};
}
};
</script>
<template>
<ToDo :users="users" :tasks="tasks" :projects="projects" />
</template>
ToDo.vue로 이동하여 전달받은 props를 To Do List 구성 객체에 적용합니다. 아래 코드 조각은 구성을 통해 사용자, 작업, 프로젝트 데이터를 전달합니다:
<script>
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export default {
props: ["tasks", "users", "projects"],
mounted() {
this.todo = new ToDo(this.$refs.todo_container, {
users: this.users,
tasks: this.tasks,
projects: this.projects,
// 기타 구성 속성
});
this.toolbar = new Toolbar(this.$refs.toolbar_container, {
api: this.todo.api,
// 기타 구성 속성
});
},
unmounted() {
this.todo.destructor();
this.toolbar.destructor();
}
};
</script>
<template>
<div class="component_container">
<div ref="toolbar_container"></div>
<div ref="todo_container" style="height: calc(100% - 56px);"></div>
</div>
</template>
mounted() 내부에서 parse() 메서드를 사용하여 To Do List에 데이터를 로드할 수도 있습니다. 아래 예제는 초기화 후 parse()로 데이터를 로드합니다:
<script>
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";
export default {
props: ["tasks", "users", "projects"],
mounted() {
this.todo = new ToDo(this.$refs.todo_container, {});
this.toolbar = new Toolbar(this.$refs.toolbar_container, {
api: this.todo.api,
// 기타 구성 속성
});
this.todo.parse({
users: this.users,
tasks: this.tasks,
projects: this.projects
});
},
unmounted() {
this.todo.destructor();
this.toolbar.destructor();
}
};
</script>
<template>
<div class="component_container">
<div ref="toolbar_container"></div>
<div ref="todo_container" style="height: calc(100% - 56px);"></div>
</div>
</template>
parse(data)를 호출할 때마다 현재 데이터셋이 교체됩니다.
이제 컴포넌트가 데이터가 채워진 To Do List를 렌더링합니다. 사용 가능한 다른 속성은 구성 개요를 참조하세요.
이벤트 처리
사용자 동작에 반응하려면 이벤트를 구독하세요. 이벤트 전체 목록을 참조하세요.
ToDo.vue를 열고 mounted() 메서드를 완성합니다. 아래 코드 조각은 add-task 이벤트에 핸들러를 연결합니다:
<script>
// ...
export default {
// ...
mounted() {
this.todo = new ToDo(this.$refs.todo_container, {});
this.todo.api.on("add-task", ({ id }) => {
console.log("A new task is added", id);
});
},
unmounted() {
this.todo.destructor();
}
}
</script>
// ...
3단계. 앱에 To Do List 추가
컴포넌트를 앱에 추가하려면 App.vue를 열고 기본 코드를 아래 코드 조각으로 교체합니다:
<script>
import ToDo from "./components/ToDo.vue";
import { getData } from "./data";
export default {
components: { ToDo },
data() {
const { users, projects, tasks } = getData();
return {
users,
projects,
tasks
};
}
};
</script>
<template>
<ToDo :users="users" :tasks="tasks" :projects="projects" />
</template>
앱을 시작하면 To Do List가 샘플 데이터와 함께 렌더링됩니다:
완성된 프로젝트는 GitHub에서 확인할 수 있습니다.