퀵스타터즈

jQuery용 백엔드를 구축하는 방법?

38min

소개

이 튜토리얼에서는 jQuery를 위한 백엔드를 구축하는 방법을 배웁니다.

우리는 Back4app의 필수 기능인 데이터베이스 관리, 클라우드 코드, REST 및 GraphQL API, 사용자 인증 및 실시간 쿼리를 통합하여 안전하고 확장 가능한 백엔드를 만들 것입니다.

이 백엔드는 AJAX 호출 및 기타 일반적인 jQuery 메서드를 통해 jQuery 기반 프론트엔드와 통신합니다.

Back4app의 직관적인 환경은 서버나 데이터베이스를 설정하는 데 필요한 시간을 줄여줍니다.

몇 가지 간단한 단계를 따르면 ACL, 클래스 수준 권한, 데이터 모델링, 파일 업로드 등을 직접 경험할 수 있습니다.

이 튜토리얼이 끝나면 Back4app 백엔드에 연결된 완전한 기능의 jQuery 기반 앱을 위한 탄탄한 기초를 갖추게 될 것입니다.

사용자 정의 논리를 추가하고, 외부 API를 통합하며, 세밀한 제어로 데이터를 보호할 준비가 될 것입니다.

전제 조건

이 튜토리얼을 완료하려면 다음이 필요합니다:

  • Back4app 계정과 새로운 Back4app 프로젝트 Back4app 시작하기. 계정이 없으시면 무료로 생성할 수 있습니다. 위 가이드를 따라 프로젝트를 준비하세요.
  • 기본 jQuery 환경 jQuery는 공식 웹사이트에서 다운로드할 수 있습니다.
  • Node.js (버전 14 이상) 설치 (선택 사항) Node.js는 브라우저에서 jQuery에 엄격히 필요하지 않지만, 로컬 테스트 서버를 실행하거나 로컬 테스트를 원할 경우 npm 패키지를 설치하는 데 필요할 수 있습니다. Node.js 설치하기
  • JavaScript 및 jQuery 기본 사항에 대한 이해 jQuery 공식 문서.

시작하기 전에 모든 필수 조건이 준비되어 있는지 확인하세요. 그래야 jQuery 기반의 프론트 엔드를 구축하고 Back4app에 연결할 때 원활하게 따라갈 수 있습니다.

1단계 – Back4app 프로젝트 설정

새 프로젝트 만들기

jQuery 백엔드 프로젝트를 시작하려면 새로운 Back4app 프로젝트를 만드세요:

  1. Back4app 계정에 로그인하세요.
  2. “새 앱” 버튼을 클릭하세요 Back4app 대시보드에서.
  3. 앱에 이름을 지정하세요 (예: “jQuery-Backend-Tutorial”).
Document image


프로젝트가 생성되면 Back4app 대시보드에서 확인할 수 있습니다. 이것이 jQuery의 백엔드 구성의 기초가 될 것입니다.

Parse SDK 연결하기

Back4app은 데이터 및 실시간 기능을 위해 Parse 플랫폼을 사용합니다. jQuery와 함께 Parse SDK를 직접 사용하려면 HTML에서 스크립트로 로드할 수 있습니다.

