jQuery용 백엔드를 구축하는 방법?
이 튜토리얼에서는 jQuery를 위한 백엔드를 구축하는 방법을 배웁니다.
우리는 Back4app의 필수 기능인 데이터베이스 관리, 클라우드 코드, REST 및 GraphQL API, 사용자 인증 및 실시간 쿼리를 통합하여 안전하고 확장 가능한 백엔드를 만들 것입니다.
이 백엔드는 AJAX 호출 및 기타 일반적인 jQuery 메서드를 통해 jQuery 기반 프론트엔드와 통신합니다.
Back4app의 직관적인 환경은 서버나 데이터베이스를 설정하는 데 필요한 시간을 줄여줍니다.
몇 가지 간단한 단계를 따르면 ACL, 클래스 수준 권한, 데이터 모델링, 파일 업로드 등을 직접 경험할 수 있습니다.
이 튜토리얼이 끝나면 Back4app 백엔드에 연결된 완전한 기능의 jQuery 기반 앱을 위한 탄탄한 기초를 갖추게 될 것입니다.
사용자 정의 논리를 추가하고, 외부 API를 통합하며, 세밀한 제어로 데이터를 보호할 준비가 될 것입니다.
이 튜토리얼을 완료하려면 다음이 필요합니다:
- Node.js (버전 14 이상) 설치 (선택 사항) Node.js는 브라우저에서 jQuery에 엄격히 필요하지 않지만, 로컬 테스트 서버를 실행하거나 로컬 테스트를 원할 경우 npm 패키지를 설치하는 데 필요할 수 있습니다. Node.js 설치하기
시작하기 전에 모든 필수 조건이 준비되어 있는지 확인하세요. 그래야 jQuery 기반의 프론트 엔드를 구축하고 Back4app에 연결할 때 원활하게 따라갈 수 있습니다.
jQuery 백엔드 프로젝트를 시작하려면 새로운 Back4app 프로젝트를 만드세요:
- Back4app 계정에 로그인하세요.
- “새 앱” 버튼을 클릭하세요 Back4app 대시보드에서.
- 앱에 이름을 지정하세요 (예: “jQuery-Backend-Tutorial”).
프로젝트가 생성되면 Back4app 대시보드에서 확인할 수 있습니다. 이것이 jQuery의 백엔드 구성의 기초가 될 것입니다.
Back4app은 데이터 및 실시간 기능을 위해 Parse 플랫폼을 사용합니다. jQuery와 함께 Parse SDK를 직접 사용하려면 HTML에서 스크립트로 로드할 수 있습니다.
Parse 키 가져오기: Back4app 대시보드에서 앱의 “앱 설정” 또는 “보안 및 키”를 열어 다음을 찾으세요:
- 애플리케이션 ID
- JavaScript 키
- Parse 서버 URL (보통 https://parseapi.back4app.com)
Parse SDK 포함하기 HTML 파일에:
jQuery 환경에서 jQuery를 먼저 로드한 다음 Parse를 로드하고 스크립트에서 Parse 객체와 상호작용할 수 있습니다. 이 연결은 모든 데이터 호출이 Back4app 백엔드에서 Parse 플랫폼을 통해 이루어지도록 보장합니다.
Parse SDK를 통합한 후, Back4app 데이터베이스에서 데이터를 저장하고 가져올 수 있습니다. 다음은 jQuery와 Parse를 사용하여 “Todo” 객체를 생성하고 검색하는 간단한 예입니다:
cURL을 사용하여 REST API를 호출할 수도 있습니다:
또는 GraphQL을 사용할 수 있습니다:
Back4app 대시보드에서:
- “데이터베이스”로 이동하십시오.
- 새 클래스를 생성하십시오 (예: “Todo”) 및 제목(String)과 isCompleted(Boolean)과 같은 열을 추가하십시오.
객체를 처음 저장할 때 Parse가 자동으로 열을 생성하도록 할 수도 있습니다.
Back4app에는 데이터 모델링을 위한 AI 에이전트가 있습니다:
- AI 에이전트를 엽니다 앱의 대시보드나 메뉴에서.
- 데이터 모델을 설명하십시오 (예: “클래스 스키마로 ToDo 앱 만들기.”).
- AI 에이전트가 스키마를 생성하도록 하십시오.
여러 Todo 항목에 연결된 Category 클래스가 있는 경우, 포인터 또는 관계를 사용할 수 있습니다:
jQuery 앱에서 실시간 업데이트를 위해:
- 실시간 쿼리 활성화는 서버 설정에서 Back4app 대시보드에서.
- 실시간 쿼리 구독 초기화:
이 구독은 “Todo” 객체가 생성, 업데이트 또는 삭제될 때마다 실시간으로 알림을 보냅니다.
ACL(액세스 제어 목록) 및 CLP(클래스 수준 권한)를 사용하면 객체 또는 클래스 수준에서 데이터를 읽고 쓸 수 있는 사람을 제어할 수 있습니다.
ACL은 개별 객체에 설정되어 액세스를 제한합니다:
CLPs는 전체 클래스에 대한 기본 권한을 제어합니다:
- Back4app 대시보드에서, 데이터베이스 섹션을 엽니다.
- 클래스를 선택합니다 (예: “Todo”).
- 클래스 수준 권한 탭으로 이동하여 공개, 인증된 또는 역할 기반 액세스를 구성합니다.
객체 수준 보안을 위한 ACL과 더 넓은 제한을 위한 CLPs를 결합합니다. 자세한 내용은 앱 보안 가이드라인을 참조하십시오.
클라우드 코드는 서버 측에서 사용자 정의 JavaScript를 실행하여 비즈니스 로직, 데이터 검증 또는 외부 API 호출을 추가할 수 있게 해줍니다.
코드를 main.js (또는 유사한 파일)에 배치하고, Back4app에 배포한 후 Parse Server가 실행을 처리하도록 합니다. 더 복잡한 로직을 위해 NPM 모듈을 사용할 수도 있습니다.
- 대시보드를 통해:
- 앱의 대시보드에서 Cloud Code > Functions로 이동합니다.
- 함수를 main.js에 복사/붙여넣기 합니다.
- 배포를 클릭합니다.
jQuery를 사용하여 Cloud Function을 다음과 같이 호출할 수 있습니다:
Back4app은 Parse.User 클래스를 사용하여 인증을 처리합니다. 비밀번호 해싱, 세션 토큰 및 보안 저장소는 자동으로 처리됩니다.
현재 사용자를 가져올 수 있습니다:
로그아웃:
Back4app은 Google, Facebook, Apple 및 기타 OAuth 제공자를 지원합니다. 자세한 내용은 소셜 로그인 문서를 참조하세요.
업로드를 처리하려면 Parse.File을 사용하세요:
파일을 필드에 할당하여 클래스에 저장할 수 있습니다:
파일 URL 검색:
Parse Server에서 파일 업로드 설정을 수정하여 파일을 업로드할 수 있는 사람을 관리할 수 있습니다:
오래된 데이터를 삭제하는 것과 같은 정기 작업을 실행할 수 있습니다:
대시보드에서 앱 설정 > 서버 설정 > 백그라운드 작업으로 이동하여 예약합니다.
웹훅은 특정 이벤트가 발생할 때마다 앱이 외부 서비스에 HTTP 요청을 보낼 수 있게 해줍니다:
- 더보기 > 웹훅에서 Back4app 대시보드로 이동합니다.
- 새 웹훅 추가을 외부 엔드포인트와 함께 설정합니다.
- 트리거를 “Todo 클래스에 새 레코드”와 같은 이벤트에 대해 구성합니다.
슬랙이나 Stripe와 같은 결제 게이트웨이를 웹훅을 통해 이벤트 데이터를 전송하여 통합할 수 있습니다.
Back4app 관리 앱은 CRUD 작업을 위한 비기술적인 웹 기반 인터페이스를 제공합니다.
이동하십시오 앱 대시보드 > 더보기 > 관리자 앱 을 클릭하고 “관리자 앱 활성화”를 클릭하십시오:
첫 번째 관리자 사용자 생성, 이는 자동으로 새로운 역할(B4aAdminUser)과 스키마의 클래스를 생성합니다:
서브도메인 선택 관리 앱에 접근하기 위해:
로그인 새 관리자 자격 증명을 사용하여:
활성화되면 이 관리 앱을 통해 코딩 없이 데이터 관리 또는 팀원에게 액세스 권한을 부여할 수 있습니다.
이 가이드에서는 Back4app을 사용하여 jQuery의 백엔드를 구축하는 방법을 배웠습니다. 당신은:
- 백엔드 기초로서 새로운 Back4app 프로젝트를 생성했습니다.
- 스키마 설계 및 데이터 관계를 포함한 데이터베이스를 설정했습니다.
- 세밀한 보안을 위해 ACL 및 CLP를 사용했습니다.
- 사용자 정의 서버 측 논리를 위해 클라우드 코드를 배포했습니다.
- 사용자 인증, 파일 저장 및 실시간 업데이트를 구성했습니다.
- 백그라운드 작업을 예약하고 외부 서비스에 대한 웹훅을 통합했습니다.
- 더 간단한 데이터 관리를 위해 Back4app 관리 패널을 탐색했습니다.
이제 기본 jQuery + Back4app 설정을 전체 프로덕션 솔루션으로 확장할 준비가 되었습니다. 소셜 로그인이나 더 자세한 보안 규칙과 같은 고급 기능을 계속 통합하세요. 확장 가능하고 데이터 기반의 애플리케이션을 구축하는 것을 즐기세요!
- 프로덕션 준비 완료: 고급 역할 기반 권한, 캐싱 전략 및 성능 조정을 추가하세요.
- 타사 API 통합: 결제, 메시징 또는 분석을 위해.
- Back4app 문서 탐색: 고급 보안, 로그 또는 분석에 대해 더 깊이 파고드세요.
- 실제 앱 만들기: jQuery의 단순성과 Back4app의 강력한 백엔드 서비스를 결합하여 사용하세요.