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

진행이 느리다보니 Angular가 버젼업이 되었네요.

Angular는 버젼 업이 꽤 빠른 편입니다.

2017년 11월 5 버젼이 나왔는데, 다음해 5월 다시 6 버젼이 나오네요.

불행인지 다행인지 진행한 내용이 많지 않아서 쉽게 업데이트가 됩니다.

오늘은 Angular 버젼업에 대해 공유해보겠습니다.

Angular에서 Version 업데이트를 위한 별도의 사이트도 있네요.

버젼과 복잡도, 방법을 입력하면 상세한 가이드를 볼 수 있습니다.

https://update.angular.io/

아래 나오는 스텝을 (조금 추가해서) 따라하면 됩니다. 

명령어 실행 시 관리자 권한이 필요합니다.

0-1. 구버젼 의존성 확인

@angular/upgrade 패키지

downgradeComponent 

downgradeInjectable

UpgradeComponent

UpgradeModule

위 모듈들을 @angular/upgrade/static 으로 변경

(저는 위 모듈들을 사용하지 않았었죠.)

HttpModule, Http 서비스

HttpClientModule, HttpClient 서비스로 변경

(이 역시도 사용하기 직전이었습니다.)

0-2. Node version 확인 (8 이상)

node --version

1. Angular CLI 업데이트 및 설정 파일 업데이트: 약 3분

npm install -g @angular/cli

npm install @angular/cli

npm install

npm update

ng update @angular/cli

2. Angular Framework package 업데이트: 약 20초

ng update @angular/core

3. Angular Material 업데이트: 약 20초

ng update @angular/material

4. Angular 이외 다른 의존 패키지 업데이트: 약 10초

이 부분은 App에 사용한 패키지에 따라 다르겠죠.

npm prune

npm update

5. RxJS 업데이트: 약 15초

npm install -g rxjs-tslint

rxjs-5-to-6-migrate -p src/tsconfig.app.json

npm uninstall -g rxjs-tslint

저는 rxjs-tslint를 다시 사용하지 않을 것 같아 지웠습니다.

위의 과정을 거치고 6.0 버젼으로 업그레이드가 완료되었습니다.

그런데..

ng serve 가 동작하지 않습니다.

아래와 같은 에러메시지와 함께요.

Cannot find module 'webpack/lib/RequestShortener'

아무래도 webpack이 설치 되어야할 것 같죠?

npm install --save-dev webpack

이제 앞으로는 Angular 6로 작업해보도록 하겠습니다.

(기본 기능에는 큰 차이가 없을 것 같습니다.)

지난 번에는 데이터를 분리했었죠.

이번에는 비즈니스 로직을 좀 나누어 보겠습니다.

(사실 비즈니스 로직이 없...)

Angular의 Service를 이용할 예정입니다.

먼저 왜 Service를 이용하는지 알아보죠.

Service는 Angular에서의 DI(Dependency Injection)을 구현하는 필수 요소입니다.

DI 패턴은 객체의 관리(변경, 테스트 등)를 용이하도록 만들어주는 방식이죠.

코드의 재사용성을 높이고, 모듈 간의 결합도를 낮추기 때문인데요.

Angular에서 DI를 용이하도록 준비해둔 것이 바로 이 Service라는 것!

그럼 역시 코드를 살펴보도록 하겠습니다.

간단하게 cli로 Service를 생성할 수 있습니다.

1. Service 생성

ng generate service {서비스이름}

(축약: ng g s {서비스이름})

아래와 같이 Injectable을 import하여 서비스가 생성됩니다.

이름을 짓고 메소드를 추가해주었구요.

import { Injectable } from '@angular/core';
import { DailyExpense } from "../domain/dailyExpense";

@Injectable()
export class DailyExpenseService {
    getDailyExpense(date:Date) {
        ....
        return dailyExpense
    }
}

2. Service의 등록

아래와 같이 생성한 Service를 AppModule에 추가합니다.

providers라는 속성에 Array 값의 하나로 넣었습니다.

(Service를 많은 Component에서 재사용하기 위함)

특정 Component에만 사용되는 경우가 있겠죠?

그러면 해당 Component의 providers에 추가하면 됩니다.

