Building a CRUD App with Inferno.js: A Comprehensive Walkthrough

41min
개요
이 가이드는 Inferno.js를 사용하여 전체 기능을 갖춘 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 보여줍니다.
효율적으로 정보를 조작하고 업데이트하는 CRUD 시스템을 개발하여 기본 데이터 작업을 처리하는 방법을 배우게 됩니다.
우리의 백엔드 기반은 Back4app에 의해 지원되며, 여기서 데이터 관리를 원활하게 하기 위해 Basic-CRUD-App-InfernoJS라는 프로젝트를 설정합니다.
먼저 Back4app 프로젝트를 설정하고 클래스를 정의하여 확장 가능한 데이터베이스 스키마를 설계합니다. 이 과정은 CRUD 작업을 위한 데이터 구조가 충분히 견고하도록 보장합니다.
그 다음, 데이터 관리를 간단하게 해주는 코드 없는 드래그 앤 드롭 도구인 Back4app 관리 인터페이스를 활용합니다.
마지막으로, SDK(설정에 맞는 경우) 또는 API 호출을 통해 Inferno.js 프론트엔드를 Back4app과 연결하며, 보안을 위해 엄격한 접근 제어를 적용합니다.
이 튜토리얼이 끝나면 사용자 인증, 동적 데이터 처리 및 반응형 인터페이스를 갖춘 프로덕션 수준의 웹 애플리케이션을 갖게 됩니다.
핵심 통찰
Back4app에서 강력한 백엔드로 CRUD 기능을 마스터하세요.
확장 가능한 데이터베이스 스키마를 설계하고 이를 Inferno.js 프론트엔드와 통합하는 방법을 이해하세요.
생성, 읽기, 업데이트 및 삭제 작업을 손쉽게 실행할 수 있는 시각적 관리 도구를 탐색하세요.
Docker를 사용한 컨테이너화 등 배포 전략을 배우세요.
﻿
요구 사항
﻿
Back4app 계정과 새로 생성된 프로젝트입니다.
안내가 필요하면 Back4app 시작하기를 확인하세요.
Inferno.js 개발 환경입니다.
좋아하는 Inferno 스타터나 보일러플레이트를 사용하세요. Node.js(버전 14 이상)가 설치되어 있는지 확인하세요.
JavaScript, Inferno.js 및 REST API 원칙에 대한 기본 이해입니다.
추가 세부정보는 Inferno 문서를 참조하세요.
시작하기 전에 다음 사항을 확인하세요:
﻿
1단계 – 프로젝트 초기화
새로운 Back4app 프로젝트 시작하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 옵션을 선택하세요. 
프로젝트 이름을 지정하세요: Basic-CRUD-App-InfernoJS 그리고 화면의 지침에 따라 생성 완료하세요.
새 프로젝트 만들기
﻿
생성 후, 프로젝트가 대시보드에 나타나며 앱을 위한 견고한 백엔드 플랫폼을 제공합니다.
﻿
2단계 – 데이터베이스 스키마 작성하기
데이터 모델 정의하기
이 CRUD 애플리케이션을 위해 여러 클래스를 설정할 것입니다. 아래는 CRUD 작업을 지원하도록 설정된 두 개의 필수 클래스 예시입니다.
1. 항목 클래스
필드
유형
세부사항
_id
객체 ID
자동 생성된 기본 키.
제목
문자열
항목의 제목.
설명
문자열
항목에 대한 간단한 설명.
생성일
날짜
항목이 생성된 시간을 표시하는 타임스탬프.
업데이트됨
날짜
가장 최근 업데이트의 타임스탬프.
2. 사용자 클래스
필드
유형
세부사항
_id
객체 ID
자동 생성된 기본 키.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
안전한 인증을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
Back4app 대시보드에서 "새 클래스"를 선택하고 필요한 열을 추가하여 이러한 클래스를 수동으로 생성합니다.
새 클래스 만들기
﻿
각 필드는 데이터 유형을 선택하고, 이름을 제공하며, 기본값이나 요구 사항을 설정하여 정의할 수 있습니다.
열 만들기
﻿
﻿
스키마 설정을 위한 Back4app AI 어시스턴트 활용하기
Back4app AI 어시스턴트는 설명을 기반으로 클래스를 자동 생성하여 스키마 생성을 간소화합니다.
AI 어시스턴트 사용 방법:
AI 어시스턴트에 접근하기:
Back4app 대시보드에 로그인하고 설정에서 AI 어시스턴트를 찾습니다.
데이터 모델 상세 설명하기:
필요한 클래스와 필드에 대한 포괄적인 설명을 입력합니다.
검토 및 적용하기:
어시스턴트가 클래스 정의를 제안합니다. 이 설정을 확인하고 적용합니다.
예시 프롬프트
Text
Create the following classes in my Back4app app:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-set)
  - updated_at: Date (auto-update)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-set)
  - updated_at: Date (auto-update)
