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

지인 디자이너의 도움으로 디자인을 좀 수정했습니다.

그러다보니 컴포넌트 안에 컴포넌트가 들어갔어요.

Date picker 보다는 달력을 이용하기로 했습니다.

아래 처럼요.

변경 디자인 초안

그리하여 달력 컴포넌트를 만들었습니다.

상위 컴포넌트와 달력이 서로 통신해야하죠.

부모(Parent), 자식(Child) 관계로 부르는데요.

저의 경우에는 아래와 같습니다.

달력을 싸고 있는 컴포넌트가 부모(Parent)

달력 컴포넌트가 자식(Child) 입니다.

부모 -> 자식 방향의 데이터 전달부터 볼게요.

@Input 이라는 annotation을 사용합니다.

자식(Child)입장에서 Input이 되겠죠?

자식 컴포넌트에 먼저 작업을 해줍니다.

1. 자식 컴포넌트에 Import Input

달력 컴포넌트에 Input을 Import 합니다.

@angular/core 모듈에 있어요.

2. 자식 컴포넌트에 @Input 추가

달력 컴포넌트 안에 @Input을 추가합니다.

@Input의 이름을 지정해줄 수 있습니다.

지정하지 않으면 기본 값은 변수명입니다.

이름이 변수명과 같아서 생략해도 됩니다.

저는 명시적으로 적었어요.

코드로 볼게요.

import { Component, Input, ... } from '@angular/core';
...

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {

  @Input('date') date: Date;

  ...
}

3. 부모 템플릿에서 데이터 전달

자식(Child) 컴포넌트에 @Input이 추가되었죠.

부모에서 데이터를 넣어줄 차례입니다.

매우 간단합니다.

Template의 Property 바인딩을 이용하면 됩니다.

<div class="budget">
    <app-calendar [date]="date" 
                  (dateChange)="onDateChange($event)">
    </app-calendar>
    ...
</div>

@Input의 date에 부모 컴포넌트의 date를 연결합니다.

주의할 점은 Input에 이름을 지정했을 경우

그 이름이 property 이름이 됩니다.

당연히 부모 컴포넌트에 date가 있어야겠죠.

기본으로 오늘 날짜로 셋팅해주었습니다.

...

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: ['./budget.component.css']
})
export class BudgetComponent implements OnInit {    
    date: Date = new Date();
    ...
}

아래처럼 달력 컴포넌트에 오늘 날짜가 표시됩니다.

아직 디자인은 엉성하지만요.

달력 컴포넌트 실행 화면

다음에는 자식 -> 부모로 방향을 알아볼게요.

전체소스는 아래에서 볼 수 있습니다.

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

Angular의 테스트가 좀 번거롭게 느껴졌습니다.

매번 Chrome 브라우저가 뜨는 것이 귀찮았죠.

그리고 한 번만 실행하고 싶었습니다.

기본적으로는 코드 변경 시마다 반복하거든요.

그리고 가장 귀찮았던건 진행률...

깔끔하게 표출되지 않습니다.

길고 지저분하게 찍혀요.

에러가 나면 로그 보기도 어렵게말이죠.

가장 귀찮았던 것의 해결방법부터 보죠.

1. Progress 제거

사실 매우 간단하게 해결되었습니다.

ng test에 옵션이 있거든요.

바로 --no-progress 옵션

ng test --no-progress 

위 명령어를 통해 해결!

2. 한 번만 실행

이것도 옵션으로 해결될 줄 알았습니다.

그런데 잘 안되더군요.

문서의 --single-run 이란 옵션

그런데 동작하지 않습니다.

Unknown Option이란 경고만...

그래서 karma.conf.js 파일을 수정합니다.

singleRun이란 속성값을 true로 바꿉니다.

옵션 변경을 통해 해결!

3. 브라우저 실행 안함

두 가지 방법이 있었습니다.

1) Headless Chrome을 사용하는 방법

2) Phantom.js를 이용하는 방법

저는 후자가 마음에 들더라구요.

jest를 이용할 때 Phantom을 써서 그런지..

반가운 마음도 ^^

사용방법은 간단합니다.

1) dependency 설치

npm install --save-dev karma-phantomjs-launcher

위 명령어로 설치해줍니다.

2) karma.conf.js 수정

아래와 같이 변경해주면 됩니다.

아래 코드에 highlight 된 부분이 중요한 부분이에요.

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), 
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: true,

    phantomjsLauncher: {
      exitOnResourceError: true
    }
  });
};

require('karma-phantomjs-launcher')

browsers: ['PhantomJS']

바로 요 두 부분의 코드입니다.

아래는 깔끔해진 콘솔에서의 테스트 모습이에요.

테스트 실행 화면

브라우저 테스트가 번거로우셨거나

테스트 콘솔이 길어서 불편하셨던 분은

저처럼 바꿔보시는 걸 추천드립니다.

CI 구성하시는 분들은 필수!

*CI(Continuous Integration)

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