jQuery로 CRUD 애플리케이션 만들기?

38min
소개
이 가이드는 jQuery를 사용하여 완전한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 안내합니다.
우리는 데이터 관리를 간소화하기 위해 Back4app을 백엔드 서비스로 사용할 것입니다. 이 튜토리얼에서는 Back4app 프로젝트를 구성하고, 유연한 스키마를 설계하며, REST API 호출을 통해 jQuery로 CRUD 기능을 구현하는 방법을 탐구할 것입니다.
우리는 Basic-CRUD-App-jQuery라는 제목의 Back4app 프로젝트를 설정하는 것으로 시작합니다. 이 프로젝트는 확장 가능한 비관계형 데이터 저장 솔루션을 제공합니다. Back4app 내에서 수동으로 또는 Back4app의 AI 에이전트의 도움을 받아 클래스와 필드를 생성하여 데이터 모델을 정의할 것입니다.
그 후, 사용하기 쉬운 드래그 앤 드롭 인터페이스인 Back4app Admin App을 사용하여 데이터를 관리하는 방법을 배우게 됩니다.
마지막으로, jQuery 기반의 프론트 엔드를 REST API 호출을 통해 Back4app에 연결하여 안전한 접근이 유지되도록 합니다.
이 튜토리얼이 끝나면 기본 CRUD 작업과 안전한 사용자 인증 및 데이터 관리를 수행할 수 있는 프로덕션 준비가 완료된 jQuery 애플리케이션을 갖게 될 것입니다.
주요 요점
강력한 로우코드 백엔드를 사용하여 jQuery 기반 CRUD 애플리케이션을 구축하세요.
확장 가능한 백엔드를 설계하고 이를 jQuery 프론트엔드와 통합하는 방법을 이해하세요.
효율적인 데이터 조작을 위해 직관적인 Back4app 관리 앱을 사용하는 방법을 배우세요.
애플리케이션을 원활하게 배포하기 위한 컨테이너화와 같은 배포 전략을 발견하세요.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
Back4app 계정과 새 프로젝트가 설정되어 있습니다.
안내가 필요하신가요? Back4app 시작하기를 방문하세요.
작동하는 웹 개발 환경이 필요합니다.
VSCode, Sublime Text 또는 유사한 코드 편집기를 사용하고, 테스트를 위해 최신 브라우저를 확보하세요.
jQuery, JavaScript 및 REST API에 대한 기본 지식이 필요합니다.
복습이 필요하시면 jQuery 문서를 확인하세요.
﻿
1단계 – 프로젝트 설정
새로운 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 정하세요: Basic-CRUD-App-jQuery 및 화면의 지침에 따라 설정을 완료하세요.
새 프로젝트 만들기
﻿
생성 후, 프로젝트가 대시보드에 나타나며 백엔드 구성의 기초를 마련합니다.
﻿
2단계 – 데이터 모델 설계
데이터 구조 정의하기
이 CRUD 애플리케이션을 위해 Back4app에서 여러 클래스(컬렉션)를 생성할 것입니다. 아래는 CRUD 작업에 필수적인 주요 클래스와 그 필드입니다.
1. 아이템 클래스
이 클래스는 각 아이템에 대한 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간략한 설명.
생성일
날짜
항목이 추가된 시간의 타임스탬프.
업데이트됨
날짜
마지막 수정의 타임스탬프.
2. 사용자 클래스
이 클래스는 사용자 자격 증명 및 인증 세부 정보를 처리합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
사용자의 이메일 주소.
비밀번호 해시
문자열
안전한 로그인을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
Back4app 대시보드를 통해 이러한 클래스와 필드를 수동으로 추가할 수 있습니다.
새 클래스 만들기
﻿
필드를 추가하려면 데이터 유형을 선택하고, 필드 이름을 입력하고, 필요한 경우 기본값을 설정하고, 필요한 경우 필수로 표시합니다.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
통합된 Back4app AI 에이전트는 간단한 설명을 바탕으로 스키마를 자동으로 생성할 수 있습니다. 이는 프로젝트 초기화를 간소화하고 모델이 CRUD 작업을 지원하도록 보장합니다.
AI 에이전트 사용 방법:
AI 에이전트 열기:
Back4app 대시보드에 로그인하고 프로젝트 설정 아래의 AI 에이전트 섹션으로 이동합니다.
스키마 설명하기:
필요한 클래스와 필드에 대한 자세한 정보를 제공합니다.
검토 및 확인:
AI 에이전트가 입력을 처리하면 스키마를 제안합니다. 이를 검토하고 승인하여 구성을 완료합니다.
예시 프롬프트
Text
Create these classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create these classes in my Back4app project:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
이 AI 지원 프로세스는 시간을 절약할 뿐만 아니라 일관되고 최적화된 데이터 스키마를 보장합니다.
﻿
3단계 – 관리자 앱 활성화 및 CRUD 작업 처리
관리자 앱 시작하기
Back4app 관리자 앱은 효율적인 백엔드 데이터 관리를 위한 코드 없는 솔루션을 제공합니다. 직관적인 드래그 앤 드롭 인터페이스는 레코드를 추가, 보기, 편집 및 삭제하는 CRUD 작업을 수행하는 과정을 간소화합니다.
관리자 앱 활성화하기
“더보기” 메뉴로 이동하여 Back4app 대시보드에서.
“관리자 앱” 선택 후 “관리자 앱 활성화.”
관리자 자격 증명 설정을 통해 초기 관리자 계정을 생성하고, 역할(예: B4aAdminUser) 및 시스템 클래스를 설정합니다.
관리자 앱 활성화
﻿
활성화되면 관리자 앱에 로그인하여 애플리케이션 데이터를 관리합니다.
관리자 앱 대시보드
﻿
CRUD 작업을 위한 관리자 앱 사용하기
관리자 앱 내에서 다음을 수행할 수 있습니다:
레코드 삽입: 클래스 내에서 “레코드 추가”를 클릭하여 새 데이터를 추가합니다.
레코드 보기 및 편집: 레코드를 선택하여 세부 정보를 검토하거나 필드를 수정합니다.
레코드 삭제: 더 이상 필요하지 않은 항목을 제거합니다.
이 간소화된 도구는 데이터 관리를 단순화하여 프론트엔드 로직에 집중할 수 있게 합니다.
﻿
4단계 – jQuery 애플리케이션을 Back4app과 연결하기
이제 백엔드가 구성되었으므로 jQuery 기반 애플리케이션을 Back4app에 연결할 시간입니다.
jQuery로 AJAX 호출하기
Parse SDK를 사용하는 대신 jQuery의 AJAX 메서드를 사용하여 직접 REST API 호출을 수행합니다. 아래는 CRUD 작업을 수행하는 방법의 예입니다.
항목 가져오기
JS
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'GET',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  success: function(response) {
    console.log('Items retrieved:', response.results);
  },
  error: function(error) {
    console.error('Error fetching items:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'GET',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  success: function(response) {
    console.log('Items retrieved:', response.results);
  },
  error: function(error) {
    console.error('Error fetching items:', error);
  }
});
﻿
항목 생성하기
JS
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'New Item',
    description: 'A brief description of the new item.'
  }),
  success: function(response) {
    console.log('Item created:', response);
  },
  error: function(error) {
    console.error('Error creating item:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'New Item',
    description: 'A brief description of the new item.'
  }),
  success: function(response) {
    console.log('Item created:', response);
  },
  error: function(error) {
    console.error('Error creating item:', error);
  }
});
﻿
항목 업데이트하기
JS
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items/YOUR_ITEM_ID',
  method: 'PUT',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'Updated Title',
    description: 'Updated description.'
  }),
  success: function(response) {
    console.log('Item updated:', response);
  },
  error: function(error) {
    console.error('Error updating item:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items/YOUR_ITEM_ID',
  method: 'PUT',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'Updated Title',
    description: 'Updated description.'
  }),
  success: function(response) {
    console.log('Item updated:', response);
  },
  error: function(error) {
    console.error('Error updating item:', error);
  }
});
﻿
항목 삭제하기
JS
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items/YOUR_ITEM_ID',
  method: 'DELETE',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  success: function(response) {
    console.log('Item deleted:', response);
  },
  error: function(error) {
    console.error('Error deleting item:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items/YOUR_ITEM_ID',
  method: 'DELETE',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  success: function(response) {
    console.log('Item deleted:', response);
  },
  error: function(error) {
    console.error('Error deleting item:', error);
  }
});
﻿
필요에 따라 이러한 AJAX 호출을 jQuery 스크립트에 통합하여 애플리케이션에서 CRUD 작업을 관리하세요.
﻿
5단계 – 백엔드 보안 설정하기
액세스 제어 목록(ACL) 구성하기
객체에 대한 ACL을 설정하여 데이터를 보호하세요. 예를 들어, 소유자만 읽고 쓸 수 있는 항목을 생성하려면:
JS
var acl = {
  "*": { "read": false, "write": false },
  "OWNER_USER_ID": { "read": true, "write": true }
};