Create the following classes in my Back4app app:

1) Class: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-set)
  - updated_at: Date (auto-update)

2) Class: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-set)
  - updated_at: Date (auto-update)
﻿
AI 어시스턴트를 사용하면 설정이 간소화되어 일관성과 효율성을 보장합니다.
﻿
3단계 – 관리자 인터페이스 및 CRUD 기능 활성화
관리자 인터페이스 소개
Back4app 관리자 인터페이스는 강력한 노코드 도구로, 백엔드를 관리하기 위한 드래그 앤 드롭 경험을 제공합니다. CRUD 작업을 손쉽게 실행할 수 있습니다.
관리자 인터페이스 활성화
“더보기” 섹션으로 이동 당신의 Back4app 대시보드에서.
“관리자 앱” 클릭 그리고 “관리자 앱 활성화.”
초기 관리자 사용자 생성으로 관리자 계정을 설정하세요. 이 과정은 자동으로 역할과 필수 시스템 클래스를 구성합니다.
관리자 앱 활성화
﻿
활성화 후, 데이터 관리를 위해 관리자 인터페이스에 로그인하세요.
관리자 앱 대시보드
﻿
관리자 인터페이스를 통한 CRUD 수행
관리자 인터페이스 내에서 다음을 수행할 수 있습니다:
항목 생성: 클래스 내에서 “레코드 추가” 옵션을 사용하여 새 데이터를 삽입합니다.
항목 읽기/수정: 레코드를 클릭하여 세부 정보를 보거나 업데이트합니다.
항목 제거: 삭제 기능을 사용하여 원하지 않는 레코드를 삭제합니다.
이 인터페이스는 모든 CRUD 작업을 단순화하여 사용성을 크게 향상시킵니다.
﻿
4단계 – Inferno.js와 Back4app 연결하기
관리자 인터페이스를 통해 백엔드를 구성했으므로 이제 Inferno.js 프론트엔드를 통합할 시간입니다.
옵션 A: Parse SDK 활용하기
Parse SDK 설치하기:
Bash
npm install parse
npm install parse
﻿
Inferno 앱에서 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;
﻿
Inferno 컴포넌트에서 Parse 구현하기:
예를 들어, 항목을 검색하고 나열하는 컴포넌트를 만드세요:
JS
// src/components/ItemsList.js
import { Component } from 'inferno';
import Parse from '../parseConfig';