import { DailyExpenseService } from './service/daily-expense.service';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [DailyExpenseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

그러면 이제 Service를 Component에서 사용할 준비를 마쳤습니다.

3. Service의 사용

아래와 같이 import를 해주고, 생성자에 Service를 argument로 넣어줍니다.

import { DailyExpenseService } from '../service/daily-expense.service';

@Component({
    ...
})
export class BudgetComponent implements OnInit{
    ...
    dailyExpenseService: DailyExpenseSerivce;
    
    constructor(dailyExpenseService : DailyExpenseService){
        this.dailyExpenseService = dailyExpenseService;
    }

    ngOnInit(){
        ...
        this.dailyExpense = this.dailyExpenseService.getDailyExpense(new Date());
        this.dataSource = new MatTableDataSource(this.dailyExpense.consumptions);
        ...
    }
}

예상하신 대로입니다.

Service를 arg로 가진 Component에 Angular가 알아서 Service를 주입합니다.

Component에서는 Service가 가진 method들을 자유롭게 활용할 수 있구요.

굉장히 편리하죠?

Service를 분리하면서 테스트도 더욱 쉬워졌습니다.

Component를 만들 필요 없이 Service를 단위 테스트하면 되니까요.

그리고 그에 더해 여러 Component에서 함께 사용할 수 있습니다.

제가 포스팅을 시작한 Angular 5 버젼에서는 위처럼 사용하였습니다.

p.s: 6 버젼으로 업그레이드되면서 추가된 기능이있죠.

아래와 같이 service의 decorator에 provideIn 속성을 넣습니다.

import { Injectable } from '@angular/core';
import { DailyExpense } from "../domain/dailyExpense";

@Injectable({providedIn: 'root'})
export class DailyExpenseService {
    getDailyExpense(date:Date) {
        ....
        return dailyExpense
    }
}

위와 같이 하면 2번의 과정을 생략할 수 있습니다.

Scope을 Service안에서 잡아주는거죠.

좀 더 직관적인 면이 있습니다.

그리고 기능적으로는 Lazy loading이 추가되었다고 하네요.

방탈출에 19금 테마라는 것이 있다.

어른들의 세계..

나의 호기심을 자극한다.

무엇이 있을까?

그러나 19금(꾸금)방탈출들의 특징이라는

과도한 성적 묘사, 더럽다는 느낌...

이런 걸 느끼고 싶지는 않았다.

19금이 호기심을 자꾸 자극하긴 하니...

꾸금방탈출 중에 깔끔하다는 덤앤더머의 러브클리닉에 도전!

덤앤더머의 러브클리닉

업체난이도: ★★☆ (2.5/5)

체감난이도: ★ (1/5)

스토리: ★★ (2/5) 

추천도: ★★ (2/5)

Player 참고: 방탈출 경력 15회 부부

Comment: (성공/0 hint)

 Jason "19금이라 쓰고 커플 테마라 읽어야할 듯"

 Julie "학교에서도 못받아본 S 학점이라니!" 

Intro:

안녕하세요. 이곳은 러브클리닉입니다.

무엇을 치료하는지 어떤 일을 하는 곳인지 궁금하신가요?

지금부터 알려드리죠.

하지만 설명에 앞서 간단한 질문을 하겠습니다.

여러분은 서로에 대해서 얼마나 알고 계시나요?

여러분의 관계는 아직 열정적이신가요?

아니면 소홀해진 관계를 다시 회복하고 싶으신가요?

서로에 대해 모르고 있었던 사실.

기억하고 있었지만 익숙해져 잊어버린 것들.

다시 한 번 느껴보고 싶은 설렘.

일단 캐비넷에 소지품을 넣고 이방으로 들어와

상담을 받아보시겠어요?

여러분이 적극적으로 동참하고 노력한다면

한 시간 안에 원하시는 것을 말끔히 해결해 보일게요.

여러분. 여기는 러브클리닉입니다.

상담소 같은 깔끔한 인테리어.

간단한 설문을 하면서 방에 대한 호기심 유발.

커플이 즐기기에 재미난 장치들이 있다.

커플이 아니라면 난감한 해야할 일이 있다.

친한 친구 비추, 썸 비추, 동성 친구 비추..

썸 사이에 어느정도 까지 괜찮느냐는 개인차가 있겠지만...

색다른 커플 데이트 장소 정도?

그렇지만 꾸금테마답게 2가지 정도 19금 양념이 있다.

첫째,

치마는 추천하지 않는다.

민망해질 수 있을 것 같다.

어찌해야하는지 알지만 섣불리 하기 어려워지는 행동..

(어째 글로 쓰려니 더 야한 것 같은...)

둘째,

좀 낯뜨거운 장면이 연출된다.

Julie가 예측해서 순식간에 맞춰버리긴 했다.

꾸금 양념 말고도 참신하고 재미난 문제들이 있다.

약간의 관찰력과 협동심과 촉을 요구하는 문제들!

그리고 침착한 Julie는 결코 통과할 수 없었던... 그 문제...

쉽게 설레는 남자 Jason이 바로 통과... ㅋㅋ

19금 테마가 궁금한데 지나친 건 싫다.

커플인데 색다른 경험을 원한다면 방문해보는 것도 좋을듯.

다만 어렵지 않은 테마로 빨리 나올 수 있음.

무려 36분.. 남은.. 아쉬움에 연방한

비트포비아의 이일호씨 http://dschci.tistory.com/114

다른 테마를 하기 전 에피타이저 느낌으로 하는 게 베스트!

탈출 인증샷

AWS는 12개월 무료 서비스를 제공합니다.

대부분의 클라우드 서비스가 그렇듯 말이지요.

하지만 AWS는 그리 친절하지 않습니다.

무료 서비스를 이용하기 위해 가입을 해야하구요.

가입을 위해 카드 정보를 기입해야합니다.

그리고 까딱 실수하면 자동으로 과금됩니다...

AWS 프리티어 결제 콘솔

바로 위처럼 말이지요.

프리티어 서비스 요약항목을 보시면 아시겠지만...

예상 사용량이 프리티어 제한에 미치지 않습니다.

그렇다면 대체 왜!?

그럼 무엇을 실수 했는지 한 번 보시죠.

상세 내역에 어떤 이유로 요금이 청구되었는지 나옵니다.

과금 상세 내역

요금이 청구된 이유는 Elastic IP Address 였습니다.

EC2 Instance를 내렸다가(Stop) 올리면(Start) IP가 바뀝니다.

이것이 너무 불편해서 고정 IP를 할당했죠. (1개 무료)

그런데 EC2 Instance를 내려놓고 3일이 경과합니다.(72Hrs)

요금이 청구될 거라는 사실은 꿈에도 모른채 말이지요.

이유인 즉슨,

EC2 Instance 없이 IP를 고정해두는 것은 AWS 입장에서 손해입니다.

IP를 할당할 Instance가 없기 때문이지요.

그것을 시간당 0.005$로 사용자에게 부담하도록 합니다.

Instance를 내렸을 때 경고라도 좀 줬다면.. 좋았을 텐데요.

무료 티어용 EC2 Instance는 한달 내내 사용해도 무료입니다.

괜히 내렸다 올릴 필요가 없어요.

고정 IP가 필요하신 분은 할당하고 EC2 Instance를 유지하세요.

혹은 EC2 Instance를 내릴 때, Elastic IP도 함께 해제하셔야합니다.

과금을 피하려면 말이죠.

고작 $0.50 과금으로 뭘 그러냐.. 싶지만.

제가 결제 콘솔을 확인 하지 않고 계속 뒀다면 얼마일까 싶네요.

과금 폭탄을 맞았다는 분들이 주변에 있어 공유해봅니다.

(네트워크 테스트를 꽤나 한다고 들었습니다만.. 미확인 사실)

이왕 서비스를 사용해보기로 결심했다면 자주 접속해서 확인하세요. ^^;;

이번에 소개할 방 탈출은.. "이불 밖은 위험해"

마스터키 건대점에 가서 즐겼다.

근처 500m 안에 방탈출 카페가 4개나 더 있어!!

(경쟁이 치열하다는 의미임)

안그래도 이 위치에 있던 다른 방탈출 카페가 망하고 들어온 마스터키~

재미없으면 망함!!!

이 근처 망하지 않고 있는 방탈출이 있다면 해보는 것이 좋을 듯.

이 테마는 둘이서 하기 좋은 그런 느낌!?

마스터키 건대점의 이불 밖은 위험해

업체난이도: ★★★

체감난이도: ★★★ (3/5)

스토리: ★★★★ (4/5)

추천도: ★★★★ (4/5)

Player 참고: 쓸데없는 담력을 가진 Jason과 겁 많은 똑똑한 Julie

Comment: (성공/3 hint)

 Jason: "적절한 힌트(빠른 포기)는 체감 난이도를 낮추는 법ㅋ"

 Julie: "입장하는 것 만으로도 재미를 느낄 수 있다니!"

이불 밖은 위험해는 '감성테마'~

직원이 탈출구에서 휴지를 들고 기다린다는 소문도... 

실제 누군가 살고 있는 집에 들어간 느낌의 인테리어.

근데 피곤할 때 가지않는 것을 추천해.

빠르게 시작할 수 없을거야 ㅎㅎ 가보면 알아.

장치보다 자물쇠가 많은 편인데, 지루하지는 않다.

어렵지 않게 달칵, 달칵 풀면서 진행하는 맛이 있는 그런 방.

(근데 hint 3개나 썼...!?)

Jason 계산능력이 한 번 빛을 발했고,

Julie가 푸는 방법도 모르지만 스토리를 통해 답을 맞췄... >_<

시간 말고, hint를 남겼어야했는데 그런 부분이 좀 후회된다.

이 방은 인테리어와 스토리를 음미하면서 천천히..

하지만 꼭 성공하세요. (힌트는 무제한 입니다! 으흐흐)

방탈출은 1시간을 꽉채워 즐겨야 가성비가 좋은 그런 느낌.

억지스럽지 않고, 스토리도 (뻔하지만) 괜찮아서 충분히 즐길만 함.

특히 공간과 문제가 잘 어우러지는 편(더 이상은 생략한다)

방이 여러 개 있고 넓다 생각했는데, 가장 작은 방이라고....!?..

하나도 무섭지 않은 테마인데 Julie는 삑 덜컥에 놀람 -_-;;

도메인 모델이라고 쓰고, 데이터의 분리라고 읽어야할 것 같습니다.

지금까지 Budget Component에 데이터를 다 넣어뒀었는데요.

테이블 데이터를 아래와 같이 가지고 있습니다.

export class BudgetComponent implements OnInit{
    ...
    consumptions = [{
        amount: 12000,
        desc: "food"
    },{
        amount: 10000,
        desc: "beverage"
    },{
        amount: 12000,
        desc: "dissert"
    }];
    dataSource = new MatTableDataSource(this.consumptions);
    ...
}

이 부분을 조금씩 덜어내보려고 합니다.

TypeScript는 ECMAScript 2015 문법을 사용할 수 있죠.

계속 사용해오던 export, import가 그에 해당합니다.

src/domain 이라는 폴더를 만듭니다.

Consumption이라는 Module을 아래와 같이 만들어줍니다.

export class Consumption {
    amount: number;
    desc: string;

    constructor (amount:number, desc:string){
        this.amount = amount;
        this.desc = desc;
    }
}

그리고 BudgetComponent에서 아래와 같이 사용합니다.

import { Consumption } from '../domain/consumption';
    ...
    consumptions = [
        new Consumption(12000, "food"),
        new Consumption(10000, "beverage"),
        new Consumption(5000, "dissert")];

    dataSource = new MatTableDataSource(this.consumptions);
    ...

이번엔 consumptions를 분리해볼까요.

날짜별로 소비를 정리한다고 생각하고 만들어봅니다.

역시 Consumption을 사용해줘야하기 때문에 import하구요.

consumption을 추가할 수 있는 method도 만들어줍니다.

import { Consumption } from "./consumption";

export class DailyExpense{
    datetime: Date;
    consumptions: Array;

    constructor(datetime: Date){
        this.datetime = datetime;
        this.consumptions = new Array();
    }

    addConsumption(consumption: Consumption){
        this.consumptions.push(consumption);
    }
}

그러면 DailyExpense를 사용해봅시다.

Consumption을 사용할 때와 동일합니다. 

import { DailyExpense } from '../domain/dailyExpense';
import { Consumption } from '../domain/consumption';

...    
    dailyExpense : DailyExpense;

    dataSource : MatTableDataSource; 
    remain: number;

    ngOnInit(){
        ...
        this.dailyExpense = new DailyExpense(new Date());
        this.dailyExpense
              .addConsumption(new Consumption(12000, "food"))
        this.dailyExpense
              .addConsumption(new Consumption(10000, "beverage"))
        this.dailyExpense
              .addConsumption(new Consumption(5000, "dissert"))
        this.dataSource 
              = new MatTableDataSource(this.dailyExpense.consumptions);
        ...
    }

이번에는 ngOnInit()에서 데이터를 만들어 넣었습니다.

좀 더 복잡해보이지만 유연해졌죠.

결과물은 이전과 동일합니다만...

데이터 변경 및 관리를 개발하기 더 수월해졌습니다.

방탈출이 유행한지는 꽤 됐지만 최근 재미가 더 붙었다.

방탈출 10번 남짓한 초보자로서의 후기다.

말그대로 개인의 느낌을 남기는 후기인만큼 캐쥬얼하게 반말체..ㅋ 

(성향에 안맞아 불편함)

와이프와 2인 탈출을 시도 중이다.

둘의 능력치는 대략 아래와 같다.

닮음 주의 / 공포테마 안하므로 담력 무쓸모

안닮음 주의 / 쫄보, 창조 공포 多

Jason은 컨디션에 크게 영향을 받지 않는다.

(스스로를 3인칭으로 부르다니.. 오글오글...)

Julie는 배고프거나 겁을 먹으면 능력치가 반감되는 특징이 있다.

소개는 이만하고, 이번에 즐긴 방탈출에 대해 공유해보자.

키이스케이프 강남점의 월야애담(月夜愛談)

업체난이도: ★★★★

체감난이도: ★★★ (3/5)

스토리: ★★★★ (4/5)

추천도: ★★★★★ (5/5)

Comment: (성공/2 hint)

 Jason "한옥 인테리어가 색다른 묘미를 줘요"

 Julie "그래서 우리 살랑살랑 연구소는 언제하지?"

  (살랑살랑연구소 http://dschci.tistory.com/115)

Intro:

돌쇠야. 나 덕유라네. 

소식들었는가. 

오늘 우리 아버님이 나를 불러서 말씀하시길 

돌쇠 네가 모시는 최대감님댁 아씨 복녀와 정혼을 하기로 정해졌다는구나 

너도 잘 알고 있듯 나는 우리 다람골의 최고 미인 

점순이를 마음에 두고 있지않나. 

그러니, 오늘 밤에 나에게 최대감님댁에 몰래 들어갈 수 있는 

방법을 알려줄 수 있겠는가. 

그리하면 돌쇠 너의 도움을 절대로 잊지 않을테니... 

내일 아침 우리의 혼례를 알리는 방이 붙기 전 

내가 직접 들어가서 손을 좀 쓰려 하니 

들어가는 방법만 알러주면 되네 

부탁하네!!

위와 같은 흥미로운 스토리로 방을 들어가게 된다.

일단 방에 들어가서 불을 켜면 '와~'하는 탄성이 나온다.

한옥마을 안가도 된다. 여기와.

일단 문제에 대한 힌트가 명확한 편.

그럼에도 불구하고 뻘짓을 할 수 있는...

나만 하는 뻘짓은 아니었는지 직원분이 바로 도와줌.. -_-;;

힌트를 두 번 썼지만, 사실 한 문제로 두 번써서 아쉬움 ㅜ

들어가기 전 직원 분의 안내를 명심하도록!

그 안내를 제대로 따르지 않아 같은 문제에서 두 번이나...

한 문제에서 시간을 많이 쓴 만큼 촉박한 느낌을 받았으나

시간이 촉박해지면 Julie 능력치가 2배가 되어 쾌속 풀이

문제 푸는 속도가 좋다는 Julie...(시간이 부족하면 초사이언됨)

1분에 한문제씩 재껴버리는 쾌거를...(Jason 구경꾼됨)

많은 이야기거리가 있지만 비밀유지를 위해

직접 해보시라는 말씀을 드리며 이만 탈출 인증하고 마무리.

탈출 인증샷

Angular의 테스트에 대해 보고자 합니다.

여지껏 테스트는 안해왔는데요.

(테스트할 코드가 많지 않았기도했지만...)

Angular는 Jasmine이라는 테스트 프레임웍을 사용합니다.

Jasmine은 테스트를 이해하기 쉽게 정리하는 것을 돕습니다.

아래 예제를 참고해보도록 하죠.

describe('BudgetComponent', () => {
  ...
  it('should create', () => {
    expect(component).toBeTruthy();
  });
  ...
}

테스트 코드의 일부를 가져와봤습니다.

it은 무엇이 테스트 되는지를 보여줍니다.

describe는 여러개의 it을 묶어서 설명합니다.

또한 Jasmine은 테스트를 편리하게 하기 위한 API를 제공하죠.

예를들어 아래와 같은 메서드들이 있습니다.

expect().nothing();
expect(thing).toBe(expected);
expect(result).toBeDefined();
expect(result).toBeGreaterThan(3);
expect(result).toBeLessThan(0);
expect(thing).toBeNaN();
expect(result).toBeNull();
expect(thing).toBeTruthy();
expect(array).toContain(anElement);
expect(string).toContain(substring);
expect(bigObject).toEqual({"foo": ['bar', 'baz']});
...

메서드의 이름만 봐도 어떤 걸 테스트하는지 이해가 됩니다.

더 많은 메서드들은 아래 출처에서 참고하시면 되구요.

Angular 테스트를 수행하려면 아래와 같은 명령어 하나면 됩니다.

ng test

위와 같이 실행하면 브라우저에 아래와 같은 화면이 뜹니다.

Angular Test 실행화면

Karma라는 툴이 실행됨을 알 수 있는데요.

Jasmine 테스트를 브라우저로 쉽게 수행하는 걸 돕습니다.

Jasmine 테스트를 위해 html을 작성해야하는데요.

Karma가 대신하도록 Angular에 이미 설정이 되어있습니다.

그럼 실제 테스트 코드를 보도록 하죠.

Budget Component를 테스트하는 코드입니다.

budget.component.spec.ts 파일이에요.

테스트 코드는 spec 파일에 작성하게 됩니다.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatInputModule } from '@angular/material/input';
import { MatTableModule } from '@angular/material/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BudgetComponent } from './budget.component';

describe('BudgetComponent', () => {
  let component: BudgetComponent;
  let fixture: ComponentFixture;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BudgetComponent ],
      imports: [ MatInputModule, MatTableModule, BrowserAnimationsModule ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BudgetComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have budget value', () => {
    const budgetComponent: HTMLElement = fixture.nativeElement;
    let titleElement = budgetComponent.querySelector(".budget-total");
    expect(titleElement.textContent).toEqual("Today's Budget: ₩ 20000");
  })
});

