프로그래밍/jQuery 👍

jsGrid를 이용한 CRUD 웹 애플리케이션 개발

재우니 2024. 6. 28. 23:25

jsGrid를 이용한 CRUD 웹 애플리케이션 개발

 

 

 

이번 블로그에서는 jsGrid를 사용하여 간단한 CRUD(생성, 읽기, 업데이트, 삭제) 웹 애플리케이션을 구축하는 방법을 알아보겠습니다. 이 튜토리얼은 주니어 개발자가 프론트엔드 개발에서 데이터를 다루는 기본 개념을 이해하는 데 중점을 두고 있습니다.

1. jsGrid란 무엇인가?

jsGrid는 데이터 그리드를 화면에 그려주고, 그 데이터를 CRUD 기능을 통해 조작할 수 있게 해주는 JavaScript 라이브러리입니다. jsGrid를 사용하면 적은 코드로도 빠르게 테이블 형태의 데이터를 삽입, 수정, 삭제할 수 있습니다. 또한 jQuery 기반으로 동작하기 때문에 jQuery를 이미 알고 있다면 쉽게 적용할 수 있습니다.

2. 기본 HTML 구조

아래는 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 웹 애플리케이션 예제입니다.

주요 구성 요소:

  1. 데이터 배열 (clients)
    • 이 배열은 사용자의 데이터를 저장합니다. 각 항목은 id, name, approvalDate와 같은 필드를 가지고 있습니다.
  2. 데이터베이스 컨트롤러 (ClientsDB)
    • loadData, insertItem, updateItem, deleteItem 함수가 있으며, 이 함수들은 jsGrid가 데이터를 로드하고 조작하는 데 사용됩니다.
    • loadData: 현재 배열 데이터를 로드합니다.
    • insertItem: 새로운 항목을 추가하고, ID 값을 자동으로 증가시킵니다.
    • updateItem: 기존 항목을 수정합니다.
    • deleteItem: 특정 항목을 삭제합니다.
  3. jsGrid 설정
    • inserting: 새로운 데이터를 추가할 수 있게 합니다.
    • editing: 기존 데이터를 수정할 수 있게 합니다.
    • sorting: 열의 데이터를 정렬할 수 있습니다.
    • paging: 데이터가 많아질 경우 페이지를 나눌 수 있습니다.
  4. 필드 설정 (fields)
    • name: 텍스트 필드로, 사용자의 이름을 입력받습니다.
    • approvalDate: 결재일 필드로, 날짜와 시간을 입력받습니다. 이 필드는 datetime-local 타입의 입력을 받도록 설정되어 있습니다.

3. CRUD 동작 이해하기

이 코드에서 주요 동작은 다음과 같습니다.

  1. 생성(Inserting)
    • 사용자가 새로운 데이터를 추가할 때, insertItem 메서드를 통해 새로운 데이터가 clients 배열에 추가됩니다.
    • id 값은 배열에서 가장 큰 id 값에 1을 더한 값으로 자동 할당됩니다.
  2. 읽기(Reading)
    • loadData 메서드를 통해 데이터가 로드되며, jsGrid는 이 데이터를 화면에 표시합니다. 데이터는 기본적으로 배열에서 가져옵니다.
  3. 수정(Updating)
    • updateItem 메서드는 사용자가 데이터를 수정할 때 호출되며, 해당 데이터를 찾아서 수정된 값으로 업데이트합니다.
  4. 삭제(Deleting)
    • deleteItem 메서드는 사용자가 데이터를 삭제할 때 호출됩니다. 해당 데이터를 찾아서 배열에서 제거합니다.

4. 마무리

이 예제에서는 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 함수들은 여전히 매우 유용하며, 특정 상황에 맞게 적절히 사용할 수 있습니다. 현재는 콘솔에 로그를 출력하는 용도로만 사용되고 있지만, 실제 애플리케이션에서는 여러 중요한 역할을 할 수 있습니다. 각 함수의 유용성과 그 활용 방안에 대해 설명드리겠습니다.

1. onItemInserted: function (args)

  • 설명: 새 항목이 jsGrid에 삽입된 후 호출되는 함수입니다.
  • 활용 가능성:
    • 서버에 데이터 전송: 클라이언트 측에서 항목이 추가된 후 서버로 해당 데이터를 전송해야 할 경우에 유용합니다. 예를 들어, AJAX 요청을 통해 서버에 새로 추가된 데이터를 전달하고, 데이터베이스에 저장할 수 있습니다.
    • 알림 또는 UI 업데이트: 새로운 항목이 추가된 후 사용자에게 성공 메시지를 표시하거나 추가된 항목에 대해 어떤 UI 상의 변화(예: 강조 효과)를 줄 수 있습니다.
    활용 예시:

 

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("항목 추가 중 오류가 발생했습니다.");
        }
    });
}

2. onItemUpdated: function (args)

  • 설명: 기존 항목이 수정된 후 호출되는 함수입니다.
  • 활용 가능성:
    • 서버에 수정된 데이터 업데이트: 항목이 수정된 후 서버로 변경된 데이터를 보내서 데이터베이스에 업데이트할 수 있습니다.
    • 변경 사항 기록: 항목이 업데이트되면 변경 내역을 로깅하거나 저장할 수 있습니다. 이를 통해 사용자가 어떤 데이터를 수정했는지 추적할 수 있습니다.
    • 실시간 데이터 반영: 데이터를 수정한 후 UI 상에서 즉각적인 반영이나 다른 부분을 업데이트해야 할 때 유용합니다.
    활용 예시:

 

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("항목 업데이트 중 오류가 발생했습니다.");
        }
    });
}

 

3. 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 업데이트 또는 사용자 알림을 추가하는 상황에서 큰 도움이 될 것입니다.

따라서 아래와 같은 용도로 사용할 수 있습니다:

  • 데이터 삽입, 수정, 삭제 시 서버와 비동기 통신(AJAX)
  • 사용자 피드백 (알림, 경고창)
  • 로그 기록 또는 UI 상태 변경
  • 추가적인 데이터 동기화 또는 다른 관련된 데이터의 갱신

따라서 이러한 이벤트 핸들러는 단순한 로깅 이상의 역할을 하며, 클라이언트와 서버 간의 데이터 흐름을 관리하는 중요한 포인트로 사용할 가치가 충분합니다.

 

 

 

저작자표시 비영리 동일조건