Ember.js로 CRUD 애플리케이션 만들기?

35min
소개
이 안내서에서는 Ember.js를 사용하여 간단한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 배웁니다.
우리는 데이터를 손쉽게 관리하기 위해 Back4app을 백엔드 서비스로 사용할 것입니다. 이 가이드는 CRUD 시스템의 모든 기본 작업을 다루며, Back4app 프로젝트를 설정하고, 동적 데이터 모델을 설계하며, CRUD 작업을 Ember.js 애플리케이션에 통합하는 방법을 보여줍니다.
우선, Basic-CRUD-App-Ember라는 이름의 Back4app 프로젝트를 설정하여 애플리케이션에 신뢰할 수 있는 비관계형 데이터 저장 솔루션을 제공합니다. 모델과 필드를 수동으로 설정하거나 Back4app의 AI 에이전트를 통해 데이터 구조를 정의합니다.
다음으로, 데이터를 간단한 드래그 앤 드롭 상호작용으로 관리할 수 있는 코드 없는 인터페이스인 Back4app 관리 앱을 탐색합니다. 마지막으로, API 호출을 통해 Ember.js 애플리케이션을 Back4app과 통합하고, 그 과정에서 안전한 접근 제어를 구현합니다.
이 튜토리얼이 끝나면, 안전한 사용자 인증 및 효과적인 데이터 관리를 포함하여 모든 CRUD 작업을 수행할 수 있는 프로덕션 준비가 완료된 Ember.js 애플리케이션을 갖게 됩니다.
주요 요점
강력한 백엔드 플랫폼을 기반으로 한 Ember.js 기반 CRUD 애플리케이션을 구축합니다.
Ember.js 프론트 엔드와 확장 가능한 백엔드를 구조화하고 통합하는 방법을 이해합니다.
Back4app의 직관적인 관리 앱을 사용하여 생성, 읽기, 업데이트 및 삭제 작업을 손쉽게 수행합니다.
원활한 애플리케이션 배포를 위한 Docker 컨테이너화 등 배포 전략에 대해 배웁니다.
﻿
전제 조건
시작하기 전에 다음 사항을 확인하십시오:
새로 생성된 프로젝트가 있는 Back4app 계정입니다.
도움이 필요하신가요? Back4app 시작하기를 방문하세요.
Ember.js 개발 환경입니다.
Ember CLI를 설치하고 Ember.js 가이드를 따라 환경을 설정하세요.
Ember.js, JavaScript 및 REST API에 대한 기본적인 이해입니다.
필요한 경우 이 주제를 복습하세요.
﻿
1단계 – 프로젝트 설정
새로운 Back4app 프로젝트 시작하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요. 
프로젝트 이름을 지정하세요: Basic-CRUD-App-Ember 및 후속 프롬프트에 따라 프로젝트 설정을 완료하세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 대시보드에 나타나고 백엔드 구성의 기초가 됩니다.
﻿
2단계 – 데이터 모델 설계
데이터 모델 구조화
이 CRUD 애플리케이션을 위해 Back4app 프로젝트에서 여러 모델을 정의할 것입니다. 아래는 CRUD 작업을 수행하는 데 필요한 핵심 모델과 필드를 설명하는 예시입니다.
1. 항목 모델
이 모델은 각 항목에 대한 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
항목이 추가된 시간을 표시하는 타임스탬프.
업데이트됨
날짜
마지막 업데이트를 표시하는 타임스탬프.
2. 사용자 모델
이 모델은 사용자 인증 및 자격 증명을 처리합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유한 사용자 이름.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호 해시
문자열
암호화된 사용자 비밀번호.
생성일
날짜
계정이 생성된 시간.
업데이트됨
날짜
계정이 업데이트된 타임스탬프.
이 모델을 생성하고 Back4app 대시보드 내에서 필드를 정의할 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 필드 이름을 입력하고, 기본값을 설정하고, 필수 여부를 표시하여 필드를 추가할 수 있습니다.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 귀하의 사양에 따라 데이터 스키마를 자동으로 구성할 수 있는 대시보드 내의 지능형 기능입니다. 이 도구는 CRUD 작업에 최적화된 데이터 모델을 보장하여 프로젝트 초기화를 간소화합니다.
AI 에이전트 사용 방법:
AI 에이전트 열기:
Back4app 대시보드에 로그인하고 프로젝트 설정에서 AI 에이전트를 찾습니다.
모델 세부정보 제공:
필요한 모델과 필드에 대한 자세한 설명을 제출합니다.
검토 및 확인:
AI 에이전트가 제안된 스키마를 생성합니다. 세부정보를 확인하여 구성을 적용합니다.
샘플 프롬프트
Text
Create the following models in my Back4app project:

1) Model: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Model: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following models in my Back4app project:

1) Model: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Model: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
이 AI 지원 접근 방식은 시간을 절약하고 데이터 구조가 일관되고 최적화되도록 보장합니다.
﻿
3단계 – 관리 앱 활성화 및 CRUD 작업 처리
관리 앱 개요
Back4app 관리 앱은 백엔드 데이터를 관리하기 위한 사용자 친화적인 코드 없는 플랫폼을 제공합니다. 드래그 앤 드롭 인터페이스를 통해 레코드를 추가, 보기, 업데이트 및 제거하는 CRUD 작업을 쉽게 수행할 수 있습니다.
관리 앱 활성화
“더보기” 메뉴로 이동 Back4app 대시보드에서.
“관리 앱” 선택을 클릭하고 “관리 앱 활성화.”
관리 자격 증명 구성 초기 관리 계정을 생성하여. 이렇게 하면 역할(예: B4aAdminUser) 및 시스템 모델이 설정됩니다.
관리 앱 활성화
﻿
활성화되면 관리 앱에 로그인하여 애플리케이션의 데이터를 관리합니다.
관리 앱 대시보드
﻿
관리 앱을 통한 CRUD 작업 관리
관리 앱 내에서 다음을 수행할 수 있습니다:
레코드 삽입: 모델 내에서 “레코드 추가” 버튼을 클릭하여 새 데이터를 입력합니다.
레코드 검사/수정: 세부 정보를 보거나 필드를 편집하려면 레코드를 선택합니다.
레코드 삭제: 더 이상 필요하지 않은 항목을 제거합니다.
이 간소화된 인터페이스는 데이터 관리의 효율성을 크게 향상시킵니다.
﻿
4단계 – Ember.js 애플리케이션을 Back4app과 연결하기
백엔드가 구성되었으므로 Ember.js 애플리케이션을 Back4app에 연결할 시간입니다.
Ember.js에서 API 호출 사용하기
Ember.js는 데이터 작업을 처리하기 위해 Ember Data를 활용합니다. 이 튜토리얼에서는 REST 어댑터를 사용하여 Back4app 백엔드와 상호작용합니다.
1. REST 어댑터 구성하기
다음 구성을 사용하여 애플리케이션의 어댑터를 생성하거나 업데이트합니다 (예: app/adapters/application.js):
JS
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  host = 'https://parseapi.back4app.com';

  headers = {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  };
}
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  host = 'https://parseapi.back4app.com';

  headers = {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  };
}
﻿
2. Ember Data 모델 정의하기
다음과 같이 item에 대한 Ember 모델을 생성합니다 (예: app/models/item.js):
JS
import Model, { attr } from '@ember-data/model';

export default class ItemModel extends Model {
  @attr('string') title;
  @attr('string') description;
  @attr('date') createdAt;
  @attr('date') updatedAt;
}
import Model, { attr } from '@ember-data/model';

export default class ItemModel extends Model {
  @attr('string') title;
  @attr('string') description;
  @attr('date') createdAt;
  @attr('date') updatedAt;
}
﻿
그리고 user에 대해서도 비슷하게 (예: app/models/user.js):
JS
import Model, { attr } from '@ember-data/model';

export default class UserModel extends Model {
  @attr('string') username;
  @attr('string') email;
  @attr('string') passwordHash;
  @attr('date') createdAt;
  @attr('date') updatedAt;
}
import Model, { attr } from '@ember-data/model';