class ItemsList extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [] };
  }

  componentDidMount() {
    this.loadItems();
  }

  async loadItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.setState({ items: results });
    } catch (err) {
      console.error("항목 로드 중 오류:", err);
    }
  }

  render() {
    return (
      <div>
        <h2>항목</h2>
        <ul>
          {this.state.items.map(item => (
            <li key={item.id}>
              {item.get("title")} — {item.get("description")}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ItemsList;
// src/components/ItemsList.js
import { Component } from 'inferno';
import Parse from '../parseConfig';

class ItemsList extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [] };
  }

  componentDidMount() {
    this.loadItems();
  }

  async loadItems() {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      this.setState({ items: results });
    } catch (err) {
      console.error("항목 로드 중 오류:", err);
    }
  }

  render() {
    return (
      <div>
        <h2>항목</h2>
        <ul>
          {this.state.items.map(item => (
            <li key={item.id}>
              {item.get("title")} — {item.get("description")}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ItemsList;
﻿
옵션 B: REST 또는 GraphQL API 사용하기
Parse SDK가 귀하의 시나리오에 적합하지 않은 경우, REST 또는 GraphQL을 통해 CRUD 작업을 실행할 수 있습니다. 예를 들어, REST를 사용하여 항목을 검색하는 방법은 다음과 같습니다:
JS
// REST API call to retrieve 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 (err) {
    console.error('Error fetching items:', err);
  }
};
fetchItems();
// REST API call to retrieve 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 (err) {
    console.error('Error fetching items:', err);
  }
};
fetchItems();
﻿
필요에 따라 Inferno 구성 요소 내에 이러한 API 호출을 포함하세요.
﻿
5단계 – 백엔드 강화하기
액세스 제어 목록(ACL) 구현하기
ACL을 할당하여 데이터 보안을 보장하세요. 예를 들어, 개인 항목을 생성하는 방법은 다음과 같습니다:
JS
async function createPrivateItem(itemData, owner) {
  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(owner);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (err) {
    console.error('Error creating item:', err);
  }
}
async function createPrivateItem(itemData, owner) {
  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(owner);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (err) {
    console.error('Error creating item:', err);
  }
}
﻿
클래스 수준 권한(CLP) 구성하기
Back4app 대시보드 내에서 각 클래스의 CLP를 조정하여 기본 액세스 정책을 시행하고, 권한이 있는 사용자만 민감한 데이터와 상호작용할 수 있도록 하세요.
﻿
6단계 – 사용자 인증 관리하기
사용자 계정 설정하기
Back4app은 인증 처리를 위해 사용자 클래스를(Parse를 통해) 사용합니다. 귀하의 Inferno.js 앱에서 아래와 같이 등록 및 로그인 기능을 구현하세요:
JS
// src/components/Auth.js
import { Component } from 'inferno';
import Parse from '../parseConfig';

export class SignUp extends Component {
  constructor(props) {
    super(props);
    this.state = { username: '', password: '', email: '' };
  }

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

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

  render() {
    return (
      <form onSubmit={this.handleSignUp}>
        <input
          type="text"
          placeholder="Username"
          value={this.state.username}
          onInput={e => this.setState({ username: e.target.value })}
        />
        <input
          type="password"
          placeholder="Password"
          value={this.state.password}
          onInput={e => this.setState({ password: e.target.value })}
        />
        <input
          type="email"
          placeholder="Email"
          value={this.state.email}
          onInput={e => this.setState({ email: e.target.value })}
        />
        <button type="submit">Sign Up</button>
      </form>
    );
  }
}
// src/components/Auth.js
import { Component } from 'inferno';
import Parse from '../parseConfig';

export class SignUp extends Component {
  constructor(props) {
    super(props);
    this.state = { username: '', password: '', email: '' };
  }

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

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

  render() {
    return (
      <form onSubmit={this.handleSignUp}>
        <input
          type="text"
          placeholder="Username"
          value={this.state.username}
          onInput={e => this.setState({ username: e.target.value })}
        />
        <input
          type="password"
          placeholder="Password"
          value={this.state.password}
          onInput={e => this.setState({ password: e.target.value })}
        />
        <input
          type="email"
          placeholder="Email"
          value={this.state.email}
          onInput={e => this.setState({ email: e.target.value })}
        />
        <button type="submit">Sign Up</button>
      </form>
    );
  }
}
﻿
로그인 및 세션 관리에 대해서도 유사한 전략이 적용됩니다. 소셜 인증, 이메일 확인 및 비밀번호 복구와 같은 추가 기능은 Back4app 대시보드에서 설정할 수 있습니다.
﻿
7단계 – Inferno.js 프론트엔드 배포
Back4app의 웹 배포 옵션을 사용하면 GitHub 리포지토리를 연결하여 Inferno.js 프론트엔드를 손쉽게 호스팅할 수 있습니다.
7.1 프로덕션 빌드
터미널에서 프로젝트 디렉토리를 엽니다.
프로덕션 빌드 명령을 실행합니다:
Bash
npm run build
npm run build
﻿
이 명령은 애플리케이션을 최적화된 정적 자산을 포함하는 build 폴더로 컴파일합니다.
빌드 확인:
 build 폴더에 index.html 파일과 기타 자산 폴더가 포함되어 있는지 확인합니다.
﻿
7.2 코드 정리 및 업로드
귀하의 저장소에는 Inferno.js 프론트엔드의 전체 소스가 포함되어야 합니다. 예시 디렉토리 구조:
Text
Basic-CRUD-App-InfernoJS-Frontend/
|-- node_modules/
|-- public/
|   `-- index.html
|-- src/
|   |-- App.js
|   |-- parseConfig.js
|   `-- components/
|       |-- ItemsList.js
|       `-- Auth.js
|-- package.json
`-- README.md
Basic-CRUD-App-InfernoJS-Frontend/
|-- node_modules/
|-- public/
|   `-- index.html
|-- src/
|   |-- App.js
|   |-- parseConfig.js
|   `-- components/
|       |-- ItemsList.js
|       `-- Auth.js
|-- package.json
`-- README.md
﻿
샘플 파일
src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';
// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Insert your Back4app credentials here
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
src/App.js
JS
// src/App.js
import { Component } from 'inferno';
import Parse from './parseConfig';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      newTitle: "",
      newDescription: "",
      editId: null,
      editTitle: "",
      editDescription: ""
    };
  }

  componentDidMount() {
    this.loadItems();
  }

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

  handleAdd = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", this.state.newTitle);
    item.set("description", this.state.newDescription);
    try {
      await item.save();
      this.setState({ newTitle: "", newDescription: "" });
      this.loadItems();
    } catch (err) {
      console.error("Error adding item:", err);
    }
  }

  handleDelete = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      this.loadItems();
    } catch (err) {
      console.error("Error deleting item:", err);
    }
  }

  startEdit = (item) => {
    this.setState({
      editId: item.id,
      editTitle: item.get("title"),
      editDescription: item.get("description")
    });
  }

  handleUpdate = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = this.state.editId;
      item.set("title", this.state.editTitle);
      item.set("description", this.state.editDescription);
      await item.save();
      this.setState({ editId: null, editTitle: "", editDescription: "" });
      this.loadItems();
    } catch (err) {
      console.error("Error updating item:", err);
    }
  }

  render() {
    return (
      <div style={{ padding: '2rem' }}>
        <h1>Items</h1>
        <div style={{ marginBottom: '1rem' }}>
          <h2>Add New Item</h2>
          <input
            type="text"
            placeholder="Title"
            value={this.state.newTitle}
            onInput={e => this.setState({ newTitle: e.target.value })}
            style={{ marginRight: '0.5rem' }}
          />
          <input
            type="text"
            placeholder="Description"
            value={this.state.newDescription}
            onInput={e => this.setState({ newDescription: e.target.value })}
            style={{ marginRight: '0.5rem' }}
          />
          <button onClick={this.handleAdd}>Add Item</button>
        </div>
        <h2>Items List</h2>
        <ul>
          {this.state.items.map(item => (
            <li key={item.id} style={{ marginBottom: '1rem' }}>
              {this.state.editId === item.id ? (
                <div>
                  <input
                    type="text"
                    value={this.state.editTitle}
                    onInput={e => this.setState({ editTitle: e.target.value })}
                    style={{ marginRight: '0.5rem' }}
                  />
                  <input
                    type="text"
                    value={this.state.editDescription}
                    onInput={e => this.setState({ editDescription: e.target.value })}
                    style={{ marginRight: '0.5rem' }}
                  />
                  <button onClick={this.handleUpdate}>Save</button>
                  <button onClick={() => this.setState({ editId: null })} style={{ marginLeft: '0.5rem' }}>
                    Cancel
                  </button>
                </div>
              ) : (
                <div>
                  <strong>{item.get("title")}</strong> - {item.get("description")}
                  <button onClick={() => this.startEdit(item)} style={{ marginLeft: '1rem' }}>
                    Edit
                  </button>
                  <button onClick={() => this.handleDelete(item.id)} style={{ marginLeft: '0.5rem' }}>
                    Delete
                  </button>
                </div>
              )}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;
// src/App.js
import { Component } from 'inferno';
import Parse from './parseConfig';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      newTitle: "",
      newDescription: "",
      editId: null,
      editTitle: "",
      editDescription: ""
    };
  }

  componentDidMount() {
    this.loadItems();
  }

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

  handleAdd = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", this.state.newTitle);
    item.set("description", this.state.newDescription);
    try {
      await item.save();
      this.setState({ newTitle: "", newDescription: "" });
      this.loadItems();
    } catch (err) {
      console.error("Error adding item:", err);
    }
  }

  handleDelete = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      this.loadItems();
    } catch (err) {
      console.error("Error deleting item:", err);
    }
  }

  startEdit = (item) => {
    this.setState({
      editId: item.id,
      editTitle: item.get("title"),
      editDescription: item.get("description")
    });
  }

  handleUpdate = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = this.state.editId;
      item.set("title", this.state.editTitle);
      item.set("description", this.state.editDescription);
      await item.save();
      this.setState({ editId: null, editTitle: "", editDescription: "" });
      this.loadItems();
    } catch (err) {
      console.error("Error updating item:", err);
    }
  }

  render() {
    return (
      <div style={{ padding: '2rem' }}>
        <h1>Items</h1>
        <div style={{ marginBottom: '1rem' }}>
          <h2>Add New Item</h2>
          <input
            type="text"
            placeholder="Title"
            value={this.state.newTitle}
            onInput={e => this.setState({ newTitle: e.target.value })}
            style={{ marginRight: '0.5rem' }}
          />
          <input
            type="text"
            placeholder="Description"
            value={this.state.newDescription}
            onInput={e => this.setState({ newDescription: e.target.value })}
            style={{ marginRight: '0.5rem' }}
          />
          <button onClick={this.handleAdd}>Add Item</button>
        </div>
        <h2>Items List</h2>
        <ul>
          {this.state.items.map(item => (
            <li key={item.id} style={{ marginBottom: '1rem' }}>
              {this.state.editId === item.id ? (
                <div>
                  <input
                    type="text"
                    value={this.state.editTitle}
                    onInput={e => this.setState({ editTitle: e.target.value })}
                    style={{ marginRight: '0.5rem' }}
                  />
                  <input
                    type="text"
                    value={this.state.editDescription}
                    onInput={e => this.setState({ editDescription: e.target.value })}
                    style={{ marginRight: '0.5rem' }}
                  />
                  <button onClick={this.handleUpdate}>Save</button>
                  <button onClick={() => this.setState({ editId: null })} style={{ marginLeft: '0.5rem' }}>
                    Cancel
                  </button>
                </div>
              ) : (
                <div>
                  <strong>{item.get("title")}</strong> - {item.get("description")}
                  <button onClick={() => this.startEdit(item)} style={{ marginLeft: '1rem' }}>
                    Edit
                  </button>
                  <button onClick={() => this.handleDelete(item.id)} style={{ marginLeft: '0.5rem' }}>
                    Delete
                  </button>
                </div>
              )}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;
﻿
코드를 GitHub에 푸시하기
Git 초기화 프로젝트 폴더에서:
Bash
git init
git init
﻿
파일 스테이징:
Bash
git add .
git add .
﻿
변경 사항 커밋:
Bash
git commit -m "Inferno.js 프론트엔드 초기 커밋"
git commit -m "Inferno.js 프론트엔드 초기 커밋"
﻿
GitHub 리포지토리 생성:
이름을 Basic-CRUD-App-InfernoJS-Frontend으로 설정하세요.
프로젝트 푸시:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-InfernoJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-InfernoJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 GitHub와 Back4app 웹 배포 연결하기
웹 배포로 이동하기:
Back4app에 로그인하고, 프로젝트(Basic-CRUD-App-InfernoJS)를 선택한 후 웹 배포 기능을 클릭합니다.
GitHub와 통합하기:
프롬프트에 따라 GitHub 계정을 연결하여 Back4app이 귀하의 리포지토리에 접근할 수 있도록 합니다.
리포지토리 및 브랜치 선택하기:
리포지토리(예: Basic-CRUD-App-InfernoJS-Frontend)와 코드가 포함된 브랜치(일반적으로 main)를 선택합니다.
﻿
7.4 배포 설정
추가 구성을 입력하세요:
빌드 명령어:
리포지토리에 미리 빌드된 build 폴더가 없으면 npm run build와 같은 명령어를 지정하세요. Back4app은 배포 중에 이를 실행합니다.
출력 폴더:
출력을 build로 설정하여 Back4app이 정적 파일이 어디에 있는지 알 수 있도록 하세요.
환경 변수:
구성 설정 내에 필요한 변수를 추가하세요 (예: API 키).
﻿
7.5 애플리케이션 도커화
컨테이너화를 선택하면, 다음과 유사한 Dockerfile을 리포지토리에 포함하세요:
Dockerfile
# Use an official Node image for the build stage
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 files 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 an official Node image for the build stage
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 files 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이 코드를 가져오고, 프로젝트를 빌드하며, 컨테이너에 배포합니다.
앱에 접근하기:
배포 후 Back4app은 Inferno.js 앱이 실시간으로 실행되는 URL을 제공합니다.
﻿
7.7 배포 확인하기
제공된 URL 방문하기:
브라우저에서 URL을 엽니다.
기능 테스트:
앱이 로드되고, 모든 경로가 올바르게 작동하며, 자산(CSS, JS, 이미지)이 예상대로 표시되는지 확인하십시오.
문제 해결:
개발자 도구를 사용하여 오류를 검사합니다. 문제가 발생하면 Back4app 로그를 확인하고 GitHub 설정을 검증하십시오.
﻿
8단계 – 마무리 및 향후 방향
축하합니다! Inferno.js와 Back4app으로 완전한 CRUD 애플리케이션을 만들었습니다. 
프로젝트를 설정했습니다 Basic-CRUD-App-InfernoJS, 데이터 클래스를 설계하고 직관적인 관리 인터페이스를 사용하여 데이터 관리를 했습니다. 이제 프론트엔드는 강력한 접근 제어로 연결되고 안전하게 보호됩니다.
다음 단계:
UI 개선:
상세 보기, 검색 기능 및 실시간 알림으로 Inferno.js 앱을 확장하세요.
기능 추가:
추가 백엔드 기능(예: 클라우드 코드) 구현, 타사 API 통합 또는 역할 기반 접근 도입을 고려하세요.
더 탐색하기:
Back4app 문서 및 성능 조정과 사용자 정의 통합을 위한 추가 튜토리얼을 살펴보세요.
코딩을 즐기고 향후 프로젝트에 행운이 있기를 바랍니다!
필드	유형	세부사항
_id	객체 ID	자동 생성된 기본 키.
제목	문자열	항목의 제목.
설명	문자열	항목에 대한 간단한 설명.
생성일	날짜	항목이 생성된 시간을 표시하는 타임스탬프.
업데이트됨	날짜	가장 최근 업데이트의 타임스탬프.
필드	유형	세부사항
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	안전한 인증을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Build a Basic CRUD App with Riot.js: A Step-by-Step Guide
Building a Basic CRUD Application with Mithril.js: A Detailed Tutorial