먼저 BudgetComponent가 사용하는 모듈들이 import되어야 합니다.

그리고 it이 수행되기 전 필수 작업들이 beforeEach에서 수행되죠.

컴포넌트를 컴파일하고 화면을 그리는 작업입니다.

'should create'라는 테스트는 기본으로 생성됩니다.

component가 생성 되는지를 테스트하는 것이지요.

빠진 모듈이 있으면 should create부터 실패합니다.

저는 budget value가 셋팅이 되는지를 테스트했습니다.

fixture.nativeElement로부터 화면을 가져올 수 있어요.

budget-total 클래스를 가진 h3 요소의 값을 검사했습니다.

20000으로 설정된 값이 표출되고 있는지를요.

간단한 테스트죠.

더 복잡하고 다양한 테스트 스킬이 존재합니다.

경험해보면서 공유할 가치가 있는 것들은 공유할게요.

코드가 변하면서 테스트도 변해야합니다.

TDD(Test Driven Development)가 한창 화두일 때가 있었죠.

테스트를 먼저 작성하고 코딩을 하는 방식인데요.

저는 적절히 섞어서 작업해나갈 예정입니다.

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

출처:

https://angular.io/guide/testing

https://jasmine.github.io/tutorials/your_first_suite

오늘은 가볍게 가수 이야기를 해볼까 해요.

