Quickstarters
폴리머로 기본 CRUD 애플리케이션 구축하기: 포괄적인 안내서

41min
개요
이 가이드를 통해 Polymer를 사용하여 완전한 기능을 갖춘 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 개발하는 방법을 배우게 됩니다.
이 walkthrough는 데이터를 관리하고 수정하는 데 필요한 기본 작업을 수행하는 방법을 보여줍니다. 먼저 Basic-CRUD-App-Polymer,이라는 제목의 Back4app 프로젝트를 설정하여 애플리케이션의 백엔드로 사용할 것입니다.
그 다음, CRUD 작업을 최적화하기 위해 정확한 컬렉션과 필드를 정의하여 확장 가능한 데이터 모델을 작성합니다. 이는 수동으로 하거나 Back4app AI Agent의 도움을 받을 수 있습니다.
다음으로, 사용자 친화적인 드래그 앤 드롭 관리 인터페이스인 Back4app Admin App을 활용하여 데이터 작업을 간소화합니다.
마지막으로, REST/GraphQL API를 사용하여 Polymer 프론트엔드를 Back4app과 통합하고, 정교한 접근 제어로 백엔드 보안을 강화합니다.
이 튜토리얼이 끝나면 핵심 CRUD 작업을 지원하고 사용자 인증 및 강력한 데이터 관리 기능을 포함하는 프로덕션 준비가 완료된 웹 애플리케이션을 구축하게 됩니다.
배울 내용
신뢰할 수 있는 백엔드로 데이터를 효율적으로 관리하는 CRUD 애플리케이션을 개발합니다.
확장 가능한 백엔드를 설계하고 Polymer 기반의 프론트엔드와 연결합니다.
데이터 작업을 용이하게 하기 위해 드래그 앤 드롭 관리 인터페이스(Back4app Admin App)를 활용합니다.
Docker를 포함한 현대적인 기술을 사용하여 애플리케이션을 배포합니다.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
활성 프로젝트가 있는 Back4app 계정입니다.
도움이 필요하면 Back4app 시작하기를 확인하세요.
Polymer 개발 환경입니다.
Polymer CLI 또는 유사한 도구를 사용하고 Node.js(v14 이상)가 설치되어 있는지 확인하세요.
JavaScript, Polymer 및 REST API에 대한 기본적인 이해입니다.
자세한 내용은 Polymer 문서를 참조할 수 있습니다.
﻿
1단계 – 프로젝트 설정
새로운 Back4app 프로젝트 시작하기
Back4app 계정에 접근하세요.
대시보드에서 “새 앱” 옵션을 선택하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-Polymer 및 프로젝트 생성을 완료하기 위한 지침을 따르세요.
새 프로젝트 만들기
﻿
이 단계를 완료하면, 귀하의 프로젝트가 Back4app 대시보드에 표시되어 백엔드 구성의 기반을 형성합니다.
﻿
2단계 – 데이터베이스 스키마 작성하기
데이터 모델 구조화하기
이 CRUD 앱을 위해 여러 컬렉션이 필요합니다. 아래는 CRUD 작업을 처리할 수 있는 강력한 데이터베이스 스키마 설계에 도움이 되는 필드와 해당 유형이 포함된 예제 컬렉션입니다.
1. 아이템 컬렉션
필드
유형
설명
_id
객체 ID
자동 생성된 기본 키.
제목
문자열
항목의 제목.
설명
문자열
항목에 대한 간단한 설명입니다.
생성일
날짜
항목 생성의 타임스탬프.
업데이트됨
날짜
가장 최근 업데이트의 타임스탬프.
2. 사용자 수집
필드
유형
세부사항
_id
객체 ID
자동 생성된 기본 키.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
고유한 이메일 주소.
비밀번호_해시
문자열
보안을 위한 암호화된 비밀번호.
생성일
날짜
계정이 생성된 시간.
업데이트됨
날짜
최신 계정 업데이트의 타임스탬프.
Back4app 대시보드에서 새로운 클래스를 설정하고 해당 열을 추가하여 이러한 컬렉션을 수동으로 생성할 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 필드 이름을 지정하며, 기본값이나 필수 매개변수를 지정하여 새 필드를 쉽게 추가하세요.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
대시보드에서 접근할 수 있는 Back4app AI 에이전트는 귀하의 컬렉션과 필드를 자세히 설명하는 프롬프트를 기반으로 데이터베이스 스키마를 자동으로 생성합니다. 이 기능은 CRUD 작업을 위해 백엔드가 정확하게 맞춤화되도록 보장하여 시간을 크게 절약해 줍니다.
AI 에이전트 활용 방법:
AI 에이전트 실행:
Back4app 대시보드의 프로젝트 설정 또는 메인 메뉴를 통해 접근하세요.
스키마 세부정보 입력:
필요한 컬렉션과 필드를 나열하는 설명적인 프롬프트를 제공하세요.
검토 및 확인:
AI 에이전트가 요청을 처리한 후, 생성된 스키마를 검토하고 프로젝트에 적용하세요.
예시 프롬프트
Text
Create the following collections in my Back4app project:

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 in my Back4app project:

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)
﻿
AI 에이전트를 사용하면 귀하의 스키마가 일관되고 애플리케이션의 요구 사항에 최적화됩니다.
﻿
3단계 – 관리 앱 활성화 및 CRUD 작업 수행
관리 앱 개요
Back4app 관리 앱은 백엔드 관리를 위한 코드 없는 인터페이스를 제공합니다. 직관적인 드래그 앤 드롭 디자인은 CRUD 작업을 간소화하여 기록을 쉽게 생성, 보기, 업데이트 및 삭제할 수 있게 합니다.
관리 앱 활성화
“더보기” 메뉴로 이동 당신의 Back4app 대시보드에서.
“관리자 앱” 선택 그런 다음 클릭하십시오 “관리자 앱 활성화.”
관리자 자격 증명 설정 초기 관리자 사용자를 생성하여 역할을 설정합니다 (예: B4aAdminUser) 및 시스템 컬렉션.
관리자 앱 활성화
﻿
활성화 후, 관리자 앱에 로그인하여 백엔드 데이터를 관리하십시오.
관리자 앱 대시보드
﻿
관리자 앱을 사용한 데이터 관리
관리자 앱 내에서 다음을 수행할 수 있습니다:
레코드 추가: 새로운 항목을 생성하기 위해 모든 컬렉션(예: 항목)에서 “레코드 추가” 버튼을 사용하십시오.
레코드 보기/수정: 레코드를 클릭하여 세부 정보를 검사하거나 필드를 편집하십시오.
레코드 제거: 더 이상 필요하지 않은 데이터를 삭제 기능을 사용하여 제거하십시오.
이 인터페이스는 모든 CRUD 기능을 간소화하여 사용성을 크게 향상시킵니다.
﻿
4단계 – Polymer를 Back4app과 연결하기
관리자 앱을 통해 백엔드가 구성되었으므로, 이제 Polymer 프론트엔드를 Back4app에 연결할 차례입니다.
옵션 A: REST/GraphQL API 활용하기
CRUD 작업을 수행하기 위해 REST 또는 GraphQL API를 사용할 것입니다. 예를 들어, REST를 사용하여 항목을 검색하려면:
JS
// Example REST call to get items
const fetchItems = async () => {
  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 fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Example REST call to get items
const fetchItems = async () => {
  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 fetched:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
필요에 따라 Polymer 요소에 유사한 API 호출을 통합하십시오.
﻿
5단계 – 백엔드 보안 강화
액세스 제어 목록(ACL) 구현
ACL을 객체에 적용하여 데이터를 보호하십시오. 예를 들어, 제한된 항목을 생성하려면:
JS
async function createRestrictedItem(data, owner) {
  const itemData = {
    title: data.title,
    description: data.description
  };

  // Configure ACL to permit only the owner access
  const acl = {
    "*": { read: false, write: false },
    [owner.id]: { read: true, write: true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      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({ ...itemData, ACL: acl })
    });
    const result = await response.json();
    console.log('Restricted item created:', result);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
async function createRestrictedItem(data, owner) {
  const itemData = {
    title: data.title,
    description: data.description
  };

  // Configure ACL to permit only the owner access
  const acl = {
    "*": { read: false, write: false },
    [owner.id]: { read: true, write: true }
  };

  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      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({ ...itemData, ACL: acl })
    });
    const result = await response.json();
    console.log('Restricted item created:', result);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}
﻿
클래스 수준 권한 구성 (CLPs)
Back4app 대시보드 내에서 각 컬렉션에 대한 CLP를 설정하여 기본 액세스 규칙을 정의합니다. 이 구성은 권한이 있는 사용자만 민감한 데이터에 접근할 수 있도록 보장합니다.
﻿
6단계 – 폴리머에서 사용자 인증
사용자 계정 설정
Back4app은 Parse의 사용자 클래스를 사용하여 인증을 관리합니다. 귀하의 폴리머 프로젝트에서 아래와 같이 사용자 가입 및 로그인을 구현하십시오:
JS
// Example function for user registration using REST API
async function signUpUser(username, password, email) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      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({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('User registered successfully!');
    console.log(result);
  } catch (error) {
    alert('Registration error: ' + error.message);
  }
}
// Example function for user registration using REST API
async function signUpUser(username, password, email) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      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({
        username,
        password,
        email
      })
    });
    const result = await response.json();
    alert('User registered successfully!');
    console.log(result);
  } catch (error) {
    alert('Registration error: ' + error.message);
  }
}
﻿
로그인 및 세션 관리에 대해 유사한 접근 방식을 채택할 수 있으며, 이메일 확인 및 비밀번호 재설정과 같은 추가 기능은 Back4app 대시보드를 통해 구성할 수 있습니다.
﻿
7단계 – 웹 배포를 통한 폴리머 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리를 연결하여 폴리머 애플리케이션을 원활하게 호스팅할 수 있습니다. 앱을 배포하려면 다음 단계를 따르세요.
7.1 프로덕션 버전 빌드하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 명령을 실행합니다:
Bash
polymer build
polymer build
﻿
이 명령은 모든 최적화된 정적 파일이 포함된 build 폴더를 생성합니다.
빌드를 확인합니다:
 build 폴더에 index.html 파일과 필요한 자산 디렉토리가 포함되어 있는지 확인합니다.
