Quickstarters
Alpine.js로 기본 CRUD 앱 만드는 방법?

40min
개요
이 가이드에서는 Alpine.js를 사용하여 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 배웁니다.
이 튜토리얼은 Back4app을 강력한 백엔드 서비스로 활용하여 데이터를 동적으로 관리하는 데 필요한 핵심 작업을 안내합니다.
Basic-CRUD-App-AlpineJS"라는 이름의 새로운 Back4app 프로젝트를 설정하는 것으로 시작할 것입니다. 이 프로젝트는 데이터를 관리하기 위한 백엔드 역할을 합니다.
프로젝트를 초기화한 후, 컬렉션과 필드를 정의하여 유연한 데이터베이스 스키마를 설계합니다. 이는 수동으로 하거나 Back4app AI 에이전트의 도움을 받을 수 있습니다. 이 단계는 신뢰할 수 있는 CRUD 작업을 위해 백엔드가 구조화되도록 보장합니다.
다음으로, 사용자 친화적인 드래그 앤 드롭 도구인 Back4app 관리 앱을 사용하여 컬렉션을 손쉽게 관리합니다. 이 인터페이스는 데이터 관리 작업을 간소화합니다.
마지막으로, Alpine.js 프론트엔드를 REST 또는 GraphQL API를 사용하여 Back4app에 연결하고, 강력한 접근 제어로 백엔드를 보호합니다.
이 튜토리얼이 끝나면 기본 CRUD 작업과 사용자 인증 및 안전한 데이터 업데이트를 지원하는 프로덕션 준비가 완료된 웹 앱을 갖게 됩니다.
배울 내용
효율적인 백엔드 서비스로 CRUD 애플리케이션을 구축하는 방법.
확장 가능한 데이터 모델을 설계하고 이를 Alpine.js 프론트엔드에 연결하는 방법.
컬렉션 관리를 위한 드래그 앤 드롭 관리 도구 사용에 대한 팁.
컨테이너화 및 웹 배포 기술을 사용하여 애플리케이션을 배포하는 전략.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
새 프로젝트가 준비된 Back4app 계정.
도움이 필요하면 Back4app 시작하기를 참조하세요.
Alpine.js 개발 환경.
프로젝트 설정에 따라 CDN 또는 npm을 통해 Alpine.js를 포함하세요.
JavaScript, Alpine.js 및 REST API 원칙에 대한 이해.
자세한 내용은 Alpine.js 문서를 참조하세요.
﻿
1단계 – 프로젝트 시작하기
새로운 Back4app 프로젝트 설정하기
Back4app 대시보드에 로그인하세요.
“새 앱” 버튼을 클릭하세요.
프로젝트 이름을 입력하세요: Basic-CRUD-App-AlpineJS 및 안내에 따라 진행하세요.
새 프로젝트 만들기
﻿
생성 후, 프로젝트가 대시보드에 나타나며 백엔드 구성을 준비합니다.
﻿
2단계 – 데이터베이스 스키마 작성하기
데이터 모델 매핑하기
우리의 CRUD 앱을 위해, 몇 가지 주요 컬렉션을 설정할 것입니다. 아래는 스키마 설정을 안내하기 위한 필드와 데이터 유형이 포함된 샘플 컬렉션입니다. 이러한 컬렉션은 필수 CRUD 작업을 용이하게 합니다.
1. 아이템 컬렉션
이 컬렉션은 각 항목에 대한 세부 정보를 포함하고 있습니다.
필드
유형
목적
_id
객체 ID
자동 생성된 기본 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
항목 생성의 타임스탬프.
업데이트됨
날짜
마지막 업데이트의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 자격 증명 및 세부 정보를 저장합니다.
필드
유형
목적
_id
객체 ID
자동 생성된 기본 식별자.
사용자 이름
문자열
고유 사용자 식별자.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
안전하게 저장된 해시된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
이러한 컬렉션은 Back4app 대시보드에서 각 컬렉션에 대해 새 클래스를 추가하고 열을 정의하여 수동으로 생성할 수 있습니다.
새 클래스 만들기
﻿
필드를 설정하려면 유형을 선택하고 이름을 지정하며 기본값을 추가하고 필수로 표시할 수 있습니다.
열 만들기
﻿
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 스키마 생성을 자동화하는 데 도움을 줍니다. 원하는 필드를 설명하는 프롬프트를 기반으로 컬렉션을 생성합니다.
AI 에이전트 사용 방법:
Back4app 대시보드에서 AI 에이전트를 엽니다.
필요한 컬렉션과 필드에 대한 자세한 설명을 입력합니다.
제안된 스키마를 검토하고 프로젝트에 적용합니다.
샘플 프롬프트
Text
Create the following collections:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 도구는 시간을 절약하고 일관되고 최적화된 스키마를 보장합니다.
﻿
3단계 – 관리자 인터페이스 및 CRUD 기능 활성화
관리자 앱 소개
Back4app 관리자 앱은 백엔드 데이터를 관리하기 위한 코드 없는 인터페이스를 제공합니다. 드래그 앤 드롭 기능으로 CRUD 작업이 간단하고 효율적입니다.
관리자 앱 활성화 방법
Back4app 대시보드의 “더보기” 섹션으로 이동합니다.
“관리자 앱”을 선택한 후 관리자 앱 활성화를 클릭합니다.
첫 번째 관리자 자격 증명을 설정하여 역할 및 시스템 컬렉션을 구성합니다.
관리자 앱 활성화
﻿
활성화되면 관리자 앱에 로그인하여 데이터를 관리합니다.
관리자 앱 대시보드
﻿
관리자 앱으로 CRUD 작업 수행하기
관리자 앱 내에서 다음을 수행할 수 있습니다:
레코드 생성: 항목과 같은 컬렉션에서 “레코드 추가” 버튼을 클릭합니다.
레코드 읽기 및 업데이트: 세부 정보를 보거나 편집할 레코드를 선택합니다.
레코드 삭제: 삭제 기능을 사용하여 원하지 않는 항목을 제거합니다.
이 인터페이스는 직관적인 드래그 앤 드롭 디자인으로 데이터 관리를 간소화합니다.
﻿
4단계 – Alpine.js를 Back4app에 연결하기
백엔드가 준비되었으므로 Alpine.js 프론트엔드를 Back4app에 연결할 시간입니다.
REST/GraphQL API 사용하기
백엔드와 상호작용하기 위해 REST 또는 GraphQL을 사용합니다.
예시: REST를 통한 항목 가져오기
JS
// Sample REST API call using fetch
async function loadItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items loaded:', data.results);
  } catch (error) {
    console.error('Error loading items:', error);
  }
}
loadItems();
// Sample REST API call using fetch
async function loadItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Items loaded:', data.results);
  } catch (error) {
    console.error('Error loading items:', error);
  }
}
loadItems();
﻿
이 API 호출을 Alpine.js 구성 요소 내에 통합하여 CRUD 작업을 수행합니다.
﻿
5단계 – 백엔드 보호하기
액세스 제어 목록(ACL) 설정하기
레코드에 ACL을 적용하여 데이터를 보호합니다. 예를 들어, 개인 항목을 생성하려면:
JS
async function addPrivateItem(data, owner) {
  const itemData = {
    title: data.title,
    description: data.description
  };

  // Define ACL settings: only the owner has read/write privileges
  const aclSettings = {
    "*": { "read": false, "write": false },
    [owner]: { "read": true, "write": true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({ ...itemData, ACL: aclSettings })
    });
    const result = await response.json();
    console.log('Private item added:', result);
  } catch (error) {
    console.error('Error adding private item:', error);
  }
}
async function addPrivateItem(data, owner) {
  const itemData = {
    title: data.title,
    description: data.description
  };

  // Define ACL settings: only the owner has read/write privileges
  const aclSettings = {
    "*": { "read": false, "write": false },
    [owner]: { "read": true, "write": true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({ ...itemData, ACL: aclSettings })
    });
    const result = await response.json();
    console.log('Private item added:', result);
  } catch (error) {
    console.error('Error adding private item:', error);
  }
}
﻿
클래스 수준 권한(CLP) 구성하기
Back4app 대시보드 내에서 각 컬렉션에 대해 CLP를 설정하여 기본 액세스 정책을 시행하고, 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 합니다.
﻿
6단계 – 사용자 인증 구현하기
사용자 계정 생성하기
Back4app은 인증 관리를 위해 Parse의 User 클래스를 활용합니다. Alpine.js 프로젝트에서 API 호출을 통해 사용자 등록 및 로그인을 처리하세요.
예시: Alpine.js로 사용자 가입하기
HTML
<!–– Example Alpine.js user signup form ––>
<div x-data="{ username: '', password: '', email: '' }">
  <form @submit.prevent="signUpUser()">
    <input type="text" placeholder="Username" x-model="username" />
    <input type="password" placeholder="Password" x-model="password" />
    <input type="email" placeholder="Email" x-model="email" />
    <button type="submit">Sign Up</button>
  </form>

  <script>
    function signUpUser() {
      const userData = {
        username: document.querySelector('[x-model="username"]').value,
        password: document.querySelector('[x-model="password"]').value,
        email: document.querySelector('[x-model="email"]').value
      };

      fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify(userData)
      })
      .then(response => response.json())
      .then(data => {
        alert('Signup successful!');
        console.log('User data:', data);
      })
      .catch(error => {
        alert('Signup error: ' + error.message);
      });
    }
  </script>