얼마전 나얼을 좋아하시는 과장님과 있었던 해프닝입니다.

어디선가 브라운 아이드 소울 노래가 흘러나오고 있었습니다.

J과장님 왈, 브라운 아이즈 데뷔 때부터 나얼을 좋아하셨다고..

그러다가 브라운 아이드 소울 멤버에 대한 이야기가 나왔구요.

(팀 이름 참 길다.. -_-;;)

그 유명한 친구 누구지? 하던 순간...

옆에서 이야기하던 K대리의 한마디.

"그 있잖아요."

"(손을 입 근처에서 몇 바퀴 돌리며..) 마이크 돌리는..."

다들 누군지 알아차리고 웃었더랬죠.

바로 가수 정엽씨 입니다.

워낙 유명하다보니 이런 짤들도 있어요.

쯔정엽(문제 시 삭제)

청와대 정엽(긴장 많이 하셨나봐요)

'마이크 돌리는 사람'으로 기분좋게 웃었던 기억 공유합니다.

아무튼 트레이드 마크가 있다는 건 좋은 것 같아요.

정엽, 나얼이 본명이라는 거에 또다시 놀라면서 마무리합니다.

출처:

http://www.wantwice.com/bbs/1116837 (트와이스 여성 팬사이트 - 쯔정엽)

