Ember.js에서 반응형 디자인을 구현하는 주요한 기능은 computed property와 observer입니다. 이들은 화면에서 데이터의 변화를 감지하고, 해당 변화에 맞게 UI를 업데이트할 수 있도록 도와줍니다.

우선, computed property를 사용하여 데이터 속성을 정의할 수 있습니다. 이 속성은 다른 속성에 의존하며, 해당 의존성이 변경될 때마다 자동으로 계산됩니다. 이를 통해 UI를 최신 데이터로 유지할 수 있습니다. 예를 들어, 다음과 같이 name과 age 속성이 변경될 때마다 greeting 속성을 업데이트하는 computed property를 정의할 수 있습니다.

import Ember from 'ember';

export default Ember.Object.extend({
  name: '',
  age: 0,

  greeting: Ember.computed('name', 'age', function() {
    const name = this.get('name');
    const age = this.get('age');

    return `안녕하세요! 저는 ${name}이고, ${age}살입니다.`;
  })
});

또한 observer를 사용하여 데이터의 변화를 감지하고, 변화에 반응하는 로직을 추가할 수 있습니다. 예를 들어, 위의 예제에서 age 속성의 변경을 감지하고, 18살 이상일 경우에는 특정 동작을 수행하는 observer를 추가해보겠습니다.

import Ember from 'ember';

export default Ember.Object.extend({
  // 이전 코드 생략
  
  ageChanged: Ember.observer('age', function() {
    const age = this.get('age');
    
    if (age >= 18) {
      // 특정 동작 수행
    }
  })
});

이렇게 Ember.js에서는 computed property와 observer를 활용하여 반응형 디자인을 구현할 수 있습니다. 이러한 기능을 통해 Ember.js 애플리케이션을 구축하는 동안 사용자 인터페이스와 데이터 간의 강력한 연결을 유지할 수 있습니다. 자세한 내용은 Ember.js 공식 문서에서 확인할 수 있습니다.