export default class UserModel extends Model {
  @attr('string') username;
  @attr('string') email;
  @attr('string') passwordHash;
  @attr('date') createdAt;
  @attr('date') updatedAt;
}
﻿
3. CRUD 작업 구현하기
Ember Data의 스토어 서비스를 사용하여 CRUD 작업을 수행합니다. 예를 들어, 모든 항목을 가져오려면 다음과 같은 경로를 생성할 수 있습니다:
JS
import Route from '@ember/routing/route';

export default class ItemsRoute extends Route {
  model() {
    return this.store.findAll('item');
  }
}
import Route from '@ember/routing/route';

export default class ItemsRoute extends Route {
  model() {
    return this.store.findAll('item');
  }
}
﻿
Ember Data의 API 메서드를 사용하여 레코드를 추가, 업데이트 또는 삭제할 수도 있습니다.
대안: API 호출을 위한 네이티브 Fetch 사용하기
Ember Data를 사용하지 않으려면 네이티브 fetch 호출을 활용할 수 있습니다. 예를 들어, 항목을 검색하려면:
JS
async function fetchItems() {
  try {
    let response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    let data = await response.json();
    console.log('Fetched Items:', data);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}
async function fetchItems() {
  try {
    let response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    let data = await response.json();
    console.log('Fetched Items:', data);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}
﻿
필요에 따라 이러한 API 호출을 Ember 구성 요소 또는 서비스에 통합하세요.
﻿
5단계 – 백엔드 보안 강화
접근 제어 구현하기
각 객체에 대한 접근 제어 목록(ACL)을 구성하여 데이터를 보호하세요. 예를 들어, 소유자에게만 보이도록 설정해야 하는 항목을 생성할 때, API 호출을 통해 ACL 설정을 조정할 수 있습니다.
클래스 수준 권한(CLPs)
Back4app 대시보드 내에서 CLP를 설정하여 인증된 사용자만 특정 모델에 접근할 수 있도록 하세요. 이는 기본 접근 규칙을 시행하여 추가적인 보안 계층을 제공합니다.
﻿
6단계 – Ember.js에서 사용자 인증 구현하기
사용자 계정 설정하기
Back4app은 인증 처리를 위해 Parse 사용자 모델을 활용합니다. Ember.js 애플리케이션에서 API 호출을 통해 사용자 가입 및 로그인을 관리하는 서비스를 생성할 수 있습니다.
예를 들어, 인증 서비스(app/services/auth.js)를 생성합니다:
JS
import Service from '@ember/service';

export default class AuthService extends Service {
  async register(username, password, email) {
    try {
      let 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 })
      });
      let result = await response.json();
      console.log('User registered successfully:', result);
    } catch (error) {
      console.error('Registration error:', error);
    }
  }

  async login(username, password) {
    try {
      let response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
        method: 'GET',
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      let result = await response.json();
      console.log('User logged in:', result);
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
import Service from '@ember/service';

export default class AuthService extends Service {
  async register(username, password, email) {
    try {
      let 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 })
      });
      let result = await response.json();
      console.log('User registered successfully:', result);
    } catch (error) {
      console.error('Registration error:', error);
    }
  }

  async login(username, password) {
    try {
      let response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
        method: 'GET',
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      let result = await response.json();
      console.log('User logged in:', result);
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
﻿
이 서비스는 세션 관리, 비밀번호 재설정 및 기타 인증 관련 작업을 처리하기 위해 라우트나 컴포넌트에 주입될 수 있습니다.
﻿
7단계 – Ember.js 애플리케이션 배포
Back4app은 다양한 배포 전략을 지원합니다. Docker 컨테이너화와 같은 방법을 사용하여 Ember.js 애플리케이션을 배포할 수 있습니다.
7.1 엠버 애플리케이션 구축하기
애플리케이션 구축하기:
터미널에서 다음 명령어를 실행하세요:
Bash
ember build --environment=production
ember build --environment=production
﻿
출력 확인하기:
dist/ 폴더에 프로덕션 준비가 완료된 자산이 포함되어 있는지 확인하세요.
﻿
7.2 프로젝트 구조 개요
전형적인 Ember.js 프로젝트는 다음과 같이 구성될 수 있습니다:
Text
Basic-CRUD-App-Ember/
|-- app/
|   |-- adapters/
|   |   |-- application.js
|   |-- models/
|   |   |-- item.js
|   |   |-- user.js
|   |-- routes/
|   |   |-- items.js
|   |-- services/
|       |-- auth.js
|-- config/
|   |-- environment.js
|-- public/
|-- tests/
|-- ember-cli-build.js
|-- package.json
|-- README.md
Basic-CRUD-App-Ember/
|-- app/
|   |-- adapters/
|   |   |-- application.js
|   |-- models/
|   |   |-- item.js
|   |   |-- user.js
|   |-- routes/
|   |   |-- items.js
|   |-- services/
|       |-- auth.js
|-- config/
|   |-- environment.js
|-- public/
|-- tests/
|-- ember-cli-build.js
|-- package.json
|-- README.md
﻿
7.3 엠버 애플리케이션 도커화하기
컨테이너화된 배포를 선호하는 경우, 프로젝트 루트에 Dockerfile을 포함하세요:
Dockerfile
# Use an official Node.js image as the base
FROM node:16-alpine

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Build the Ember application
RUN npm run build -- --environment=production

# Use a lightweight web server to serve static files
FROM nginx:stable-alpine
COPY --from=0 /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
# Use an official Node.js image as the base
FROM node:16-alpine

# Set the working directory
WORKDIR /app

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

# Copy the rest of the application code
COPY . .

# Build the Ember application
RUN npm run build -- --environment=production

# Use a lightweight web server to serve static files
FROM nginx:stable-alpine
COPY --from=0 /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
﻿
7.4 Back4app 웹 배포를 통한 배포
GitHub 리포지토리 연결하기:
GitHub에 엠버.js 프로젝트를 호스팅하세요.
배포 설정 구성하기:
Back4app 대시보드에서 웹 배포, 리포지토리(예: Basic-CRUD-App-Ember)를 연결하고 원하는 브랜치를 선택하세요.
빌드 명령 설정하기:
빌드 명령을 정의하세요(예: ember build --environment=production) 및 출력 디렉토리를 지정하세요.
앱 배포하기:
배포를 클릭하고 앱이 라이브될 때까지 로그를 모니터링하세요.
﻿
8단계 – 결론 및 다음 단계
잘했어요! 이제 Back4app과 통합된 Ember.js 기반 CRUD 애플리케이션을 구축했습니다.
이 튜토리얼에서는 Basic-CRUD-App-Ember이라는 프로젝트를 설정하고, 아이템과 사용자에 대한 모델을 설계하며, Back4app 관리 앱을 통해 백엔드를 관리했습니다.
또한 API 호출을 사용하여 Ember.js 앱을 연결하고 강력한 보안 관행을 구현했습니다.
다음 단계:
애플리케이션 향상:
고급 검색 기능, 상세 보기 또는 실시간 업데이트와 같은 기능을 추가하는 것을 고려해 보세요.
백엔드 기능 확장:
클라우드 기능을 탐색하거나, 서드파티 API를 통합하거나, 역할 기반 접근 제어를 설정해 보세요.
이해도 심화:
더 많은 고급 주제를 위해 Back4app 문서 및 기타 Ember.js 리소스를 방문하세요.
코딩을 즐기고 Ember.js와 함께하는 여정에 행운이 있기를 바랍니다!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목이 추가된 시간을 표시하는 타임스탬프.
업데이트됨	날짜	마지막 업데이트를 표시하는 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호 해시	문자열	암호화된 사용자 비밀번호.
생성일	날짜	계정이 생성된 시간.
업데이트됨	날짜	계정이 업데이트된 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Develop a CRUD Android Application Using Java?
How to Build a Basic CRUD App with Solid?