퀵스타터즈
가츠비를 위한 백엔드를 구축하는 방법?

36min
소개
이 튜토리얼에서는 Gatsby의 백엔드를 구축하는 방법을 배웁니다. 
우리는 데이터베이스 관리, 클라우드 코드 기능과 같은 Back4App의 기능을 통합하는 방법을 보여줄 것입니다. REST API 및 GraphQL 쿼리 기능, 사용자 인증 및 실시간 쿼리(라이브 쿼리)를 사용하여 안전하고 확장 가능하며 강력한 백엔드를 생성하는 방법을 보여줄 것입니다. 이 백엔드는 당신의 Gatsby 사이트에서 접근할 수 있습니다.
또한 Back4App의 빠른 설정과 직관적인 환경이 백엔드 작업을 처리하는 데 소요되는 시간과 노력을 크게 줄일 수 있는 방법을 볼 수 있습니다. 
마지막에는 Gatsby의 백엔드를 구축하는 방법을 정확히 알게 될 것입니다. 이 백엔드는 데이터를 저장하고 검색하며, 인증을 처리하고, 클라우드 기능을 통합하는 등의 작업을 수행합니다. 
이것은 전통적인 서버 유지 관리에 대한 걱정 없이 사용자 정의 논리를 쉽게 통합하고, 타사 API를 추가하거나 데이터 모델을 확장할 수 있도록 설정해 줍니다.
당신이 구축할 것과 그것이 가치 있는 이유
완전한 백엔드 통합: 당신은 동적 데이터 요구에 적합한 Parse SDK를 통합하여 Gatsby 사이트를 위한 확장 가능한 백엔드 구조를 만들 것입니다.
시간 절약: Back4App은 백엔드 생성 속도를 높이는 AI 에이전트, 실시간 쿼리 및 클라우드 작업과 같은 도구를 제공합니다.
확장 가능한 기술: 완료 후, 당신은 이러한 개념을 더 고급 Gatsby 기능에 맞게 조정할 수 있게 될 것입니다. 예를 들어 빌드 시간에 페이지 생성 또는 동적 작업을 위한 서버리스 기능에 연결하는 것입니다.
필수 조건
Back4App 계정과 새로운 Back4App 프로젝트
Back4app 시작하기.
계정이 없으시면 무료로 생성할 수 있습니다. 위의 가이드를 따라 프로젝트를 준비하세요.
기본 Gatsby 개발 환경
이것은 Gatsby CLI를 설치하고 다음을 실행하여 설정할 수 있습니다:
Node.js (버전 14 이상) 설치
Node.js 설치하기﻿
JavaScript 및 Gatsby의 개념에 대한 이해
Gatsby 공식 문서.
Gatsby가 처음이라면 문서나 초보자 튜토리얼을 읽어보세요.
이 요구 사항이 설정되어 있는지 확인하세요. 이는 구성을 위한 새 파일을 생성할 때 또는 Gatsby 환경에서 GraphQL 쿼리를 실행할 때 원활한 경험을 보장합니다.
1단계 – Back4App 프로젝트 설정
새 프로젝트 만들기
Back4App에서 Gatsby의 백엔드를 구축하는 첫 번째 단계는 새 프로젝트를 만드는 것입니다. 아직 하지 않았다면:
Back4App 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
앱에 이름을 지정하세요 (예: “Gatsby-Backend-Tutorial”).
﻿
프로젝트를 생성하면 Back4App 대시보드에 나타납니다. 이 프로젝트를 백엔드의 핵심으로 사용할 것입니다.
Parse SDK 연결하기
Back4App은 Parse 플랫폼을 사용하여 데이터를 관리하고, 실시간 기능을 제공하며, 사용자 인증 등을 처리합니다. Gatsby의 경우 여전히 npm install parse를 실행한 후 소스 파일에 통합할 수 있습니다:
Parse 키 가져오기:
Back4App 대시보드에서 Application ID와 JavaScript Key, 일반적으로 “앱 설정” 또는 “보안 및 키” 아래에 있습니다. 또한 Parse Server URL을 찾을 수 있습니다 (종종 https://parseapi.back4app.com)입니다.
﻿
Gatsby 사이트에 Parse SDK 설치하기:
Bash
npm install parse
npm install parse
﻿
Gatsby 프로젝트의 루트 디렉토리 또는 src/ 내에 parseConfig.js를 생성하세요:
src/parseConfig.js
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
Gatsby 파일에서 parseConfig.js를 가져올 때마다 (예: gatsby-node.js, gatsby-browser.js, 또는 페이지/컴포넌트), 백엔드에 쿼리를 수행할 준비가 된 미리 구성된 인스턴스를 갖게 됩니다.
2단계 – 데이터베이스 설정
데이터 모델 생성하기
Back4App에서는 데이터가 “클래스” (테이블과 유사)로 관리되며, 데이터 필드가 있습니다. 시연을 위해 “Todo” 클래스를 생성해 보겠습니다. Parse를 사용하여 Gatsby에서 데이터를 저장하고 검색하는 몇 가지 방법을 보여드리겠습니다.
“데이터베이스” 섹션으로 이동 당신의 Back4app 대시보드에서.
새로운 클래스 생성 (예: “Todo”) 및 제목(String)과 완료 여부(Boolean)와 같은 열을 추가합니다.
새 클래스 생성
﻿
또는 Parse가 코드에서 객체가 처음 저장될 때 자동으로 열을 생성하도록 할 수 있습니다.
AI 에이전트를 사용한 데이터 모델 생성
Back4App은 데이터 구조를 정의하는 데 도움을 주기 위해 AI 에이전트를 제공합니다.
AI 에이전트 열기 앱 대시보드 또는 메뉴에서.
데이터 모델 설명 (예: “제목과 완료 상태가 있는 새로운 Todo 앱 스키마를 생성해 주세요.”).
AI 에이전트가 생성하도록 하세요 스키마를.
﻿
SDK를 사용한 데이터 읽기 및 쓰기
Gatsby의 샘플 코드 조각은 다음과 같을 수 있습니다 (예를 들어, React 기반 페이지 또는 gatsby-browser.js):
JS
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
REST API를 사용한 데이터 읽기 및 쓰기
대안으로, REST API를 통해 데이터베이스와 상호작용할 수 있습니다:
Bash
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
﻿
GraphQL API를 사용한 데이터 읽기 및 쓰기
Back4App은 또한 GraphQL API, 따라서 다음과 같은 쿼리나 변형을 실행할 수 있습니다:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
이것은 Gatsby 사이트가 빌드 시간에 GraphQL 쿼리를 통해 데이터를 가져오기를 원할 때 특히 편리합니다.
실시간 쿼리 작업하기
Gatsby는 정적 사이트 생성기이지만, Parse 실시간 쿼리를 사용하여 동적 실시간 연결을 설정할 수 있습니다. 이는 브라우저에서 실행되는 코드나 서버리스 훅에서 유용할 수 있습니다.
실시간 쿼리 활성화하기 Back4app 대시보드에서 (서버 설정 아래).
Live Query Server URL 추가하기 parseConfig.js:
JS
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
﻿
클래스에 구독하기 실시간 알림을 받기 위해:
JS
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
이것은 Gatsby 프로젝트의 프론트엔드에 실시간 데이터 업데이트를 푸시합니다.
3단계 – ACL 및 CLP로 보안 적용하기
ACL과 CLP란 무엇인가요?
ACL(Access Control Lists)는 개별 객체에 대한 권한을 정의할 수 있게 해주며, CLP(Class-Level Permissions)는 Back4App 데이터베이스의 전체 클래스에 적용됩니다.
﻿
클래스 수준 권한 설정하기
다음으로 가세요 Database 당신의 Back4App 대시보드에서.
클래스를 선택하세요 (예: Todo).
클릭하세요 Class-Level Permissions 탭.
클래스가 공개적으로 읽을 수 있는지, 인증이 필요한지, 특정 역할로 제한되는지 구성하세요.
코드에서 ACL 사용하기
Gatsby 코드에서 각 새로운 객체에 대한 ACL을 정의할 수 있습니다:
JS
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
﻿
4단계 – 클라우드 코드 함수 작성하기
클라우드 코드가 필요한 이유?
클라우드 코드를 사용하면 Back4App 백엔드에 사용자 정의 서버 측 논리를 추가할 수 있습니다. 이는 비즈니스 규칙, REST API 변환, 트리거 또는 클라이언트 측에서 안전하게 유지하고 싶은 데이터 검증에 유용합니다.
예제 클라우드 함수
JS
// main.js
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
클라우드 코드 배포
Back4App CLI를 통해: CLI를 설치하고 구성한 후 b4a deploy를 실행합니다.
대시보드를 통해: 대시보드에서 Cloud Code > Functions로 가서 코드를 main.js,에 붙여넣고 배포를 클릭합니다.
﻿
함수 호출하기
Gatsby/Parse SDK에서:
JS
import Parse from '../parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
import Parse from '../parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
﻿
5단계 – 인증 구성
파스 사용자 클래스
Back4App은 Parse.User 클래스를 인증에 사용합니다. 기본적으로 비밀번호 해싱, 세션 및 안전한 저장소를 처리합니다.
Gatsby에서 회원가입 및 로그인
JS
import Parse from '../parseConfig';

// SignUp
async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

// Login
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
import Parse from '../parseConfig';

// SignUp
async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

// Login
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
﻿
로그인 후 Parse.User.current()를 호출하여 사용자가 로그인했는지 확인할 수 있습니다.
소셜 로그인
추가 설정을 통해 Google, Facebook, Apple, 및 기타 제공업체를 통합할 수 있습니다. 자세한 내용은 소셜 로그인 문서.﻿
6단계 – 파일 저장 처리
파일 업로드
이미지나 다른 파일을 업로드하려면 Parse.File을 사용하세요. 예를 들어, Gatsby 컴포넌트에서:
JS
async function uploadImage(file) {
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
async function uploadImage(file) {
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
﻿
이 파일을 Parse 객체에 첨부하고 저장한 후, 나중에 파일 URL을 검색하여 Gatsby 사이트에 표시할 수 있습니다.
7단계 – 이메일 인증 및 비밀번호 재설정
왜 중요한가
이메일 확인은 사용자의 이메일 주소를 확인하고, 비밀번호 재설정 흐름은 사용자 경험을 향상시킵니다. 두 가지 모두 Back4App에서 쉽게 구성할 수 있습니다.
대시보드에서 앱의 이메일 설정으로 이동합니다.
이메일 확인을 활성화합니다 및 비밀번호 재설정 이메일 템플릿을 설정합니다.
Parse SDK 메서드 사용 (예: Parse.User.requestPasswordReset(email))로 재설정 이메일을 트리거합니다.
8단계 – 클라우드 작업으로 작업 예약하기
클라우드 작업 개요
반복 작업을 자동화하기 위해 클라우드 작업을 사용합니다. 예를 들어, 오래된 데이터를 제거하거나 매일 요약을 전송하는 작업입니다.
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);
  }
});
﻿
그런 다음 앱 설정 > 서버 설정 > 백그라운드 작업 아래에 예약합니다.
클라우드 작업 예약
﻿
9단계 – 웹훅 통합
웹훅을 사용하면 Back4App 앱이 특정 이벤트가 발생할 때 외부 서비스에 HTTP 요청을 보낼 수 있습니다. 예를 들어, 새 레코드가 생성될 때입니다.
Back4App 대시보드로 가기 > 더보기 > 웹훅.
새 웹훅 추가, 외부 서비스의 엔드포인트 URL을 지정합니다.
웹훅을 트리거하는 항목 선택 (예: Todo 클래스의 afterSave).
웹훅 추가
﻿
적절한 엔드포인트를 추가하여 Slack 또는 결제 게이트웨이와 통합할 수도 있습니다.
10단계 – Back4App 관리 패널 탐색
Back4App의 Admin App은 데이터 관리를 위한 모델 중심 인터페이스입니다. 비기술 사용자에게 클래스에서 CRUD 작업을 수행할 수 있는 안전한 접근 권한을 부여할 수 있습니다.
Admin App 활성화
이동하여 App Dashboard > More > Admin App을 클릭하고 “Admin App 활성화.”
Admin App 활성화
﻿
그런 다음 Admin User 생성하고 관리 인터페이스를 위한 하위 도메인을 선택합니다.
﻿
이제 코드를 작성하지 않고도 Admin App에 로그인하여 데이터를 보고 수정할 수 있습니다.
﻿
결론
이 튜토리얼에서는 Gatsby의 백엔드를 구축하는 방법을 배웠습니다. 다음을 배웠습니다:
안전한 데이터베이스 구성 클래스, 사용자 정의 필드 및 관계를 사용하여.
Parse SDK 사용, REST API 및 GraphQL 쿼리 옵션을 데이터 거래에 사용.
데이터 보안을 위한 ACL 및 CLP 설정
비즈니스 로직 및 트리거를 확장하기 위한 클라우드 코드 작성 및 배포
회원가입, 로그인, 비밀번호 재설정 및 이메일 인증을 통한 사용자 인증 관리
이미지 및 문서에 대한 파일 저장 처리
클라우드 작업을 통한 자동화된 작업 예약
웹훅을 통한 외부 서비스 통합
데이터 관리를 쉽게 하기 위한 관리자 앱 활용
이 기술을 통해 귀하의 Gatsby 사이트는 강력한 동적 기능을 활용하면서도 Gatsby의 정적 렌더링의 이점을 누릴 수 있습니다. 여기에서 다음을 수행할 수 있습니다:
데이터 모델 확장 및 고급 비즈니스 로직 추가.
더 많은 외부 API 통합으로 진정한 포괄적 플랫폼을 만드세요.
Back4App의 공식 문서 확인 보안, 성능 및 분석에 대한 심층적인 내용을 위해.
Gatsby의 빌드 타임 기능 실험—예를 들어, “동적 데이터로부터 페이지 생성” 또는 Back4App 백엔드를 위한 “gatsby source” 플러그인 설정.
이제 Gatsby와 Back4App을 사용하여 미래 지향적이고 데이터 기반의 앱을 구축할 수 있는 강력한 기반이 마련되었습니다.
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
플러터를 위한 백엔드를 구축하는 방법?
jQuery용 백엔드를 구축하는 방법?