$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'Private Item',
    description: 'This item is only accessible by its owner.',
    ACL: acl
  }),
  success: function(response) {
    console.log('Private item created:', response);
  },
  error: function(error) {
    console.error('Error creating private item:', error);
  }
});
var acl = {
  "*": { "read": false, "write": false },
  "OWNER_USER_ID": { "read": true, "write": true }
};

$.ajax({
  url: 'https://parseapi.back4app.com/classes/Items',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    title: 'Private Item',
    description: 'This item is only accessible by its owner.',
    ACL: acl
  }),
  success: function(response) {
    console.log('Private item created:', response);
  },
  error: function(error) {
    console.error('Error creating private item:', error);
  }
});
﻿
클래스 수준 권한(CLPS) 설정하기
Back4app 대시보드를 사용하여 CLP를 구성하고, 인증된 사용자만 민감한 클래스에 접근할 수 있도록 하세요.
﻿
6단계 – 사용자 인증 구현하기
사용자 계정 관리하기
Back4app은 인증 처리를 위해 내장된 사용자 클래스를 사용합니다. jQuery 앱에서 REST API 호출로 사용자 가입 및 로그인을 관리할 수 있습니다.
새 사용자 등록하기
JS
$.ajax({
  url: 'https://parseapi.back4app.com/users',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    username: 'newUser',
    password: 'securePassword',
    email: '[email protected]'
  }),
  success: function(response) {
    console.log('User registered:', response);
  },
  error: function(error) {
    console.error('Registration error:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/users',
  method: 'POST',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  },
  data: JSON.stringify({
    username: 'newUser',
    password: 'securePassword',
    email: 'newUser@example.com'
  }),
  success: function(response) {
    console.log('User registered:', response);
  },
  error: function(error) {
    console.error('Registration error:', error);
  }
});
﻿
사용자 로그인하기
JS
$.ajax({
  url: 'https://parseapi.back4app.com/login',
  method: 'GET',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  data: {
    username: 'newUser',
    password: 'securePassword'
  },
  success: function(response) {
    console.log('User logged in:', response);
  },
  error: function(error) {
    console.error('Login error:', error);
  }
});
$.ajax({
  url: 'https://parseapi.back4app.com/login',
  method: 'GET',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
  },
  data: {
    username: 'newUser',
    password: 'securePassword'
  },
  success: function(response) {
    console.log('User logged in:', response);
  },
  error: function(error) {
    console.error('Login error:', error);
  }
});
﻿
사용자 로그인하기
이 방법을 확장하여 세션 관리, 비밀번호 재설정 및 기타 인증 기능을 관리할 수 있습니다.
﻿
7단계 – jQuery 애플리케이션 배포
Back4app은 간편한 배포 프로세스를 제공합니다. 정적 사이트 호스팅 또는 컨테이너화를 포함한 다양한 방법으로 jQuery 애플리케이션을 배포할 수 있습니다.
7.1 애플리케이션 준비하기
빌드 및 축소:
webpack 또는 gulp와 같은 도구를 사용하여 jQuery 스크립트를 번들하고 축소합니다.
자산 확인:
모든 HTML, CSS 및 JavaScript 파일이 올바르게 컴파일되었는지 확인합니다.
﻿
7.2 프로젝트 구조 정리하기
일반적인 프로젝트 레이아웃은 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-jQuery/
|-- index.html
|-- css/
|   |-- styles.css
|-- js/
|   |-- app.js
|   |-- jquery.min.js
|-- assets/
|   |-- images/
|       |-- logo.png
|-- README.md
Basic-CRUD-App-jQuery/
|-- index.html
|-- css/
|   |-- styles.css
|-- js/
|   |-- app.js
|   |-- jquery.min.js
|-- assets/
|   |-- images/
|       |-- logo.png
|-- README.md
﻿
예시: AJAX CRUD in app.js
JS
$(document).ready(function() {
  // Fetch and display items
  function loadItems() {
    $.ajax({
      url: 'https://parseapi.back4app.com/classes/Items',
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      success: function(response) {
        $('#itemsContainer').empty();
        $.each(response.results, function(index, item) {
          $('#itemsContainer').append('<div>' +
            '<h3>' + item.title + '</h3>' +
            '<p>' + item.description + '</p>' +
          '</div>');
        });
      },
      error: function(error) {
        console.error('Error loading items:', error);
      }
    });
  }

  // Call the function on page load
  loadItems();
});
$(document).ready(function() {
  // Fetch and display items
  function loadItems() {
    $.ajax({
      url: 'https://parseapi.back4app.com/classes/Items',
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      success: function(response) {
        $('#itemsContainer').empty();
        $.each(response.results, function(index, item) {
          $('#itemsContainer').append('<div>' +
            '<h3>' + item.title + '</h3>' +
            '<p>' + item.description + '</p>' +
          '</div>');
        });
      },
      error: function(error) {
        console.error('Error loading items:', error);
      }
    });
  }

  // Call the function on page load
  loadItems();
});
﻿
7.3 애플리케이션 배포하기
정적 호스팅
프로젝트 파일을 GitHub Pages, Netlify 또는 Vercel과 같은 정적 호스팅 제공업체에 업로드하세요.
애플리케이션 도커화하기
컨테이너화를 선호하는 경우, 프로젝트 루트에 Dockerfile을 포함하세요:
Dockerfile
# Use an official Node image to serve static files
FROM node:14-alpine