</div>
<!–– Example Alpine.js user signup form ––>
<div x-data="{ username: '', password: '', email: '' }">
  <form @submit.prevent="signUpUser()">
    <input type="text" placeholder="Username" x-model="username" />
    <input type="password" placeholder="Password" x-model="password" />
    <input type="email" placeholder="Email" x-model="email" />
    <button type="submit">Sign Up</button>
  </form>

  <script>
    function signUpUser() {
      const userData = {
        username: document.querySelector('[x-model="username"]').value,
        password: document.querySelector('[x-model="password"]').value,
        email: document.querySelector('[x-model="email"]').value
      };

      fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify(userData)
      })
      .then(response => response.json())
      .then(data => {
        alert('Signup successful!');
        console.log('User data:', data);
      })
      .catch(error => {
        alert('Signup error: ' + error.message);
      });
    }
  </script>
</div>
﻿
유저 로그인 및 세션 처리를 위해 유사한 방법을 구현할 수 있습니다.
﻿
7단계 – 웹 배포를 통한 Alpine.js 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 Alpine.js 프론트엔드를 쉽게 호스팅할 수 있습니다. 이 섹션에서는 프로덕션 빌드를 준비하고, 코드를 GitHub에 커밋하고, 리포지토리를 웹 배포에 연결하고, 앱을 시작합니다.
7.1 프로덕션 자산 구축하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 프로세스를 사용하는 경우 빌드 명령을 실행합니다 (Alpine.js용):
Bash
npm run build
npm run build
﻿
이 명령은 최적화된 정적 파일이 포함된 폴더 (일반적으로 dist 또는 build)를 생성합니다.
빌드 폴더에 필요한 자산과 함께 index.html이 포함되어 있는지 확인합니다.
﻿
7.2 소스 파일 정리 및 업로드
당신의 GitHub 리포지토리는 Alpine.js 프로젝트의 모든 소스 파일을 포함해야 합니다. 일반적인 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-AlpineJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   └── components/
│       ├── itemsList.js
│       └── auth.js
├── package.json
└── README.md
Basic-CRUD-App-AlpineJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   └── components/
│       ├── itemsList.js
│       └── auth.js
├── package.json
└── README.md
﻿
샘플 파일: src/main.js
JS
document.addEventListener('alpine:init', () => {
  Alpine.data('itemsApp', () => ({
    items: [],
    newItemTitle: '',
    newItemDescription: '',

    async loadItems() {
      try {
        const response = await fetch('https://parseapi.back4app.com/classes/Items', {
          headers: {
            'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
            'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
          }
        });
        const data = await response.json();
        this.items = data.results;
      } catch (error) {
        console.error('Failed to load items:', error);
      }
    },

    async addItem() {
      const payload = {
        title: this.newItemTitle,
        description: this.newItemDescription
      };
      try {
        await fetch('https://parseapi.back4app.com/classes/Items', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
            'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
          },
          body: JSON.stringify(payload)
        });
        this.newItemTitle = '';
        this.newItemDescription = '';
        this.loadItems();
      } catch (error) {
        console.error('Error adding item:', error);
      }
    }
  }));
});
document.addEventListener('alpine:init', () => {
  Alpine.data('itemsApp', () => ({
    items: [],
    newItemTitle: '',
    newItemDescription: '',

    async loadItems() {
      try {
        const response = await fetch('https://parseapi.back4app.com/classes/Items', {
          headers: {
            'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
            'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
          }
        });
        const data = await response.json();
        this.items = data.results;
      } catch (error) {
        console.error('Failed to load items:', error);
      }
    },

    async addItem() {
      const payload = {
        title: this.newItemTitle,
        description: this.newItemDescription
      };
      try {
        await fetch('https://parseapi.back4app.com/classes/Items', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
            'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
          },
          body: JSON.stringify(payload)
        });
        this.newItemTitle = '';
        this.newItemDescription = '';
        this.loadItems();
      } catch (error) {
        console.error('Error adding item:', error);
      }
    }
  }));
});
﻿
코드를 GitHub에 커밋하기
프로젝트 폴더에 Git 저장소를 초기화합니다:
Bash
git init
git init
﻿
파일을 스테이징합니다:
Bash
git add .
git add .
﻿
변경 사항을 커밋합니다:
Bash
git commit -m "Alpine.js 프론트엔드의 초기 커밋"
git commit -m "Alpine.js 프론트엔드의 초기 커밋"
﻿
GitHub에 새 저장소를 만듭니다 (예: Basic-CRUD-App-AlpineJS-Frontend).
코드를 푸시합니다:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-AlpineJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-AlpineJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 GitHub 리포지토리를 웹 배포에 연결하기
Back4app 대시보드에 로그인하고 프로젝트를 선택하세요 (Basic-CRUD-App-AlpineJS).
 웹 배포 섹션을 엽니다.