﻿
7.2 소스 코드 정리 및 업로드
귀하의 저장소에는 Polymer 프론트엔드의 전체 소스 코드가 포함되어야 합니다. 샘플 디렉토리 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Polymer-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── my-app.js
│   ├── api-config.js
│   └── components/
│       ├── items-list.js
│       └── auth-form.js
├── polymer.json
└── README.md
Basic-CRUD-App-Polymer-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── my-app.js
│   ├── api-config.js
│   └── components/
│       ├── items-list.js
│       └── auth-form.js
├── polymer.json
└── README.md
﻿
예: src/api-config.js
JS
// src/api-config.js
export const APP_ID = 'YOUR_APPLICATION_ID';
export const REST_API_KEY = 'YOUR_REST_API_KEY';
export const API_URL = 'https://parseapi.back4app.com';
// src/api-config.js
export const APP_ID = 'YOUR_APPLICATION_ID';
export const REST_API_KEY = 'YOUR_REST_API_KEY';
export const API_URL = 'https://parseapi.back4app.com';
﻿
예: src/my-app.js
JS
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class MyApp extends PolymerElement {
  static get template() {
    return html`
      <style>
        /* Your CSS styles here */
      </style>
      <h1>Item Manager</h1>
      <items-list></items-list>
      <auth-form></auth-form>
    `;
  }
}