http://www.inven.co.kr/mobile/board/powerbbs.php?come_idx=3146&l=3191183 (인벤)

지난 포스트에 예고했던 Material Table에 대해 알아보겠습니다.

0. Import MatTableModule

이제는 익숙한 과정이죠?

Material Table을 사용하기 위해서 Module을 추가합니다.

App.module.ts에 MatTableModule을 Import 합니다.

import { MatTableModule } from '@angular/material/table';
@NgModule({
  ...
  imports: [
    ...
    MatTableModule
  ],
  ...
})
export class AppModule { }

1. mat-table 추가

이제 화면(Template)에 테이블을 추가합니다.

저는 budget.component.html에 넣었습니다.

<mat-table [dataSource]="dataSource">
</mat-table>

dataSource에 Property Binding 보이시죠?

mat-table에서 사용할 데이터에 TypeScript 변수를 넣은거죠.

2. dataSource 추가

mat-table에 바인딩된 데이터를 추가해보겠습니다.

budget.component.ts파일에 data를 추가합니다.

import { MatTableDataSource } from '@angular/material';

@Component({
    ...
})
export class BudgetComponent implements OnInit{
    ...
    consumptions = [{
        amount: 12000,
        desc: "food"
    },{
        amount: 10000,
        desc: "beverage"
    },{
        amount: 12000,
        desc: "dissert"
    }];
    dataSource = new MatTableDataSource(this.consumptions);
    ...
}

