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

소개 이 튜토리얼에서는 back4app을 사용하여 htmx 웹 앱을 위한 완전한 백엔드를 구축하는 방법을 배웁니다 데이터베이스 관리, 클라우드 코드 함수, rest 및 graphql api, 사용자 인증, 파일 저장소, 실시간 쿼리(라이브 쿼리)와 같은 필수 back4app 기능을 통합하여 htmx 프론트 엔드와 원활하게 통신하는 안전하고 확장 가능하며 강력한 백엔드를 생성하는 방법을 안내합니다 htmx를 사용하면 클라이언트 측 상호작용을 처리하기 위해 html 속성을 활용하는 현대적인 javascript 라이브러리로, 서버 측 렌더링에 집중하면서 사용자 경험을 크게 향상시킬 수 있습니다 htmx와 back4app의 강력한 서버 측 프레임워크 및 템플릿 엔진을 결합함으로써 개발자는 손쉽고 효율적으로 풀 스택 웹 앱을 만들 수 있습니다 이 튜토리얼이 끝나면 htmx 통합에 맞춘 백엔드를 구축하게 되어, 전체 페이지 새로 고침 없이 동적 html 페이지 업데이트로 클라이언트 측 경험을 개선하고 원활한 데이터 작업을 가능하게 할 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정 및 새로운 back4app 프로젝트 back4app 시작하기 https //www back4app com/docs/get started/new parse app 계정이 없으신 경우 무료로 생성할 수 있습니다 위 가이드를 따라 프로젝트를 준비하세요 기본 htmx 설정 다음과 같이 html 페이지에 htmx 라이브러리 https //htmx org/ 를 포함하세요 웹 개발 환경 로컬 서버 설정이 되어 있거나 서버 측 프레임워크를 사용하여 html 템플릿을 제공해야 합니다 html, css 및 javascript에 대한 이해 htmx 문서 https //htmx org/docs/ 에서 html 속성과 웹 앱 개발에 대한 자세한 내용을 확인하세요 시작하기 전에 이러한 모든 전제 조건이 준비되어 있는지 확인하십시오 back4app 프로젝트를 설정하고 로컬 htmx 환경을 준비하면 더 쉽게 따라할 수 있습니다 1단계 – back4app 프로젝트 설정 새 프로젝트 만들기 back4app에서 htmx 백엔드를 구축하는 첫 번째 단계는 새 프로젝트를 만드는 것입니다 아직 만들지 않았다면 다음 단계를 따르십시오 back4app 계정에 로그인하세요 “새 앱” 버튼을 클릭하세요 back4app 대시보드에서 앱에 이름을 지정하세요 (예 “htmx backend tutorial”) 프로젝트가 생성되면 back4app 대시보드에 나열된 것을 볼 수 있습니다 이 프로젝트는 이 튜토리얼에서 논의된 모든 백엔드 구성의 기초가 될 것입니다 connect via rest api back4app은 parse 플랫폼에 의존하여 데이터를 관리하고, 실시간 기능을 제공하며, 사용자 인증 등을 처리합니다 htmx 자체는 클라이언트 측 라이브러리이지만, htmx 프론트 엔드를 back4app에 연결하려면 html 및 javascript에서 rest api 호출을 직접 수행해야 합니다 파스 키 가져오기 back4app 대시보드에서 앱의 “앱 설정” 또는 “보안 및 키” 섹션으로 이동하여 애플리케이션 id , rest api 키 , 및 파스 서버 url , (종종 https //parseapi back4app com ) 형식으로 제공됩니다 이 키를 사용하면 htmx를 통해 백엔드 엔드포인트를 호출하고 html 템플릿을 적절하게 조작할 수 있습니다 예를 들어, javascript fetch 요청과 htmx 속성을 결합하여 rest 호출을 통해 데이터와 상호작용할 수 있습니다 step 2 – setting up the database saving and querying data back4app 프로젝트가 설정되었으므로 이제 rest api 호출을 사용하여 데이터를 저장하고 검색할 수 있습니다 이는 htmx 요청 또는 일반 javascript에서 트리거할 수 있습니다 레코드를 생성하는 가장 간단한 방법은 parse 서버에 post 요청을 하는 것입니다 curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo 유사하게, 데이터를 쿼리할 수 있습니다 curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo 클라이언트 측에서 데이터베이스와 상호작용하기 위해 필요에 따라 graphql 쿼리를 사용할 수 있습니다 schema design and data types 기본적으로 parse는 스키마를 즉석에서 생성하는 것 , 하지만 더 많은 제어를 위해 back4app 대시보드에서 클래스와 데이터 유형을 정의할 수도 있습니다 “데이터베이스” 섹션으로 이동하세요 back4app 대시보드에서 새 클래스를 생성하세요 (예 “todo”) 및 제목(string)과 완료 여부(boolean)와 같은 관련 열을 추가하세요 back4app은 다음과 같은 다양한 데이터 유형을 지원합니다 string , number , boolean , object , date , file , pointer, array, relation , geopoint , 그리고 polygon 이러한 데이터 유형을 사용하여 htmx 기반 애플리케이션을 위한 강력한 스키마를 설계하세요 back4app은 데이터 모델 설계를 도와줄 수 있는 ai 에이전트를 제공합니다 ai 에이전트 열기 앱 대시보드 또는 메뉴에서 데이터 모델을 설명하세요 간단한 언어로 (예 “부탁합니다, back4app에서 완전한 클래스 스키마로 새로운 todo 앱을 만들어 주세요 ”) ai 에이전트가 당신을 위해 스키마를 생성하게 하세요 ai 에이전트를 사용하면 데이터 아키텍처를 설정할 때 시간을 절약하고 애플리케이션 전반에 걸쳐 일관성을 보장할 수 있습니다 relational data 관계형 데이터가 있는 경우, 예를 들어 작업을 카테고리에 연결하는 경우, 포인터 또는 관계 를 rest api 호출을 통해 parse에서 사용할 수 있습니다 예를 들어, 포인터 추가 // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } 쿼리할 때 필요에 따라 포인터 데이터를 포함하세요 // example querying with pointer inclusion async function fetchtodos() { const response = await fetch('https //parseapi back4app com/classes/todo?include=category', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response json(); } live queries 실시간 업데이트를 위해 back4app은 live queries htmx는 서버 측 렌더링과 html 속성에 중점을 두지만, 실시간 업데이트를 통합하면 사용자 경험을 크게 향상시킬 수 있습니다 라이브 쿼리 활성화 당신의 back4app 대시보드에서 앱의 서버 설정 을 선택하세요 “라이브 쿼리”가 켜져 있는지 확인하세요 라이브 쿼리 구독 초기화 필요하다면 javascript와 htmx 트리거를 사용하여 (참고 실시간 쿼리는 일반적으로 parse sdk가 필요하지만, 데이터가 변경될 때 페이지의 일부를 업데이트하여 htmx와 함께 작동할 수 있습니다 이 예제는 개념을 보여줍니다 ) import parse from ' /parseconfig'; // this assumes use of the parse sdk in js environment async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } 이 구독은 htmx 요청을 트리거하거나 클라이언트 측의 변경 사항을 반영하기 위해 html 템플릿을 동적으로 업데이트할 수 있습니다 step 3 – applying security with acls and clps back4app security mechanism back4app은 access control lists (acls) 및 class level permissions (clps) 을 제공하여 보안을 중요하게 생각합니다 이러한 기능을 통해 객체별 또는 클래스별로 데이터를 읽거나 쓸 수 있는 사람을 제한할 수 있으며, 승인된 사용자만 데이터 수정이 가능하도록 보장합니다 access control lists (acls) acl 은 개별 객체에 적용되어 어떤 사용자, 역할 또는 일반 사용자가 읽기/쓰기 작업을 수행할 수 있는지를 결정합니다 예를 들어 async function createprivatetodo(title, owneruser) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, acl { \[owneruser id] { "read" true, "write" true }, " " { "read" false, "write" false } } }) }); return response json(); } 객체를 저장할 때, 지정된 사용자 외에는 누구도 읽거나 수정할 수 없도록 하는 acl이 있습니다 class level permissions (clps) clps 전체 클래스의 기본 권한을 관리합니다 예를 들어, 클래스가 공개적으로 읽거나 쓸 수 있는지, 아니면 특정 역할만 접근할 수 있는지를 결정합니다 back4app 대시보드로 이동하세요 , 앱을 선택하고 데이터베이스 섹션을 엽니다 클래스를 선택하세요 (예 “todo”) 클래스 수준 권한 열기 탭 읽기 또는 쓰기를 위한 “인증 필요” 또는 공개를 위한 “접근 불가”와 같은 기본값을 구성하십시오 이 권한은 기본선을 설정하며, acl은 개별 객체에 대한 권한을 세밀하게 조정합니다 강력한 보안 모델은 일반적으로 clp(광범위한 제한)와 acl(세분화된 객체별 제한)을 결합합니다 자세한 내용은 앱 보안 가이드라인 https //www back4app com/docs/security/parse security 을 참조하세요 step 4 – writing and deploying cloud functions 클라우드 코드는 parse server 환경의 기능으로, 서버 측에서 사용자 정의 javascript 코드를 실행할 수 있게 해줍니다 클라우드 코드를 작성함으로써, parse server에서 안전하고 효율적으로 실행되는 추가 비즈니스 로직, 검증, 트리거 및 통합으로 back4app 백엔드를 확장할 수 있습니다 how it works 클라우드 코드를 작성할 때, 일반적으로 javascript 함수, 트리거 및 필요한 npm 모듈을 main js 파일에 배치합니다 이 파일은 이후 back4app 프로젝트에 배포되며, parse server 환경 내에서 실행됩니다 // main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); back4app cli 또는 대시보드를 통해 cloud code를 배포하세요 calling your function htmx로 향상된 인터페이스에서 javascript fetch를 사용하여 cloud code 함수를 호출하고 그에 따라 html 페이지의 일부를 업데이트할 수 있습니다 예를 들어 async function gettextlength(text) { const response = await fetch('https //parseapi back4app com/functions/calculatetextlength', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ text }) }); const result = await response json(); console log('text length ', result result length); } htmx 트리거와 html 속성 내에서 유사한 호출을 통합하여 클라이언트 측에서 동적이고 반응적인 동작을 생성할 수 있으며, 전체 사용자 경험을 향상시킬 수 있습니다 step 5 – configuring user authentication user authentication in back4app back4app은 parse user 클래스를 인증의 기초로 활용합니다 기본적으로 parse는 비밀번호 해싱, 세션 토큰 및 안전한 저장을 처리합니다 htmx 애플리케이션의 맥락에서 사용자 인증은 html 양식 제출 또는 javascript fetch 요청에 의해 시작된 rest 호출을 통해 관리될 수 있습니다 setting up user authentication 예를 들어, 새 사용자를 만들기 위해 async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } 유사하게, 사용자 로그인에 대해 async function loginuser(username, password) { const response = await fetch(`https //parseapi back4app com/login?username=${encodeuricomponent(username)}\&password=${encodeuricomponent(password)}`, { headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' } }); return response json(); } session management 성공적인 로그인 후, parse는 세션 토큰을 생성하며, 이를 htmx 애플리케이션에서 저장하고 관리하여 이후 인증된 요청에 사용할 수 있습니다 social login integration htmx는 html 속성과 서버 측 상호작용에 중점을 두지만, google이나 facebook과 같은 소셜 로그인을 통합하는 것은 oauth 흐름을 시작하고 서버 측에서 콜백을 처리함으로써 여전히 가능하다 자세한 안내는 소셜 로그인 문서 https //www back4app com/docs/platform/sign in with apple 를 참조하십시오 email verification and password reset 이메일 확인 및 비밀번호 재설정을 활성화하려면 이메일 설정으로 이동하십시오 당신의 back4app 대시보드에서 이메일 확인 활성화 및 필요한 템플릿을 구성합니다 htmx 흐름에서 fetch를 사용하여 필요에 따라 비밀번호 재설정 요청을 트리거하세요 step 6 – handling file storage uploading and retrieving files parse는 htmx 애플리케이션의 rest api 호출을 통해 활용할 수 있는 파일 저장 기능을 포함합니다 예를 들어, 이미지를 업로드하려면 async function uploadimage(file) { const data = new formdata(); data append('file', file); data append('object', '{" type" "file","name" "' + file name + '"}'); const response = await fetch('https //parseapi back4app com/files/' + file name, { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' }, body data }); return response json(); } file security back4app에서 보안 설정을 구성하고 필요에 따라 파일 객체에 acl을 설정하여 파일을 업로드하고 접근할 수 있는 사람을 제어하세요 step 7 – scheduling tasks with cloud jobs cloud jobs back4app의 클라우드 작업을 사용하면 오래된 데이터를 정리하거나 주기적인 이메일을 보내는 등의 백엔드에서 정기 작업을 예약할 수 있습니다 이러한 작업은 서버 측에서 실행되며 필요할 때 htmx 워크플로우와 통합할 수 있습니다 // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); 이 작업을 back4app 대시보드에서 예약하세요 앱 설정 > 서버 설정 > 백그라운드 작업 step 8 – integrating webhooks 웹후크 은 특정 이벤트가 발생할 때마다 back4app 앱이 외부 서비스에 http 요청을 보낼 수 있게 해줍니다 이는 결제 게이트웨이, 이메일 마케팅 도구 또는 분석 플랫폼과 같은 타사 시스템과 통합하는 데 강력합니다 웹훅 구성으로 이동하십시오 back4app 대시보드에서 > 더보기 > 웹훅을 클릭하고 웹훅 추가를 클릭하십시오 엔드포인트 설정 (예 https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) 트리거 구성 하여 back4app 클래스 또는 cloud code 함수에서 어떤 이벤트가 웹후크를 발생시킬지 지정합니다 예를 들어, 새로운 todo가 생성될 때마다 slack 채널에 알림을 보내려면 수신 웹후크를 수락하는 slack 앱을 만드세요 슬랙 웹훅 url을 복사하세요 back4app 대시보드에서 'todo 클래스의 새 레코드' 이벤트에 대한 slack url로 엔드포인트를 설정하세요 필요에 따라 사용자 정의 http 헤더 또는 페이로드를 추가할 수 있습니다 트리거에서 사용자 정의 http 요청을 만들어 cloud code에서 webhooks를 정의할 수도 있습니다 step 9 – exploring the back4app admin panel 그 back4app 관리 앱 은 비기술 사용자가 코드를 작성하지 않고도 crud 작업을 수행하고 일상적인 데이터 작업을 처리할 수 있도록 설계된 웹 기반 관리 인터페이스입니다 이는 데이터베이스 관리, 맞춤형 데이터 관리 및 기업 수준의 작업을 간소화하는 모델 중심의 사용자 친화적인 인터페이스를 제공합니다 enabling the admin app 활성화 하려면 앱 대시보드 > 더보기 > 관리자 앱 으로 가서 “관리자 앱 활성화” 버튼을 클릭하세요 첫 번째 관리자 사용자 만들기 (사용자 이름/비밀번호), 이는 자동으로 새로운 역할(b4aadminuser)과 클래스(b4asetting, b4amenuitem, b4acustomfield)를 앱의 스키마에 생성합니다 하위 도메인 선택 관리 인터페이스에 접근하고 설정을 완료합니다 로그인 새 admin app 대시보드에 접근하기 위해 생성한 관리자 자격 증명을 사용하세요 활성화되면, back4app 관리 앱을 사용하여 데이터베이스의 레코드를 쉽게 보고, 편집하거나 제거할 수 있습니다 parse 대시보드나 백엔드 코드를 직접 사용할 필요 없이 conclusion htmx를 사용하여 back4app으로 백엔드를 구축하는 방법에 대한 이 포괄적인 튜토리얼을 따르면 다음과 같은 결과를 얻을 수 있습니다 htmx 웹 앱에 맞춘 안전한 백엔드를 생성했습니다 클래스 스키마, 데이터 유형 및 관계로 데이터베이스를 구성했습니다 실시간 쿼리를 통합하고 live queries가 클라이언트 측에서 사용자 경험을 어떻게 향상시킬 수 있는지 고려했습니다 데이터 접근을 보호하고 관리하기 위해 acl 및 clp를 사용하여 보안 조치를 적용했습니다 서버 측에서 사용자 정의 비즈니스 로직을 실행하기 위해 클라우드 코드 기능을 구현했습니다 사용자 인증, 파일 저장소, 예약된 클라우드 작업 및 통합 웹후크를 설정합니다 효율적인 데이터 관리를 위해 back4app 관리 패널을 탐색했습니다 이 강력한 백엔드를 통해 이제 htmx의 기능을 활용하여 클라이언트 측 향상과 강력한 서버 측 프레임워크를 결합한 동적이고 현대적인 웹 애플리케이션을 만들 수 있습니다 이 풀 스택 접근 방식은 전체 사용자 경험을 향상시켜 부드러운 html 페이지 업데이트, 효율적인 서버 측 렌더링 및 기술 스택 전반에 걸친 원활한 통합을 제공합니다 next steps 이 백엔드를 확장하십시오 더 복잡한 데이터 모델, 고급 템플릿 엔진 및 사용자 정의 서버 측 논리를 통합하기 위해 서버 측 프레임워크와의 통합 탐색 보다 동적이고 반응적인 클라이언트 측 경험을 만들기 위해 back4app의 공식 문서를 확인하세요 고급 보안, 성능 조정 및 분석에 대한 더 깊은 탐구를 위해 htmx와 현대 웹 개발에 대한 학습을 계속하세요 사용자 친화적이고 반응형 웹 앱을 구축하여 클라이언트 측과 서버 측 기술의 장점을 결합합니다 프로젝트가 생성되면 back4app 대시보드에 나열된 것을 볼 수 있습니다 이 프로젝트는 이 튜토리얼에서 논의된 모든 백엔드 구성의 기초가 될 것입니다 rest api를 통한 연결 back4app은 parse 플랫폼을 기반으로 데이터를 관리하고, 실시간 기능을 제공하며, 사용자 인증 등을 처리합니다 htmx 자체는 클라이언트 측 라이브러리이지만, htmx 프론트 엔드를 back4app에 연결하려면 html 및 javascript에서 rest api 호출을 직접 수행해야 합니다 parse 키 가져오기 back4app 대시보드에서 앱의 “앱 설정” 또는 “보안 및 키” 섹션으로 이동하여 애플리케이션 id , rest api 키 , 및 parse 서버 url 을 찾습니다 (종종 https //parseapi back4app com ) 형식으로 제공됩니다 이 키를 사용하여 htmx를 통해 백엔드 엔드포인트를 호출하고 html 템플릿을 적절히 조작할 수 있습니다 예를 들어, javascript fetch 요청과 htmx 속성을 결합하여 rest 호출을 통해 데이터와 상호작용할 수 있습니다 2단계 – 데이터베이스 설정 데이터 저장 및 쿼리 back4app 프로젝트가 설정되면 이제 rest api 호출을 사용하여 데이터를 저장하고 검색할 수 있습니다 이는 htmx 요청 또는 일반 javascript에서 트리거할 수 있습니다 레코드를 생성하는 가장 간단한 방법은 parse 서버에 post 요청을 하는 것입니다 curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo 유사하게, 데이터를 쿼리할 수 있습니다 curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo 필요에 따라 graphql 쿼리를 사용하여 클라이언트 측에서 데이터베이스와 상호작용할 수도 있습니다 스키마 설계 및 데이터 유형 기본적으로 parse는 스키마를 즉시 생성할 수 있도록 허용합니다 , 하지만 더 많은 제어를 위해 back4app 대시보드에서 클래스와 데이터 유형을 정의할 수도 있습니다 back4app 대시보드에서 “데이터베이스” 섹션으로 이동합니다 새 클래스를 생성합니다 (예 “todo”) 및 제목 (문자열)과 완료 여부 (부울)와 같은 관련 열을 추가합니다 back4app은 string , number , boolean , object , date , file , pointer, array, relation , geopoint , 및 polygon , 다양한 데이터 유형을 지원합니다 이를 사용하여 htmx 기반 애플리케이션을 위한 강력한 스키마를 설계하세요 back4app은 데이터 모델 설계를 도와줄 수 있는 ai 에이전트를 제공합니다 ai 에이전트 열기 앱 대시보드 또는 메뉴에서 데이터 모델 설명하기 간단한 언어로 (예 “부탁드립니다, back4app에서 완전한 클래스 스키마로 새로운 todo 앱을 만들어 주세요 ”) ai 에이전트에게 스키마를 생성하게 하세요 ai 에이전트를 사용하면 데이터 아키텍처를 설정할 때 시간을 절약하고 애플리케이션 전반에 걸쳐 일관성을 보장할 수 있습니다 관계형 데이터 작업을 카테고리에 연결하는 것과 같은 관계형 데이터가 있는 경우, pointers 또는 relations 를 rest api 호출을 통해 parse에서 사용할 수 있습니다 예를 들어, 포인터 추가하기 // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } 쿼리할 때 필요에 따라 포인터 데이터를 포함하세요 // example querying with pointer inclusion async function fetchtodos() { const response = await fetch('https //parseapi back4app com/classes/todo?include=category', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response json(); } 실시간 쿼리 실시간 업데이트를 위해 back4app은 실시간 쿼리 htmx는 서버 측 렌더링 및 html 속성에 중점을 두지만, 실시간 업데이트를 통합하면 사용자 경험을 크게 향상시킬 수 있습니다 실시간 쿼리 활성화 는 back4app 대시보드에서 앱의 서버 설정 , “실시간 쿼리”가 켜져 있는지 확인하세요 javascript를 사용하여 실시간 쿼리 구독 초기화 가 필요하다면 htmx 트리거와 함께 사용하세요 (참고 실시간 쿼리는 일반적으로 parse sdk가 필요하지만, 데이터가 변경될 때 페이지의 일부를 업데이트하여 htmx와 함께 작동할 수 있습니다 이 예시는 개념을 보여줍니다 ) import parse from ' /parseconfig'; // this assumes use of the parse sdk in js environment async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } 이 구독은 htmx 요청을 트리거하거나 클라이언트 측의 변경 사항을 반영하기 위해 html 템플릿을 동적으로 업데이트할 수 있습니다 3단계 – acl 및 clp로 보안 적용하기 back4app 보안 메커니즘 back4app은 access control lists (acls) 및 class level permissions (clps) , 보안을 진지하게 다룹니다 이러한 기능을 통해 객체별 또는 클래스별로 데이터를 읽거나 쓸 수 있는 사용자를 제한할 수 있어, 권한이 있는 사용자만 데이터 수정이 가능합니다 access control lists (acls) acl은 개별 객체에 적용되어 어떤 사용자, 역할 또는 공개가 읽기/쓰기 작업을 수행할 수 있는지를 결정합니다 예를 들어 async function createprivatetodo(title, owneruser) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, acl { \[owneruser id] { "read" true, "write" true }, " " { "read" false, "write" false } } }) }); return response json(); } 객체를 저장할 때, 지정된 사용자 외에는 누구도 읽거나 수정할 수 없도록 하는 acl이 있습니다 클래스 수준 권한 (clps) clps 는 클래스의 기본 권한을 관리하며, 클래스가 공개적으로 읽거나 쓸 수 있는지, 또는 특정 역할만 접근할 수 있는지를 결정합니다 back4app 대시보드로 이동 , 앱을 선택하고 데이터베이스 섹션을 엽니다 클래스 선택 (예 “todo”) 클래스 수준 권한 탭을 엽니다 읽기 또는 쓰기를 위한 “인증 필요” 또는 공개를 위한 “접근 불가”와 같은 기본값을 구성합니다 이 권한은 기준선을 설정하며, acl은 개별 객체에 대한 권한을 세부 조정합니다 강력한 보안 모델은 일반적으로 clps(광범위한 제한)와 acls(세부적인 객체별 제한)를 결합합니다 더 많은 정보는 앱 보안 가이드라인 https //www back4app com/docs/security/parse security 을 참조하세요 4단계 – 클라우드 함수 작성 및 배포 클라우드 코드는 서버 측에서 사용자 정의 javascript 코드를 실행할 수 있도록 하는 parse server 환경의 기능입니다 cloud code를 작성함으로써 back4app 백엔드를 추가 비즈니스 로직, 검증, 트리거 및 parse server에서 안전하고 효율적으로 실행되는 통합으로 확장할 수 있습니다 작동 방식 cloud code를 작성할 때 일반적으로 javascript 함수, 트리거 및 필요한 npm 모듈을 main js 파일에 배치합니다 이 파일은 back4app 프로젝트에 배포되며, parse server 환경 내에서 실행됩니다 // main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); back4app cli 또는 대시보드를 통해 cloud code를 배포하세요 함수 호출하기 htmx로 향상된 인터페이스에서 javascript fetch를 사용하여 cloud code 함수를 호출하고 html 페이지의 일부를 업데이트할 수 있습니다 예를 들어 async function gettextlength(text) { const response = await fetch('https //parseapi back4app com/functions/calculatetextlength', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ text }) }); const result = await response json(); console log('text length ', result result length); } htmx 트리거 및 html 속성 내에서 유사한 호출을 통합하여 클라이언트 측에서 동적이고 반응적인 동작을 생성하여 전체 사용자 경험을 향상시킬 수 있습니다 5단계 – 사용자 인증 구성 back4app의 사용자 인증 back4app은 parse user 클래스를 인증의 기초로 활용합니다 기본적으로 parse는 비밀번호 해싱, 세션 토큰 및 안전한 저장을 처리합니다 htmx 애플리케이션의 맥락에서 사용자 인증은 html 양식 제출 또는 javascript fetch 요청에 의해 시작된 rest 호출을 통해 관리될 수 있습니다 사용자 인증 설정하기 예를 들어, 새 사용자를 생성하려면 async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } 유저 로그인에 대해서도 마찬가지입니다 async function loginuser(username, password) { const response = await fetch(`https //parseapi back4app com/login?username=${encodeuricomponent(username)}\&password=${encodeuricomponent(password)}`, { headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' } }); return response json(); } 세션 관리 성공적인 로그인 후, parse는 세션 토큰을 생성하며, 이를 저장하고 관리하여 이후 인증된 요청에 사용할 수 있습니다 소셜 로그인 통합 htmx가 html 속성과 서버 측 상호작용에 중점을 두고 있지만, google이나 facebook과 같은 소셜 로그인을 통합하는 것은 oauth 흐름을 시작하고 서버 측에서 콜백을 처리함으로써 여전히 가능합니다 자세한 안내는 소셜 로그인 문서 https //www back4app com/docs/platform/sign in with apple 를 참조하십시오 이메일 인증 및 비밀번호 재설정 이메일 확인 및 비밀번호 재설정을 활성화하려면 이메일 설정으로 이동 하여 back4app 대시보드에서 이메일 확인 활성화 및 필요한 템플릿을 구성합니다 htmx 흐름에서 fetch를 사용하여 필요에 따라 비밀번호 재설정 요청을 트리거합니다 6단계 – 파일 저장소 처리 파일 업로드 및 검색 parse는 htmx 애플리케이션에서 rest api 호출을 통해 활용할 수 있는 파일 저장 기능을 포함합니다 예를 들어, 이미지를 업로드하려면 async function uploadimage(file) { const data = new formdata(); data append('file', file); data append('object', '{" type" "file","name" "' + file name + '"}'); const response = await fetch('https //parseapi back4app com/files/' + file name, { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' }, body data }); return response json(); } 파일 보안 back4app에서 보안 설정을 구성하고 필요에 따라 파일 객체에 acl을 설정하여 파일을 업로드하고 접근할 수 있는 사람을 제어하세요 7단계 – 클라우드 작업으로 작업 예약하기 클라우드 작업 back4app의 클라우드 작업을 사용하면 오래된 데이터를 정리하거나 주기적인 이메일을 보내는 등의 정기 작업을 백엔드에서 예약할 수 있습니다 이 작업은 서버 측에서 실행되며 필요할 때 htmx 워크플로우와 통합할 수 있습니다 // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); 이 작업을 back4app 대시보드의 앱 설정 > 서버 설정 > 백그라운드 작업 에서 예약하세요 8단계 – 웹훅 통합하기 웹훅 은 특정 이벤트가 발생할 때마다 back4app 앱이 외부 서비스에 http 요청을 보낼 수 있도록 합니다 이는 결제 게이트웨이, 이메일 마케팅 도구 또는 분석 플랫폼과 같은 타사 시스템과 통합하는 데 강력합니다 웹훅 구성으로 이동 하여 back4app 대시보드 > 더보기 > 웹훅을 클릭하고 웹훅 추가를 클릭합니다 엔드포인트 설정 (예 https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) 트리거 구성 하여 back4app 클래스 또는 클라우드 코드 함수에서 어떤 이벤트가 웹훅을 발동할지 지정합니다 예를 들어, 새로운 할 일이 생성될 때마다 slack 채널에 알리려면 수신 웹훅을 수용하는 slack 앱을 생성합니다 slack 웹훅 url을 복사합니다 back4app 대시보드에서 “todo 클래스의 새 레코드” 이벤트에 대해 해당 slack url로 엔드포인트를 설정합니다 필요에 따라 사용자 정의 http 헤더 또는 페이로드를 추가할 수 있습니다 트리거에서 사용자 정의 http 요청을 만들어 클라우드 코드에서 웹훅을 정의할 수도 있습니다 9단계 – back4app 관리 패널 탐색 back4app 관리 앱 은 비기술 사용자가 crud 작업을 수행하고 코드를 작성하지 않고도 일상적인 데이터 작업을 처리할 수 있도록 설계된 웹 기반 관리 인터페이스입니다 모델 중심의 사용자 친화적인 인터페이스를 제공하여 데이터베이스 관리, 맞춤형 데이터 관리 및 기업 수준의 운영을 간소화합니다 관리자 앱 활성화 활성화 하려면 앱 대시보드 > 더보기 > 관리자 앱 로 이동하여 “관리자 앱 활성화” 버튼을 클릭하세요 첫 번째 관리자 사용자 생성 (사용자 이름/비밀번호)을 생성하면 자동으로 새로운 역할(b4aadminuser)과 클래스(b4asetting, b4amenuitem, b4acustomfield)가 앱의 스키마에 생성됩니다 서브도메인 선택 을 통해 관리자 인터페이스에 접근하고 설정을 완료하세요 로그인 하여 생성한 관리자 자격 증명을 사용하여 새로운 관리자 앱 대시보드에 접근하세요 활성화되면 back4app 관리자 앱을 통해 데이터베이스의 레코드를 쉽게 보고, 편집하거나 제거할 수 있습니다 parse 대시보드나 백엔드 코드를 직접 사용할 필요가 없습니다 결론 htmx를 사용하여 back4app의 백엔드를 구축하는 방법에 대한 이 포괄적인 튜토리얼을 따르면 다음과 같은 작업을 수행할 수 있습니다 htmx 웹 앱에 맞춘 안전한 백엔드를 생성했습니다 클래스 스키마, 데이터 유형 및 관계로 데이터베이스를 구성했습니다 실시간 쿼리를 통합하고 live queries가 클라이언트 측 사용자 경험을 어떻게 향상시킬 수 있는지 고려했습니다 데이터 접근을 보호하고 관리하기 위해 acl 및 clp를 사용하여 보안 조치를 적용했습니다 서버 측에서 사용자 정의 비즈니스 로직을 실행하기 위해 cloud code 기능을 구현했습니다 사용자 인증, 파일 저장, 예약된 cloud jobs 및 webhooks 통합을 설정했습니다 효율적인 데이터 관리를 위해 back4app 관리 패널을 탐색했습니다 이 강력한 백엔드를 통해 이제 htmx의 기능을 활용하여 클라이언트 측 향상과 강력한 서버 측 프레임워크를 결합한 동적이고 현대적인 웹 애플리케이션을 만들 수 있습니다 이 풀 스택 접근 방식은 전체 사용자 경험을 향상시켜 부드러운 html 페이지 업데이트, 효율적인 서버 측 렌더링 및 기술 스택 전반에 걸친 원활한 통합을 제공합니다 다음 단계 이 백엔드를 확장하여 더 복잡한 데이터 모델, 고급 템플릿 엔진 및 사용자 정의 서버 측 로직을 통합하세요 서버 측 프레임워크와의 통합을 탐색하여 더 동적이고 반응적인 클라이언트 측 경험을 만드세요 back4app의 공식 문서를 확인하여 고급 보안, 성능 조정 및 분석에 대한 심층적인 내용을 알아보세요 htmx 및 현대 웹 개발에 대해 계속 배우세요 클라이언트 측과 서버 측 기술의 장점을 결합한 사용자 친화적이고 반응적인 웹 앱을 구축하기 위해