IT 회사에서 즐겁게 지내기!

Pipe는 매우 간단하지만 효과적인 기능입니다.

Data를 사용자에게 더 잘 보여주는 것이에요.

사실 프로젝트에서 슬쩍 사용하고 있었습니다.

어떤 것이냐구요?

바로 금액을 표시하던 부분!

Angular Pipes 활용 예시

위에 보면 원표시(￦)가 있죠?

단위를 텍스트로 일일이 표시하기 귀찮습니다.

날짜는 어떻구요.

11월 12일, 2018년 이럼 좋지만.

보통 Date 형식의 Data는 어떻죠?

Mon Sep 12 2018 00:00:00 GMT+0900

못생겼습니다.

이것을 보기 좋게 바꾸는 것도 일이죠.

이럴 때 Angular의 Pipe를 이용합니다.

먼저 사용방법은 아래와 같습니다.

<div class="budget-balance">
  <div class="balance-total">
    <span class="balance-title">Balance</span>
    <span class="balance-amount">
      {{balance | currency:'KRW':'symbol'}}</span>
  </div>
  <div class="division-line"></div>
  <div class="budget-total">
    <span class="budget-title">Today's Budget</span>
    <span class="budget-amount">
      {{budget | currency:'KRW':'symbol'}}</span>
  </div>
  <div class="division-line"></div>
</div>

String Interpolation에 pipe를 추가합니다.

{{ 데이터 | Pipe }}

String Interpolation은 초반에 다루었죠?

Angular 데이터 바인딩 I (String Interpolation)

중요한 부분은 Pipe 입니다.

저는 Currency Pipe를 이용했습니다.

파이프이름:설정:설정... 과 같은 구조입니다.

Pipe마다 설정이 다르니 문서를 참조해야합니다.

기본제공되는 파이프는 아래와 같습니다.

DatePipe

예: {{ birthday | date:"MM/dd/yy" }}

UpperCasePipe

예: {{ value | uppercase }} 

LowerCasePipe

예: {{ value | lowercase }} 

CurrencyPipe

예: {{ money | currency:'KRW':'symbol'}} 

PercentPipe

예: {{ 0.259 | percent }}

물론 스스로 pipe를 만들 수도 있습니다.

자주 쓰는건 만들어둬도 좋겠죠?

전 아직 기본만 쓰면 충분하더라구요. ^^

정보출처:

https://angular.io/guide/pipes

Angular에는 Data를 표출하는 방법이 다양하게 있습니다.

그 중 가장 간단한 방법인 String Interpolation을 보도록 할게요.

ts 클래스의 변수를 template html에서 가져와 보여주는 것입니다.

이렇게 하는 것이 무슨 도움이 될까요?

먼저 비즈니스 로직과 보여주는 뷰를 분리할 수 있습니다.

html 화면을 변수들로 구성한 후 ts 파일에서 로직만 구현하면 되는거죠.

그리고 정적인 html이지만 data의 변화를 통해 동적으로 보일 수 있습니다.

말보다 예를 들어 설명하는 것이 빠르겠죠?

지난 번 만들었던 budget.component.ts 파일을 수정하겠습니다.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-budget',
    template: `<h3>My Budget: ₩{{budget}}</h3>`,
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 0;
    ngOnInit(){
        let secondTick = Observable.timer(1000,1000);
        secondTick.subscribe((tick)=>{ this.budget += 1000; });
    }
}

Angular 관련 주목할 만한 부분이 2군데 입니다.

6번째줄의 template 속성과 {{ }} 괄호 입니다.

ECMA6에 등장하는 Template String ` (back-tick)도 있습니다만.. 

Angular에 집중하기 위해 생략하겠습니다.

지난번 CLI로 생성해준 ts 파일에는 templateUrl 속성이 있었습니다.

하지만 template이 간단한 경우 굳이 파일이 아니어도 됩니다.

위와 같이 template이라는 속성에 inline으로 html을 작성해도 되죠.

그럼 더이상 budget.component.html은 필요가 없습니다.

하지만 나중에 사용할 예정이니 놔두도록 하겠습니다.

오늘 더 중요한 부분은 {{ }} : String Interpolation 기능입니다.

ts 코드에서 사용하는 변수 budget을 html 코드에 출력할 수 있습니다.

위의 코드와 같이 중괄호 사이에 변수명을 넣어주면 됩니다.

간단히 코드를 설명하자면, 1초에 한번씩 budget 값을 1000씩 올립니다.

ts 코드의 budget 값이 변함에 따라 아래와 같이 화면의 금액이 변하죠.

저의 실제 예산도 1초에 1000원씩 증가하면 얼마나 좋을까요..?

String Interpolation을 이용한 화면

매우 쉽게 화면에 변화를 줄 수 있습니다.

JavaScript로 DOM을 제어하면 되지 않냐구요? 맞습니다. 

그러나 Angular의 장점들은 아직 많으니 천천히 보자구요.

소스주소: https://github.com/jsrho1023/account-book