Ember -Tutorial (Service & Form input)

Service

엠버의 서비스는 애플리케이션이 동작하는 동안 유지되는 숫자 개체이며 애플리케이션의 다른부분에서 사용할 수 있다.
번역 본이라 조금 이상한데 여러개의 컴포넌트에서 service1을 사용할 수 있다는 뜻.

예시로 로그인이라는 서비스를 통해 로그인 페이지에서 로그인 서비스로 로그인을 보낸뒤 사용자 페이지에서 받을 수 있도록 할 수 있다.
개념적으로만 보면 전역 상태가 생각되는데 한번 사용 예시를 봐봐야 겠다

먼저 service를 만드려면 동일하게 emberCLI로 만드는데

ember g service shopping-cart

 

이러면 app/services/shopping-cart.js 파일이 하나 만들어 진다

// app/services/shopping-cart.js

import Service from '@ember/service'

export default class ShoppingCartService extends Service {
  itemList = [
  {name: '1'},
  {name: '2'}
 ]
}

 

일단 shopping-cart라는 service에 itemList라는 더미 데이터를 만들어 놓는다.
이후 controllers/cart.js로 가서 서비스를 주입한다

현재 보고 있는 ember tutorial은 2022 영상이지만 현재 2024 docs에선 변경점이 있다
service를 import할 때 2022 영상에선 import {inject as service} from '@ember/service'처럼 사용하는 걸 볼 수 있는데

 

inject를 as를 통해 변경해서 사용한다.

하지만 최근 docs를 보면 업데이트 되었는지 component에서 사용할 때 import {service} from '@ember/service'로 사용되고 있다.

여기까지 import에 대한 얘기이고 사용에 관해서는 데커레이터를 사용하면 된다

// controllers/cart.js

export default class CartController extends Controller {
  @service shoppingCart;

  //...somecode
}

 

그리고 shopping-cart에서 선언한 더미데이터를 쓰기 위해 template으로 가서

//...some code

{{#each this.shoppingCart.itemList as |item|}}
  //...some code
{{/each}}
///...some code

 

이렇게 사용하면 된다.

만약 service를 사용할 때 파일 이름이 아닌 현재 컨트롤러 안에서 내가 이름을 재정의 하고 싶다면 service 데커레이터 사용하는 부분을 @service shoppingCart 에서 @service('shopping-cart') cart; 로 변경 해주면 된다.

이는 함수 부분도 service class 내에서 선언한뒤 사용부분에서 데커레이터를 통해 가져오고 똑같이 사용하면 된다.

Form Input

우리가 하나의 input창을 가지고 있고 이걸 변경하고 싶다.

예시로 장바구니에 상품이 있고 상품 개수를 수동으로 조절할 수 있는 input이 있는데 작성해보자

<!-- cart.hbs -->
{{#each this.shoppingCart.itemList as |item|}}
  <input type="number" value={{item.count}} {{on "input" (fn this.updateItemCount item)}}/>
{{/each}}

 

이후 controllers/cart로 이동해서 @action하나를 추가한다.

//controllers/cart.js

//...some code
@action
updateItemCount(item, event) {
  const count = event.target.value;
  item.count = count;
}

 

여기서 전달되는 item은 input에서 보내는 item이며 2번째 매개변수인 event는 말그대로 이벤트이다.
따라서 js 기본적으로 실제 값 얻는 방식을 그대로 사용하면편한데 event.target.value 사용하면 된다.
이후 전달받은 item의 count를 현재입력된count로 변경하면 된다.

이때 주의할 점으론 tracked되고 있는 놈은 itemList로 ember는 itmeList 내부의 count가 변경 되었는지 확인할 수 없다.
따라서 itemList에 들어갈 item을 하나의 class로 만들고 거기서 count를 @tracked를 사용해 트랙킹 하고 이를 itemList에 들어갈 item들을 모두 new Item을 통해 각각의 item의 count가 추적되고 있다면 값의 변함을 트랙킹하고 이를 실제로 웹에 반영한다.
이를 통해 총 합을 구하는 부분에서도 연관된 부분이 @tracked되어 같이 업데이트 되기 때문에 잘 고려해서 만들어보자

 

우리가 주의할 점은 updateItemCount를 사용하는 부분에서 우리는 인자로 item 하나만 넘겼는데 class에서는 event 매개변수가 추가로 있다.
이를 통해 on도우미를 사용하고 이벤트를 호출하는 경우 기본인수로 event가 전달된다.