Ember.js는 강력한 데이터 검증 기능을 제공하여 데이터의 유효성을 검사하고 처리하는 것을 도와줍니다. 이를 통해 사용자로부터 입력된 데이터가 애플리케이션의 규칙에 부합하는지 확인할 수 있습니다. Ember.js에서 데이터 검증을 구현하는 방법에 대해 알아보겠습니다.

Ember 데이터 모델에서 검증 규칙 정의하기

Ember.js에서는 Ember Data를 사용하여 데이터를 관리합니다. 따라서 데이터 모델에 대한 검증 규칙은 Ember 데이터 모델에서 정의됩니다.

// app/models/user.js

import Model, { attr } from '@ember-data/model';
import { validator, buildValidations } from 'ember-cp-validations';

const Validations = buildValidations({
  username: validator('presence', true),
  email: [
    validator('presence', true),
    validator('format', {type: 'email'})
  ],
  password: [
    validator('presence', true),
    validator('length', { min: 6 })
  ]
});

export default Model.extend(Validations, {
  username: attr('string'),
  email: attr('string'),
  password: attr('string')
});

위의 예제 코드에서는 ember-cp-validations라이브러리를 사용하여 데이터 검증 규칙을 정의하였습니다. 이를 통해 presence(값이 존재하는지 여부), format(포맷을 만족하는지 여부), length(문자열의 길이가 충족되는지 여부) 등의 검증을 수행할 수 있습니다.

Ember 템플릿에서 데이터 검증 결과 표시하기

데이터 검증은 주로 사용자 인터페이스에서 오류 메시지를 보여주는 것을 포함합니다. Ember.js에서는 데이터 검증 결과를 쉽게 템플릿에서 표시할 수 있도록 도와줍니다.

<!-- app/templates/user-form.hbs -->

Username: <br>

  <span class="error"></span><br>


Email: <br>

  <span class="error"></span><br>


Password: <br>

  <span class="error"></span><br>

위의 예제 코드는 데이터 모델에 대해 입력 필드를 제공하고, 검증 오류 메시지를 표시하는 방법을 보여줍니다. model.errors를 사용하여 오류 메시지를 표시할 수 있으며, if 조건문을 사용하여 해당 필드에 오류가 있을 경우에만 메시지를 표시합니다.

Ember 컨트롤러에서 데이터 검증 실행하기

데이터 검증은 주로 데이터가 템플릿에서 제출될 때 실행됩니다. Ember.js에서는 데이터 검증을 컨트롤러에서 실행하고 결과를 처리하는 메서드를 구현하는 것이 일반적입니다.

// app/controllers/user-form.js

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class UserFormController extends Controller {
  @action
  async save() {
    try {
      await this.model.validate();
      await this.model.save();
      this.transitionToRoute('success');
    } catch (error) {
      console.error('Validation failed:', error);
    }
  }
}

위의 예제 코드에서 save 메서드는 데이터 검증을 실행하고, 검증이 성공하면 모델을 저장하고 성공 페이지로 이동합니다. 그러나 검증에 실패한 경우 오류 처리를 위해 try/catch문을 사용합니다.

위의 예제 코드들은 Ember.js에서의 데이터 검증 구현을 소개하기 위한 간단한 예시입니다. Ember.js는 다양한 검증 라이브러리와 함께 사용할 수 있으며, [Ember.js 공식 홈페이지][Ember.js]에서 더 자세한 내용을 확인할 수 있습니다.