jsGrid를 이용한 CRUD 웹 애플리케이션 개발
이번 블로그에서는 jsGrid를 사용하여 간단한 CRUD(생성, 읽기, 업데이트, 삭제) 웹 애플리케이션을 구축하는 방법을 알아보겠습니다. 이 튜토리얼은 주니어 개발자가 프론트엔드 개발에서 데이터를 다루는 기본 개념을 이해하는 데 중점을 두고 있습니다.
jsGrid란 무엇인가?jsGrid는 데이터 그리드를 화면에 그려주고, 그 데이터를 CRUD 기능을 통해 조작할 수 있게 해주는 JavaScript 라이브러리입니다. jsGrid를 사용하면 적은 코드로도 빠르게 테이블 형태의 데이터를 삽입, 수정, 삭제할 수 있습니다. 또한 jQuery 기반으로 동작하기 때문에 jQuery를 이미 알고 있다면 쉽게 적용할 수 있습니다.
아래는 jsGrid를 이용해 간단한 CRUD 인터페이스를 구축하는 HTML 코드입니다. 이 예제를 통해 jsGrid가 데이터 그리드를 어떻게 렌더링하고 데이터를 조작할 수 있는지 이해할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jsgrid CRUD 예제</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
</head>
<body>
<div id="jsGrid"></div>
<script>
$(function () {
var clients = [
{ "id": 1, "name": "Otto Clay", "approvalDate": "2023-06-28T14:30:00" },
{ "id": 2, "name": "Connor Johnston", "approvalDate": "2023-06-29T09:15:00" },
{ "id": 3, "name": "Lacey Hess", "approvalDate": "2023-06-30T11:45:00" },
{ "id": 4, "name": "Timothy Henson", "approvalDate": "2023-07-01T16:20:00" },
{ "id": 5, "name": "Ramona Benton", "approvalDate": null }
];
var ClientsDB = {
loadData: function () {
return clients;
},
insertItem: function (item) {
item.id = Math.max(...clients.map(x => x.id), 0) + 1;
clients.push(item);
return item;
},
updateItem: function (item) {
var index = clients.findIndex(x => x.id === item.id);
clients[index] = item;
return item;
},
deleteItem: function (item) {
var index = clients.findIndex(x => x.id === item.id);
clients.splice(index, 1);
}
};
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
controller: ClientsDB,
fields: [
{ name: "name", type: "text", width: 150, validate: "required", title: "이름" },
{
name: "approvalDate",
title: "결재일",
type: "text",
width: 150,
align: "center",
itemTemplate: function (value) {
if (value) {
var date = new Date(value);
return date.getFullYear() + "." +
("0" + (date.getMonth() + 1)).slice(-2) + "." +
("0" + date.getDate()).slice(-2) + " " +
("0" + date.getHours()).slice(-2) + ":" +
("0" + date.getMinutes()).slice(-2);
}
return "";
},
insertTemplate: function () {
var $result = $("<input>").attr("type", "datetime-local");
this.insertControl = $result;
return $result;
},
insertValue: function () {
return this.insertControl ? this.insertControl.val() : "";
},
editTemplate: function (value) {
var $result = $("<input>").attr("type", "datetime-local");
if (value) {
$result.val(value.slice(0, 16));
}
this.editControl = $result;
return $result;
},
editValue: function () {
return this.editControl ? this.editControl.val() : "";
}
},
{ type: "control" }
]
});
});
</script>
</body>
</html>위의 코드는 jsGrid를 활용한 간단한 CRUD 웹 애플리케이션 예제입니다.
clients)
id, name, approvalDate와 같은 필드를 가지고 있습니다.ClientsDB)
loadData, insertItem, updateItem, deleteItem 함수가 있으며, 이 함수들은 jsGrid가 데이터를 로드하고 조작하는 데 사용됩니다.loadData: 현재 배열 데이터를 로드합니다.insertItem: 새로운 항목을 추가하고, ID 값을 자동으로 증가시킵니다.updateItem: 기존 항목을 수정합니다.deleteItem: 특정 항목을 삭제합니다.jsGrid 설정
inserting: 새로운 데이터를 추가할 수 있게 합니다.editing: 기존 데이터를 수정할 수 있게 합니다.sorting: 열의 데이터를 정렬할 수 있습니다.paging: 데이터가 많아질 경우 페이지를 나눌 수 있습니다.fields)
name: 텍스트 필드로, 사용자의 이름을 입력받습니다.approvalDate: 결재일 필드로, 날짜와 시간을 입력받습니다. 이 필드는 datetime-local 타입의 입력을 받도록 설정되어 있습니다.이 코드에서 주요 동작은 다음과 같습니다.
insertItem 메서드를 통해 새로운 데이터가 clients 배열에 추가됩니다.id 값은 배열에서 가장 큰 id 값에 1을 더한 값으로 자동 할당됩니다.loadData 메서드를 통해 데이터가 로드되며, jsGrid는 이 데이터를 화면에 표시합니다. 데이터는 기본적으로 배열에서 가져옵니다.updateItem 메서드는 사용자가 데이터를 수정할 때 호출되며, 해당 데이터를 찾아서 수정된 값으로 업데이트합니다.deleteItem 메서드는 사용자가 데이터를 삭제할 때 호출됩니다. 해당 데이터를 찾아서 배열에서 제거합니다.이 예제에서는 jsGrid를 사용하여 간단한 CRUD 기능을 구현했습니다. 이와 같은 기능은 사용자의 데이터를 관리하는 데 매우 유용하며, 프론트엔드 개발에서 자주 사용됩니다. 실제 프로젝트에 적용할 때는 서버와 통신하여 데이터를 가져오고, 업데이트하는 방식으로 확장할 수 있습니다.
jsGrid는 손쉽게 데이터 그리드를 구현할 수 있는 훌륭한 라이브러리이므로, 작은 프로젝트에서부터 대규모 프로젝트까지 다양하게 활용할 수 있습니다. 이번 예제를 통해 프론트엔드 CRUD의 기본 개념을 이해할 수 있었기를 바랍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jsgrid CRUD 예제</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
</head>
<body>
<div id="jsGrid"></div>
<script>
$(function () {
var clients = [
{
"id": 1,
"name": "Otto Clay",
"approvalDate": "2023-06-28T14:30:00"
},
{
"id": 2,
"name": "Connor Johnston",
"approvalDate": "2023-06-29T09:15:00"
},
{
"id": 3,
"name": "Lacey Hess",
"approvalDate": "2023-06-30T11:45:00"
},
{
"id": 4,
"name": "Timothy Henson",
"approvalDate": "2023-07-01T16:20:00"
},
{
"id": 5,
"name": "Ramona Benton",
"approvalDate": null
}
];
var ClientsDB = {
loadData: function () {
console.log("Clients data loading...");
return clients;
},
insertItem: function (item) {
// jsGrid가 내부적으로 아이템을 추가하므로 여기서는 처리하지 않습니다.
return item;
},
updateItem: function (item) {
var index = clients.findIndex(x => x.id === item.id);
clients[index] = item;
return item;
},
deleteItem: function (item) {
var index = clients.findIndex(x => x.id === item.id);
clients.splice(index, 1);
}
};
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
controller: ClientsDB,
fields: [
{ name: "name", type: "text", width: 150, validate: "required", title: "이름" },
{
name: "approvalDate",
title: "결재일",
type: "text",
width: 150,
align: "center",
itemTemplate: function (value) {
if (value) {
var date = new Date(value);
return date.getFullYear() + "." +
("0" + (date.getMonth() + 1)).slice(-2) + "." +
("0" + date.getDate()).slice(-2) + " " +
("0" + date.getHours()).slice(-2) + ":" +
("0" + date.getMinutes()).slice(-2);
}
return "";
},
insertTemplate: function () {
var $result = $("<input>").attr("type", "datetime-local");
this.insertControl = $result;
return $result;
},
insertValue: function () {
return this.insertControl ? this.insertControl.val() : "";
},
editTemplate: function (value) {
var $result = $("<input>").attr("type", "datetime-local");
if (value) {
$result.val(value.slice(0, 16));
}
this.editControl = $result;
return $result;
},
editValue: function () {
return this.editControl ? this.editControl.val() : "";
}
},
{ type: "control" }
],
onItemInserted: function (args) {
console.log("Inserted:", args.item);
},
onItemUpdated: function (args) {
console.log("Updated:", args.item);
},
onItemDeleted: function (args) {
console.log("Deleted:", args.item);
}
});
});
</script>
</body>
</html>
onItemInserted, onItemUpdated, onItemDeleted 함수들은 여전히 매우 유용하며, 특정 상황에 맞게 적절히 사용할 수 있습니다. 현재는 콘솔에 로그를 출력하는 용도로만 사용되고 있지만, 실제 애플리케이션에서는 여러 중요한 역할을 할 수 있습니다. 각 함수의 유용성과 그 활용 방안에 대해 설명드리겠습니다.
onItemInserted: function (args)
onItemInserted: function (args) {
$.ajax({
type: "POST",
url: "/api/items", // 서버 API 엔드포인트
data: JSON.stringify(args.item),
contentType: "application/json",
success: function(response) {
alert("새 항목이 성공적으로 추가되었습니다!");
},
error: function() {
alert("항목 추가 중 오류가 발생했습니다.");
}
});
}onItemUpdated: function (args)
onItemUpdated: function (args) {
$.ajax({
type: "PUT",
url: "/api/items/" + args.item.id, // ID를 기준으로 수정
data: JSON.stringify(args.item),
contentType: "application/json",
success: function(response) {
alert("항목이 성공적으로 업데이트되었습니다.");
},
error: function() {
alert("항목 업데이트 중 오류가 발생했습니다.");
}
});
}
onItemDeleted: function (args)
onItemDeleted: function (args) {
if (confirm("이 항목을 정말 삭제하시겠습니까?")) {
$.ajax({
type: "DELETE",
url: "/api/items/" + args.item.id,
success: function(response) {
alert("항목이 성공적으로 삭제되었습니다.");
},
error: function() {
alert("항목 삭제 중 오류가 발생했습니다.");
}
});
}
}
이 함수들은 매우 유용하며, 데이터를 삽입, 수정, 삭제할 때 추가적인 작업을 처리하거나 사용자에게 피드백을 주는 데 중요한 역할을 할 수 있습니다. 특히 서버와의 상호작용을 추가하거나, 실시간 UI 업데이트 또는 사용자 알림을 추가하는 상황에서 큰 도움이 될 것입니다.
따라서 아래와 같은 용도로 사용할 수 있습니다:
따라서 이러한 이벤트 핸들러는 단순한 로깅 이상의 역할을 하며, 클라이언트와 서버 간의 데이터 흐름을 관리하는 중요한 포인트로 사용할 가치가 충분합니다.
| jquery select 태그의 option 비활성화 disabled 또는 선택막기 ✔ (3) | 2024.08.15 |
|---|---|
| fullCalendar 의 좌측 시분 hour minute 표기 hh:mm 형태로 변경하기 (7) | 2024.08.15 |
| 자바스크립트 JavaScript 에서 클립보드 Clipboard 에 복사하려면 어떻게 하나요? (2) | 2023.12.29 |
| javascript : serialize(), serializeArray() (2) | 2023.10.05 |
| AnyPicker Custom Picker - 모바일 달력 형태로 만들어보자. (0) | 2023.08.10 |