# Set the working directory
WORKDIR /app

# Copy your project files into the container
COPY . .

# Install a simple static server
RUN npm install -g serve

# Expose the port used by the static server
EXPOSE 3000

# Command to run the server
CMD ["serve", "-s", "."]
# Use an official Node image to serve static files
FROM node:14-alpine

# Set the working directory
WORKDIR /app

# Copy your project files into the container
COPY . .

# Install a simple static server
RUN npm install -g serve

# Expose the port used by the static server
EXPOSE 3000

# Command to run the server
CMD ["serve", "-s", "."]
﻿
Docker 환경을 설정한 후, Back4app 대시보드의 웹 배포 섹션에서 GitHub 리포지토리를 연결하고, 필요에 따라 빌드 명령을 구성한 후 애플리케이션을 배포하세요.
﻿
8단계 – 결론 및 다음 단계
축하합니다! Back4app과 통합된 jQuery 기반 CRUD 애플리케이션을 성공적으로 구축했습니다. 
이 튜토리얼에서는 Basic-CRUD-App-jQuery, 항목 및 사용자에 대한 데이터 스키마를 정의하고 Back4app 관리 앱을 통해 데이터를 관리했습니다. 
또한, jQuery 프론트엔드를 REST API 호출을 통해 연결하고 필수 보안 조치를 구현했습니다.
다음 단계:
애플리케이션 확장:
고급 필터링, 상세 보기 또는 실시간 업데이트와 같은 기능을 추가하세요.
백엔드 기능 향상:
클라우드 기능을 탐색하거나, 서드파티 API를 통합하거나, 역할 기반 접근을 구현하세요.
기술 향상:
Back4app 문서를 살펴보고 더 고급 기능을 위한 추가 튜토리얼을 탐색하세요.
코딩을 즐기고 jQuery CRUD 애플리케이션에 행운이 있기를 바랍니다!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 설명.
생성일	날짜	항목이 추가된 시간의 타임스탬프.
업데이트됨	날짜	마지막 수정의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 이메일 주소.
비밀번호 해시	문자열	안전한 로그인을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Create a CRUD Application with Svelte?
Node.js로 CRUD 앱을 만드는 방법은?