GitHub 계정을 연결하고 Alpine.js 코드가 포함된 리포지토리와 브랜치를 선택하세요.
﻿
7.4 배포 설정 구성하기
빌드 명령어: 프로젝트에 미리 빌드된 폴더가 없다면, 명령어를 지정하세요 (예: npm run build).
출력 디렉토리: 정적 파일이 있는 폴더로 설정하세요 (예: build 또는 dist).
환경 변수: 필요한 변수를 추가하세요, 예를 들어 API 키.
﻿
7.5 Alpine.js 애플리케이션 도커화하기 (선택 사항)
Docker를 사용하여 배포하려면, 다음과 같은 Dockerfile을 포함하세요:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy dependency files and install
COPY package*.json ./
RUN npm install

# Copy source and build app
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image for building
FROM node:16-alpine as build

# Set working directory
WORKDIR /app

# Copy dependency files and install
COPY package*.json ./
RUN npm install

# Copy source and build app
COPY . .
RUN npm run build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
원하는 경우 웹 배포 구성에서 Docker 옵션을 선택하세요.
﻿
7.6 애플리케이션 시작하기
Back4app에서 배포 버튼을 클릭하세요.
Back4app이 코드를 가져오고, 빌드하고, 배포하는 동안 배포 프로세스를 모니터링하세요.
배포가 완료되면 Alpine.js 애플리케이션이 호스팅되는 URL을 받게 됩니다.
﻿
7.7 배포 테스트하기
브라우저에서 제공된 URL을 방문하세요.
앱이 올바르게 로드되고, 라우트가 예상대로 작동하며, 자산이 제대로 제공되는지 확인하세요.
브라우저 콘솔 로그와 Back4app 배포 로그를 확인하여 문제를 해결하세요.
﻿
8단계 – 최종 생각과 향후 개선 사항
축하합니다! Alpine.js와 Back4app을 사용하여 완전한 CRUD 애플리케이션을 구축했습니다.
당신은 Basic-CRUD-App-AlpineJS 프로젝트를 설정하고, 상세한 데이터베이스 컬렉션을 만들고, 데이터 관리를 위한 노코드 관리 도구를 활용했습니다.
또한, Alpine.js 프론트엔드를 REST API를 사용하여 백엔드에 연결하고 안전한 데이터 처리를 보장했습니다.
다음 단계:
UI 개선하기: 상세 항목 보기 또는 실시간 업데이트와 같은 고급 기능으로 Alpine.js 구성 요소를 확장하세요.
기능 추가하기: 추가 백엔드 로직, 서드파티 API 또는 복잡한 접근 제어를 통합하는 것을 탐색하세요.
추가 학습: Back4app 문서 및 추가 리소스를 방문하여 고급 통합에 대한 이해를 심화하세요.
코딩을 즐기고 다음 프로젝트를 구축하세요!
필드	유형	목적
_id	객체 ID	자동 생성된 기본 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목 생성의 타임스탬프.
업데이트됨	날짜	마지막 업데이트의 타임스탬프.
필드	유형	목적
_id	객체 ID	자동 생성된 기본 식별자.
사용자 이름	문자열	고유 사용자 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	안전하게 저장된 해시된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 24 Feb 2025
이 페이지가 도움이 되었습니까?
Koa로 CRUD 애플리케이션 만드는 방법?
메테오로 기본 CRUD 앱을 만드는 방법? 단계별 가이드