Quickstarters
리트로 기본 CRUD 애플리케이션 구축하기?

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

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - 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 application:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - 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단계 – Lit와 Back4app 연결하기
이제 백엔드가 구성되고 관리되었으므로, Lit 프론트엔드를 Back4app과 통합할 시간입니다.
옵션 A: Parse SDK 사용하기 (해당되는 경우)
Parse SDK 설치하기:
Bash
npm install parse
npm install parse
﻿
Lit 앱에서 Parse 설정하기:
구성 파일을 생성하세요 (예: src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// 여기에 Back4app 자격 증명을 입력하세요
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// 여기에 Back4app 자격 증명을 입력하세요
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Lit 컴포넌트에서 Parse 구현하기:
아이템을 검색하고 표시하는 Lit 컴포넌트를 생성하세요:
JS
// src/components/ItemsList.js
import { LitElement, html, css } from 'lit';
import Parse from '../parseConfig';

class ItemsList extends LitElement {
  static properties = { items: { type: Array } };

  constructor() {
    super();
    this.items = [];
  }

  connectedCallback() {
    super.connectedCallback();
    this.fetchItems();
  }

  async fetchItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
    } catch (error) {
      console.error("아이템 검색 중 오류:", error);
    }
  }

  render() {
    return html`
      <h2>아이템</h2>
      <ul>
        ${this.items.map(
          (item) => html`
            <li>${item.get("title")} — ${item.get("description")}</li>
          `
        )}
      </ul>
    `;
  }
}

customElements.define('items-list', ItemsList);
export default ItemsList;
// src/components/ItemsList.js
import { LitElement, html, css } from 'lit';
import Parse from '../parseConfig';

class ItemsList extends LitElement {
  static properties = { items: { type: Array } };

  constructor() {
    super();
    this.items = [];
  }

  connectedCallback() {
    super.connectedCallback();
    this.fetchItems();
  }

  async fetchItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
    } catch (error) {
      console.error("아이템 검색 중 오류:", error);
    }
  }

  render() {
    return html`
      <h2>아이템</h2>
      <ul>
        ${this.items.map(
          (item) => html`
            <li>${item.get("title")} — ${item.get("description")}</li>
          `
        )}
      </ul>
    `;
  }
}

customElements.define('items-list', ItemsList);
export default ItemsList;
﻿
옵션 B: REST 또는 GraphQL 활용하기
Parse SDK가 프로젝트에 적합하지 않은 경우, REST 또는 GraphQL을 사용하여 CRUD 작업을 수행하세요. 예를 들어, REST를 통해 아이템을 검색하려면:
JS
// Example REST request 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 retrieved:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Example REST request 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 retrieved:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
필요에 따라 Lit 구성 요소 내에서 이러한 API 호출을 통합하세요.
﻿
5단계 – 백엔드 보호하기
액세스 제어 목록(ACL) 구현하기
ACL을 설정하여 객체를 보호하세요. 예를 들어, 개인 항목을 생성하려면:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL so only the owner has access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL so only the owner has access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
클래스 수준 권한(CLP) 구성하기
Back4app 대시보드 내에서 각 컬렉션의 CLP를 조정하여 기본 액세스 규칙을 적용합니다. 이를 통해 인증된 사용자 또는 권한이 부여된 사용자만 민감한 정보에 접근할 수 있습니다.
﻿
단계 6 – 사용자 인증 구현
사용자 계정 생성
Back4app은 Parse의 사용자 클래스를 사용하여 인증을 관리합니다. Lit 애플리케이션에서 아래와 같이 사용자 등록 및 로그인을 구현합니다:
JS
// src/components/Auth.js
import { LitElement, html, css } from 'lit';
import Parse from '../parseConfig';

class SignUpForm extends LitElement {
  static properties = { username: { type: String }, password: { type: String }, email: { type: String } };

  constructor() {
    super();
    this.username = '';
    this.password = '';
    this.email = '';
  }

  async handleSignUp(e) {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }

  render() {
    return html`
      <form @submit="${this.handleSignUp}">
        <input type="text" placeholder="Username" .value="${this.username}" @input="${e => this.username = e.target.value}" />
        <input type="password" placeholder="Password" .value="${this.password}" @input="${e => this.password = e.target.value}" />
        <input type="email" placeholder="Email" .value="${this.email}" @input="${e => this.email = e.target.value}" />
        <button type="submit">Register</button>
      </form>
    `;
  }
}

customElements.define('sign-up-form', SignUpForm);
export default SignUpForm;
// src/components/Auth.js
import { LitElement, html, css } from 'lit';
import Parse from '../parseConfig';

class SignUpForm extends LitElement {
  static properties = { username: { type: String }, password: { type: String }, email: { type: String } };

  constructor() {
    super();
    this.username = '';
    this.password = '';
    this.email = '';
  }