Parse 키 가져오기: Back4app 대시보드에서 앱의 “앱 설정” 또는 “보안 및 키”를 열어 다음을 찾으세요:

  • 애플리케이션 ID
  • JavaScript 키
  • Parse 서버 URL (보통 https://parseapi.back4app.com)
Document image


Parse SDK 포함하기 HTML 파일에:

HTML


jQuery 환경에서 jQuery를 먼저 로드한 다음 Parse를 로드하고 스크립트에서 Parse 객체와 상호작용할 수 있습니다. 이 연결은 모든 데이터 호출이 Back4app 백엔드에서 Parse 플랫폼을 통해 이루어지도록 보장합니다.

2단계 – 데이터베이스 설정

데이터 저장 및 쿼리

Parse SDK를 통합한 후, Back4app 데이터베이스에서 데이터를 저장하고 가져올 수 있습니다. 다음은 jQuery와 Parse를 사용하여 “Todo” 객체를 생성하고 검색하는 간단한 예입니다:

HTML


cURL을 사용하여 REST API를 호출할 수도 있습니다:

Bash


또는 GraphQL을 사용할 수 있습니다:

GraphQL


스키마 설계 및 데이터 유형

Back4app 대시보드에서:

  1. “데이터베이스”로 이동하십시오.
  2. 새 클래스를 생성하십시오 (예: “Todo”) 및 제목(String)과 isCompleted(Boolean)과 같은 열을 추가하십시오.
새 클래스 만들기
새 클래스 만들기


객체를 처음 저장할 때 Parse가 자동으로 열을 생성하도록 할 수도 있습니다.

열 만들기
열 만들기


AI 에이전트 사용하기

Back4app에는 데이터 모델링을 위한 AI 에이전트가 있습니다:

  1. AI 에이전트를 엽니다 앱의 대시보드나 메뉴에서.
  2. 데이터 모델을 설명하십시오 (예: “클래스 스키마로 ToDo 앱 만들기.”).
  3. AI 에이전트가 스키마를 생성하도록 하십시오.
Document image


관계형 데이터

여러 Todo 항목에 연결된 Category 클래스가 있는 경우, 포인터 또는 관계를 사용할 수 있습니다:

HTML


실시간 쿼리

jQuery 앱에서 실시간 업데이트를 위해:

  1. 실시간 쿼리 활성화서버 설정에서 Back4app 대시보드에서.
  2. 실시간 쿼리 구독 초기화:
HTML


이 구독은 “Todo” 객체가 생성, 업데이트 또는 삭제될 때마다 실시간으로 알림을 보냅니다.

3단계 – ACL 및 CLP를 통한 보안 적용

Back4app 보안 메커니즘

ACL(액세스 제어 목록)CLP(클래스 수준 권한)를 사용하면 객체 또는 클래스 수준에서 데이터를 읽고 쓸 수 있는 사람을 제어할 수 있습니다.

Document image


액세스 제어 목록(ACL)

ACL은 개별 객체에 설정되어 액세스를 제한합니다:

HTML

ACL 편집
ACL 편집


클래스 수준 권한 (CLPs)

CLPs는 전체 클래스에 대한 기본 권한을 제어합니다:

  1. Back4app 대시보드에서, 데이터베이스 섹션을 엽니다.
  2. 클래스를 선택합니다 (예: “Todo”).
  3. 클래스 수준 권한 탭으로 이동하여 공개, 인증된 또는 역할 기반 액세스를 구성합니다.
Document image


객체 수준 보안을 위한 ACL과 더 넓은 제한을 위한 CLPs를 결합합니다. 자세한 내용은 앱 보안 가이드라인을 참조하십시오.

4단계 – 클라우드 함수 작성 및 배포

클라우드 코드는 서버 측에서 사용자 정의 JavaScript를 실행하여 비즈니스 로직, 데이터 검증 또는 외부 API 호출을 추가할 수 있게 해줍니다.

작동 방식

코드를 main.js (또는 유사한 파일)에 배치하고, Back4app에 배포한 후 Parse Server가 실행을 처리하도록 합니다. 더 복잡한 로직을 위해 NPM 모듈을 사용할 수도 있습니다.

JS


함수 배포하기

Bash

  • 대시보드를 통해:
    1. 앱의 대시보드에서 Cloud Code > Functions로 이동합니다.
    2. 함수를 main.js에 복사/붙여넣기 합니다.
    3. 배포를 클릭합니다.
Document image


함수 호출하기

jQuery를 사용하여 Cloud Function을 다음과 같이 호출할 수 있습니다:

HTML


5단계 – 사용자 인증 구성

Back4app에서의 사용자 인증

Back4app은 Parse.User 클래스를 사용하여 인증을 처리합니다. 비밀번호 해싱, 세션 토큰 및 보안 저장소는 자동으로 처리됩니다.

사용자 인증 설정

HTML


세션 관리

현재 사용자를 가져올 수 있습니다:

Text


로그아웃:

Text


소셜 로그인 통합

Back4app은 Google, Facebook, Apple 및 기타 OAuth 제공자를 지원합니다. 자세한 내용은 소셜 로그인 문서를 참조하세요.

6단계 – 파일 저장 처리

파일 업로드 및 검색

업로드를 처리하려면 Parse.File을 사용하세요:

HTML


파일을 필드에 할당하여 클래스에 저장할 수 있습니다:

Text


파일 URL 검색:

Text


파일 보안

Parse Server에서 파일 업로드 설정을 수정하여 파일을 업로드할 수 있는 사람을 관리할 수 있습니다:

JSON


7단계 – 클라우드 작업으로 작업 예약하기

클라우드 작업

오래된 데이터를 삭제하는 것과 같은 정기 작업을 실행할 수 있습니다:

JS


대시보드에서 앱 설정 > 서버 설정 > 백그라운드 작업으로 이동하여 예약합니다.

클라우드 작업 예약하기
클라우드 작업 예약하기


8단계 – 웹훅 통합하기

웹훅은 특정 이벤트가 발생할 때마다 앱이 외부 서비스에 HTTP 요청을 보낼 수 있게 해줍니다:

  1. 더보기 > 웹훅에서 Back4app 대시보드로 이동합니다.
  2. 새 웹훅 추가을 외부 엔드포인트와 함께 설정합니다.
  3. 트리거를 “Todo 클래스에 새 레코드”와 같은 이벤트에 대해 구성합니다.
웹훅 추가하기
웹훅 추가하기


슬랙이나 Stripe와 같은 결제 게이트웨이를 웹훅을 통해 이벤트 데이터를 전송하여 통합할 수 있습니다.

BeforeSave 웹훅
BeforeSave 웹훅


9단계 – Back4app 관리 패널 탐색

Back4app 관리 앱은 CRUD 작업을 위한 비기술적인 웹 기반 인터페이스를 제공합니다.

관리 앱 활성화

이동하십시오 앱 대시보드 > 더보기 > 관리자 앱 을 클릭하고 “관리자 앱 활성화”를 클릭하십시오:

관리자 앱 활성화
관리자 앱 활성화


첫 번째 관리자 사용자 생성, 이는 자동으로 새로운 역할(B4aAdminUser)과 스키마의 클래스를 생성합니다:

Document image


서브도메인 선택 관리 앱에 접근하기 위해:

Document image


로그인 새 관리자 자격 증명을 사용하여:

Document image


활성화되면 이 관리 앱을 통해 코딩 없이 데이터 관리 또는 팀원에게 액세스 권한을 부여할 수 있습니다.

결론

이 가이드에서는 Back4app을 사용하여 jQuery의 백엔드를 구축하는 방법을 배웠습니다. 당신은:

  • 백엔드 기초로서 새로운 Back4app 프로젝트를 생성했습니다.
  • 스키마 설계 및 데이터 관계를 포함한 데이터베이스를 설정했습니다.
  • 세밀한 보안을 위해 ACL 및 CLP를 사용했습니다.
  • 사용자 정의 서버 측 논리를 위해 클라우드 코드를 배포했습니다.
  • 사용자 인증, 파일 저장 및 실시간 업데이트를 구성했습니다.
  • 백그라운드 작업을 예약하고 외부 서비스에 대한 웹훅을 통합했습니다.
  • 더 간단한 데이터 관리를 위해 Back4app 관리 패널을 탐색했습니다.

이제 기본 jQuery + Back4app 설정을 전체 프로덕션 솔루션으로 확장할 준비가 되었습니다. 소셜 로그인이나 더 자세한 보안 규칙과 같은 고급 기능을 계속 통합하세요. 확장 가능하고 데이터 기반의 애플리케이션을 구축하는 것을 즐기세요!

다음 단계

  • 프로덕션 준비 완료: 고급 역할 기반 권한, 캐싱 전략 및 성능 조정을 추가하세요.
  • 타사 API 통합: 결제, 메시징 또는 분석을 위해.
  • Back4app 문서 탐색: 고급 보안, 로그 또는 분석에 대해 더 깊이 파고드세요.
  • 실제 앱 만들기: jQuery의 단순성과 Back4app의 강력한 백엔드 서비스를 결합하여 사용하세요.