MatTableDataSource 모듈이 필요합니다.

테이블에 보여줄 데이터를 Array 형태로 만들구요.

MatTableDataSource 객체를 생성하여 dataSource에 넣어줍니다.

그러면 mat-table과 바인딩될 준비가 끝납니다.

3. Column 정의

테이블의 Column Template을 정의합니다.

어느 제목에 어느 데이터를 넣을지를 의미합니다.

mat-header-cell 에는 제목이 들어가구요.

mat-cell 에는 어떤 데이터를 보여줄지 넣습니다.

저는 아래와 같이 정의하였습니다.

consumption의 amount와 desc를 두 개 column으로 보여줍니다.

<mat-table [dataSource]="dataSource">
  <!-- Amount Column -->
  <ng-container matColumnDef="amount">
    <mat-header-cell *matHeaderCellDef> Amount </mat-header-cell>
    <mat-cell *matCellDef="let consumption"> {{consumption.amount}} </mat-cell>
  </ng-container>

  <!-- Description Column -->
  <ng-container matColumnDef="desc">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let consumption"> {{consumption.desc}} </mat-cell>
  </ng-container>
</mat-table>

4. Row 정의

테이블의 Row Template을 정의합니다.

Row, Column을 어떻게 보여줄지 정의하면 테이블이 되죠.