  async handleSignUp(e) {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registration successful!');
    } catch (error) {
      alert('Registration error: ' + error.message);
    }
  }

  render() {
    return html`
      <form @submit="${this.handleSignUp}">
        <input type="text" placeholder="Username" .value="${this.username}" @input="${e => this.username = e.target.value}" />
        <input type="password" placeholder="Password" .value="${this.password}" @input="${e => this.password = e.target.value}" />
        <input type="email" placeholder="Email" .value="${this.email}" @input="${e => this.email = e.target.value}" />
        <button type="submit">Register</button>
      </form>
    `;
  }
}

customElements.define('sign-up-form', SignUpForm);
export default SignUpForm;
﻿
로그인 및 세션 관리도 유사하게 구현할 수 있습니다. 소셜 인증, 이메일 확인 및 비밀번호 재설정과 같은 추가 기능은 Back4app 대시보드를 통해 설정할 수 있습니다.
﻿
7단계 – 웹 배포를 통한 Lit 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리에서 코드를 배포하여 Lit 애플리케이션을 호스팅할 수 있습니다. 프로덕션 빌드를 준비하고, 코드를 GitHub에 푸시하고, 사이트를 배포하려면 다음 단계를 따르세요.
7.1 프로덕션 빌드 생성하기
터미널에서 프로젝트 디렉토리를 엽니다.
빌드 명령을 실행합니다:
Bash
npm run build
npm run build
﻿
이 명령은 최적화된 정적 자산을 포함하는 build 폴더를 생성합니다.
빌드 확인:
 build 폴더에 필요한 하위 디렉토리와 함께 index.html 파일이 포함되어 있는지 확인합니다.
﻿
7.2 코드 정리 및 업로드
귀하의 GitHub 리포지토리는 Lit 프론트엔드의 전체 소스 코드를 포함해야 합니다. 일반적인 프로젝트 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Lit-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-Lit-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
예제 구성 파일
src/parseConfig.js
JS
import Parse from 'parse';

// Insert your actual Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
import Parse from 'parse';

// Insert your actual Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
예제 메인 애플리케이션 파일
src/App.js
JS
import { LitElement, html } from 'lit';
import Parse from './parseConfig';

class AppRoot extends LitElement {
  static properties = { items: { type: Array }, newTitle: { type: String }, newDescription: { type: String } };

  constructor() {
    super();
    this.items = [];
    this.newTitle = '';
    this.newDescription = '';
  }

  connectedCallback() {
    super.connectedCallback();
    this.loadItems();
  }

  async loadItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
    } catch (error) {
      console.error("Failed to load items:", error);
    }
  }

  async addItem() {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", this.newTitle);
    item.set("description", this.newDescription);

    try {
      await item.save();
      this.newTitle = '';
      this.newDescription = '';
      this.loadItems();
    } catch (error) {
      console.error("Error adding item:", error);
    }
  }

  render() {
    return html`
      <div style="padding: 2rem;">
        <h1>Items</h1>
        <div>
          <input type="text" placeholder="Title" .value="${this.newTitle}" @input="${e => this.newTitle = e.target.value}" />
          <input type="text" placeholder="Description" .value="${this.newDescription}" @input="${e => this.newDescription = e.target.value}" />
          <button @click="${this.addItem}">Add Item</button>
        </div>
        <ul>
          ${this.items.map(item => html`
            <li>
              <strong>${item.get("title")}</strong> - ${item.get("description")}
            </li>
          `)}
        </ul>
      </div>
    `;
  }
}

customElements.define('app-root', AppRoot);
export default AppRoot;
import { LitElement, html } from 'lit';
import Parse from './parseConfig';

class AppRoot extends LitElement {
  static properties = { items: { type: Array }, newTitle: { type: String }, newDescription: { type: String } };

  constructor() {
    super();
    this.items = [];
    this.newTitle = '';
    this.newDescription = '';
  }

  connectedCallback() {
    super.connectedCallback();
    this.loadItems();
  }

  async loadItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.items = results;
    } catch (error) {
      console.error("Failed to load items:", error);
    }
  }

  async addItem() {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", this.newTitle);
    item.set("description", this.newDescription);

    try {
      await item.save();
      this.newTitle = '';
      this.newDescription = '';
      this.loadItems();
    } catch (error) {
      console.error("Error adding item:", error);
    }
  }

  render() {
    return html`
      <div style="padding: 2rem;">
        <h1>Items</h1>
        <div>
          <input type="text" placeholder="Title" .value="${this.newTitle}" @input="${e => this.newTitle = e.target.value}" />
          <input type="text" placeholder="Description" .value="${this.newDescription}" @input="${e => this.newDescription = e.target.value}" />
          <button @click="${this.addItem}">Add Item</button>
        </div>
        <ul>
          ${this.items.map(item => html`
            <li>
              <strong>${item.get("title")}</strong> - ${item.get("description")}
            </li>
          `)}
        </ul>
      </div>
    `;
  }
}