customElements.define('my-app', MyApp);
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class MyApp extends PolymerElement {
  static get template() {
    return html`
      <style>
        /* Your CSS styles here */
      </style>
      <h1>Item Manager</h1>
      <items-list></items-list>
      <auth-form></auth-form>
    `;
  }
}

customElements.define('my-app', MyApp);
﻿
예: src/my-app.js
코드를 GitHub에 커밋하기
Git 저장소 초기화하기 (이미 완료되지 않았다면):
Bash
git init
git init
﻿
파일 스테이징하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "Polymer 프론트엔드의 초기 커밋"
git commit -m "Polymer 프론트엔드의 초기 커밋"
﻿
GitHub 저장소 만들기:
이름을 Basic-CRUD-App-Polymer-Frontend로 설정하세요.
코드를 GitHub에 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Polymer-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Polymer-Frontend.git
git push -u origin main
﻿
﻿
7.3 GitHub 저장소를 웹 배포와 연결하기
웹 배포 접근하기:
Back4app에 로그인하고, 프로젝트 (Basic-CRUD-App-Polymer )로 이동한 후 웹 배포 기능을 선택하세요.
GitHub 통합하기:
프롬프트에 따라 GitHub 계정을 연결하여 Back4app이 저장소에 접근할 수 있도록 하세요.
저장소 및 브랜치 선택하기:
저장소 (예: Basic-CRUD-App-Polymer-Frontend)와 적절한 브랜치 (예: main)를 선택하세요.
﻿
7.4 배포 설정 구성하기
다음 세부정보를 지정하십시오:
빌드 명령:
만약 build 폴더가 미리 빌드되지 않았다면, 명령을 설정하십시오 (예: polymer build). Back4app은 배포 중에 이를 실행합니다.
출력 디렉토리:
Back4app이 정적 사이트 파일을 식별할 수 있도록 build로 설정하십시오.
환경 변수:
배포 구성에 필요한 변수를 포함하십시오 (예: API 키).
﻿
7.5 도커를 사용하여 폴리머 애플리케이션 컨테이너화하기
도커가 배포 선택인 경우, 다음과 유사한 Dockerfile을(를) 리포지토리에 포함하십시오:
Dockerfile
# Use an official Node image for building
FROM node:16-alpine as builder