amount와 desc를 각 열에 보여주기로 합니다.

<mat-table [dataSource]="dataSource">
  <!-- Amount Column -->
  <ng-container matColumnDef="amount">
    <mat-header-cell *matHeaderCellDef> Amount </mat-header-cell>
    <mat-cell *matCellDef="let consumption"> {{consumption.amount}} </mat-cell>
  </ng-container>

  <!-- Description Column -->
  <ng-container matColumnDef="desc">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let consumption"> {{consumption.desc}} </mat-cell>
  </ng-container>

  <!-- Row Template -->
  <mat-header-row *matHeaderRowDef="['amount','desc']"></mat-header-row>
  <mat-row *matRowDef="let consumption; columns: ['amount','desc'];">
  </mat-row>
</mat-table>

이렇게 하면 아래와 같이 Material Table이 보여집니다.

여기서 Table에 살짝 shadow를 넣어줬는데요.

div로 감싸주고 mat-elevation-z1이라는 class를 추가하면 됩니다.

Mat Table 화면

Material Table을 이용하면 몇 가지 장점이 있습니다.

정렬이나 페이징 필터링 등의 기능을 추가하기 쉽구요.

어느정도 반응형을 지원합니다.

필요할 때 추가해서 사용해보도록 할게요.

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

출처: 

https://material.io/

https://material.angular.io/components/table/overview