customElements.define('app-root', AppRoot);
export default AppRoot;
﻿
코드를 GitHub에 푸시하기
프로젝트 디렉토리에서 Git 초기화하기:
Bash
git init
git init
﻿
모든 파일 추가하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "Initial Lit frontend commit"
git commit -m "Initial Lit frontend commit"
﻿
GitHub에 새 저장소 만들기 (예: Basic-CRUD-App-Lit-Frontend).
코드 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Lit-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Lit-Frontend.git
git push -u origin main
﻿
﻿
7.3 GitHub 리포지토리를 Back4app 웹 배포와 연결하기
웹 배포 접근하기:
Back4app 대시보드에 로그인하고, 프로젝트(기본-CRUD-앱-리트)를 선택한 후 웹 배포 옵션을 선택하세요.
GitHub 계정 연결하기:
프롬프트에 따라 GitHub 계정을 연결하여 Back4app이 리포지토리에 접근할 수 있도록 하세요.
리포지토리 및 브랜치 선택하기:
리포지토리(예: 기본-CRUD-앱-리트-프론트엔드)와 Lit 코드가 포함된 브랜치(예: main)를 선택하세요.
﻿
7.4 배포 설정 구성하기
빌드 설정을 지정하십시오:
빌드 명령어:
사전 빌드된 build 폴더가 없으면 npm run build와 같은 명령어를 사용하십시오. Back4app은 배포 중에 이 명령어를 실행합니다.
출력 디렉토리:
이것을 build로 설정하여 Back4app이 정적 파일을 찾을 수 있도록 하십시오.
환경 변수:
필요한 API 키 또는 기타 환경별 값을 포함하십시오.
﻿
7.5 Docker로 Lit 애플리케이션 컨테이너화하기
Docker를 선호하는 경우, 리포지토리에 Dockerfile을 포함하십시오:
Dockerfile
# Use a lightweight Node image for building the app
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

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

# Copy remaining source code and build the app
COPY . .
RUN npm run build

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

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

# Set the working directory
WORKDIR /app

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

# Copy remaining source code and build the app
COPY . .
RUN npm run build

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

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Back4app 배포 설정에서 Docker 배포 옵션을 선택하여 애플리케이션을 컨테이너화하십시오.
﻿
7.6 애플리케이션 시작하기
배포 시작하기:
설정을 완료한 후 배포 버튼을 클릭하세요.
프로세스 모니터링:
Back4app이 GitHub 코드를 가져오고, 빌드 명령을 실행하며, 컨테이너를 배포합니다.
실시간 URL 받기:
배포가 완료되면 Lit 애플리케이션이 호스팅되는 URL이 제공됩니다.
﻿
7.7 배포 검증하기
URL 방문하기:
제공된 링크를 브라우저에서 엽니다.
기능 테스트:
애플리케이션이 제대로 로드되고, 탐색이 작동하며, 모든 자산이 올바르게 제공되는지 확인합니다.
필요시 디버깅:
브라우저 개발자 도구를 사용하여 문제를 검사합니다. 문제가 발생하면 Back4app의 배포 로그를 검토하세요.
﻿
8단계 – 최종 생각 및 향후 개선 사항
잘 하셨습니다! Lit와 Back4app을 사용하여 기본 CRUD 애플리케이션을 성공적으로 개발했습니다. 
"Basic-CRUD-App-Lit"라는 프로젝트를 설정하고, 항목 및 사용자에 대한 자세한 데이터베이스 스키마를 정의했으며, 관리 앱을 통해 데이터를 관리했습니다. 
또한, Lit 프론트엔드를 백엔드와 통합하고 강력한 보안 조치를 구현했습니다.
다음 단계:
프론트엔드 개선:
상세 항목 페이지, 검색 기능 및 실시간 업데이트와 같은 기능을 추가하세요.
백엔드 기능 확장:
클라우드 기능, 외부 API 서비스 또는 역할 기반 접근 제어와 같은 고급 기능을 통합하세요.
더 많은 리소스 탐색:
Back4app 문서 및 성능 및 사용자 정의에 대한 더 깊은 통찰력을 위한 다른 튜토리얼을 방문하세요.
이 가이드를 따르면 이제 Back4app을 사용하여 Lit 애플리케이션을 위한 확장 가능하고 안전한 CRUD 백엔드를 만들 수 있는 기술을 갖추게 되었습니다. 코딩을 즐기고 계속 혁신하세요!
필드	데이터 유형	세부사항
_id	객체 ID	자동 생성된 기본 키.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 세부정보.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	항목이 마지막으로 수정된 타임스탬프.
필드	데이터 유형	세부사항
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	안전한 인증을 위한 해시된 비밀번호.
생성일	날짜	계정 생성의 타임스탬프.
업데이트됨	날짜	최신 계정 업데이트의 타임스탬프.
업데이트됨 26 Feb 2025
이 페이지가 도움이 되었습니까?
Qwik으로 CRUD 애플리케이션 구축하기: 포괄적인 튜토리얼
Koa로 CRUD 애플리케이션 만드는 방법?