퀵스타터즈
htmx용 백엔드를 구축하는 방법?

33min
소개
이 튜토리얼에서는 Back4app을 사용하여 htmx 웹 앱을 위한 완전한 백엔드를 구축하는 방법을 배웁니다.
데이터베이스 관리, 클라우드 코드 함수, REST 및 GraphQL API, 사용자 인증, 파일 저장소, 실시간 쿼리(라이브 쿼리)와 같은 필수 Back4app 기능을 통합하여 htmx 프론트 엔드와 원활하게 통신하는 안전하고 확장 가능하며 강력한 백엔드를 생성하는 방법을 안내합니다.
htmx를 사용하면 클라이언트 측 상호작용을 처리하기 위해 html 속성을 활용하는 현대적인 JavaScript 라이브러리로, 서버 측 렌더링에 집중하면서 사용자 경험을 크게 향상시킬 수 있습니다.
htmx와 Back4app의 강력한 서버 측 프레임워크 및 템플릿 엔진을 결합함으로써 개발자는 손쉽고 효율적으로 풀 스택 웹 앱을 만들 수 있습니다.
이 튜토리얼이 끝나면 htmx 통합에 맞춘 백엔드를 구축하게 되어, 전체 페이지 새로 고침 없이 동적 html 페이지 업데이트로 클라이언트 측 경험을 개선하고 원활한 데이터 작업을 가능하게 합니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4app 계정 및 새로운 Back4app 프로젝트
Back4app 시작하기.
계정이 없으신 경우 무료로 생성할 수 있습니다. 위 가이드를 따라 프로젝트를 준비하세요.
기본 htmx 설정
다음과 같이 html 페이지에 htmx 라이브러리를 포함하세요:
웹 개발 환경
로컬 서버 설정이 되어 있거나 서버 측 프레임워크를 사용하여 html 템플릿을 제공해야 합니다.
HTML, CSS 및 JavaScript에 대한 이해
htmx 문서에서 html 속성과 웹 앱 개발에 대한 자세한 내용을 확인하세요.
시작하기 전에 이러한 모든 전제 조건이 준비되어 있는지 확인하세요. Back4app 프로젝트를 설정하고 로컬 htmx 환경을 준비하면 더 쉽게 따라할 수 있습니다.
1단계 – Back4app 프로젝트 설정
새 프로젝트 만들기
Back4app에서 htmx 백엔드를 구축하는 첫 번째 단계는 새 프로젝트를 만드는 것입니다. 아직 만들지 않았다면 다음 단계를 따르세요:
Back4app 계정에 로그인하세요.
“새 앱” 버튼을 클릭하세요 Back4app 대시보드에서.
앱에 이름을 지정하세요 (예: “htmx-Backend-Tutorial”).
﻿
프로젝트가 생성되면 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
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 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
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
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 에이전트 열기 앱 대시보드 또는 메뉴에서.
데이터 모델 설명하기 간단한 언어로 (예: “새로운 ToDo 앱을 back4app에서 완전한 클래스 스키마로 만들어 주세요.”).
AI 에이전트에게 스키마를 생성하게 하세요.
﻿
AI 에이전트를 사용하면 데이터 아키텍처를 설정할 때 시간을 절약하고 애플리케이션 전반에 걸쳐 일관성을 보장할 수 있습니다.
관계형 데이터
작업을 카테고리에 연결하는 것과 같은 관계형 데이터가 있는 경우, Pointers 또는 Relations를 REST API 호출을 통해 Parse에서 사용할 수 있습니다. 예를 들어, 포인터 추가하기:
JS
// 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: 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();
}
﻿
쿼리할 때 필요에 따라 포인터 데이터를 포함하세요:
JS
// 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();
}
// 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와 함께 작동할 수 있습니다. 이 예시는 개념을 보여줍니다.)
JS
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;
}
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은 액세스 제어 목록 (ACL) 및 클래스 수준 권한 (CLP)을 제공하여 보안을 중요하게 생각합니다. 이러한 기능을 통해 객체별 또는 클래스별로 데이터를 읽거나 쓸 수 있는 사용자를 제한할 수 있어, 권한이 있는 사용자만 데이터 수정이 가능합니다.
액세스 제어 목록 (ACL)
ACL은 개별 객체에 적용되어 어떤 사용자, 역할 또는 공개가 읽기/쓰기 작업을 수행할 수 있는지를 결정합니다. 예를 들어:
JS
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();
}
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(세부적인 객체별 제한)를 결합합니다. 더 많은 정보는 앱 보안 가이드라인을 참조하세요.
4단계 – 클라우드 함수 작성 및 배포
클라우드 코드는 서버 측에서 사용자 정의 JavaScript 코드를 실행할 수 있도록 하는 Parse Server 환경의 기능입니다.
Cloud Code를 작성함으로써 Back4app 백엔드를 추가 비즈니스 로직, 검증, 트리거 및 Parse Server에서 안전하고 효율적으로 실행되는 통합으로 확장할 수 있습니다.
작동 방식
Cloud Code를 작성할 때 일반적으로 JavaScript 함수, 트리거 및 필요한 NPM 모듈을 main.js 파일에 배치합니다. 이 파일은 Back4app 프로젝트에 배포되며, Parse Server 환경 내에서 실행됩니다.
JS
// 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');
  }
});
// 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 페이지의 일부를 업데이트할 수 있습니다. 예를 들어:
JS
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);
}
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 호출을 통해 관리될 수 있습니다.
사용자 인증 설정하기
예를 들어, 새 사용자를 생성하려면:
JS
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 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();
}
﻿
유저 로그인에 대해서도 마찬가지입니다:
JS
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();
}
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 흐름을 시작하고 서버 측에서 콜백을 처리함으로써 여전히 가능합니다. 자세한 안내는 소셜 로그인 문서를 참조하십시오.
이메일 인증 및 비밀번호 재설정
이메일 확인 및 비밀번호 재설정을 활성화하려면:
이메일 설정으로 이동 하여 Back4app 대시보드에서.
이메일 확인 활성화 및 필요한 템플릿을 구성합니다.
htmx 흐름에서 fetch를 사용하여 필요에 따라 비밀번호 재설정 요청을 트리거합니다.
6단계 – 파일 저장소 처리
파일 업로드 및 검색
Parse는 htmx 애플리케이션에서 REST API 호출을 통해 활용할 수 있는 파일 저장 기능을 포함합니다. 예를 들어, 이미지를 업로드하려면:
JS
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();
}
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 워크플로우와 통합할 수 있습니다.
JS
// 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);
  }
});
// 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).
트리거 구성하여 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 및 현대 웹 개발에 대해 계속 배우고 클라이언트 측과 서버 측 기술의 장점을 결합한 사용자 친화적이고 반응적인 웹 앱을 구축합니다.
﻿
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Blazor용 백엔드 구축 방법?
NativeScript용 백엔드 구축 방법은?