# Set working directory
WORKDIR /app

# Copy dependency files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the project files
COPY . .

# Build the Polymer app
RUN polymer build

# Use Nginx to serve the built files
FROM nginx:stable-alpine
COPY --from=builder /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 builder

# Set working directory
WORKDIR /app

# Copy dependency files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the project files
COPY . .

# Build the Polymer app
RUN polymer build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
이 Dockerfile을 프로젝트에 통합하고 Back4app에서 배포 옵션으로 도커를 선택하십시오.
﻿
7.6 애플리케이션 배포하기
배포 버튼 클릭:
설정이 확인되면 배포 버튼을 누르세요.
빌드 프로세스 보기:
Back4app이 코드를 가져오고, 빌드 명령을 실행하며, 컨테이너화된 앱을 배포합니다.
URL 가져오기:
배포 후, Polymer 애플리케이션에 접근할 수 있는 URL을 받게 됩니다.
﻿
7.7 배포 테스트하기
URL 방문하기:
제공된 링크를 브라우저에서 엽니다.
기능 확인하기:
모든 경로가 올바르게 로드되고 CSS, JavaScript 및 이미지와 같은 자산이 예상대로 표시되는지 확인합니다.
문제 해결:
문제가 발생하면 배포 로그와 Back4app의 GitHub 통합 설정을 검토합니다.
﻿
8단계 – 마무리 및 향후 방향
잘 하셨습니다! Polymer와 Back4app을 사용하여 완전한 CRUD 애플리케이션을 성공적으로 구축했습니다. 
귀하의 프로젝트, Basic-CRUD-App-Polymer, 이제 아이템과 사용자에 대한 잘 정의된 컬렉션을 갖추고 있으며, 관리 앱을 통해 원활하게 관리되고, 안전하고 통합된 Polymer 프론트엔드를 제공합니다.
다음 단계:
프론트엔드 개선:
상세 아이템 보기, 검색 기능 또는 실시간 업데이트와 같은 기능을 추가하세요.
기능 확장:
Cloud Functions 또는 타사 API와 추가 백엔드 로직을 통합하세요.
더 탐색하기:
더 많은 고급 구성 및 성능 최적화를 위해 Back4app 문서를 확인하세요.
이러한 기술을 통해 확장 가능한 CRUD 백엔드를 구축하고 Polymer와 Back4app으로 강력한 웹 애플리케이션을 배포할 수 있는 충분한 준비가 되어 있습니다. 즐거운 코딩 되세요!
필드	유형	설명
_id	객체 ID	자동 생성된 기본 키.
제목	문자열	항목의 제목.
설명	문자열	항목에 대한 간단한 설명입니다.
생성일	날짜	항목 생성의 타임스탬프.
업데이트됨	날짜	가장 최근 업데이트의 타임스탬프.
필드	유형	세부사항
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	고유한 이메일 주소.
비밀번호_해시	문자열	보안을 위한 암호화된 비밀번호.
생성일	날짜	계정이 생성된 시간.
업데이트됨	날짜	최신 계정 업데이트의 타임스탬프.
업데이트됨 26 Feb 2025
이 페이지가 도움이 되었습니까?
마르코로 기본 CRUD 앱 만드는 법? 단계별 가이드
Qwik으로 CRUD 애플리케이션 구축하기: 포괄적인 튜토리얼