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

알게 모르게 계속 사용했던 Directive에 대해서 살펴보겠습니다.

Directive를 번역하자면 지시자 라고 할 수 있겠네요.

HTML에 Angular가 간섭할 부분을 표시한다라고 이해하면 쉽습니다.

Component 역시 template이 포함된 Directive로 정의하는데요.

<app-root> 기억하시죠?

이 부분에 app-component를 표출해달라는 표시였습니다.

Component는 별도로 치고, Directive에 2가지가 더 있습니다.

Structural Directive와 Attribute Directive입니다.

2가지 Directives의 차이는 DOM을 다루는 방식입니다.

Structural Directive는 DOM을 추가하거나 제거합니다.

Attribute Directive는 이미 있는 DOM에 스타일이나 동작을 부여합니다.

Angular가 간섭해야함을 표시한다는 걸 기억해주세요.

오늘은 먼저 Attribute Directive를 살펴볼게요.

Angular의 Directive는 마치 HTML에 존재하는 속성처럼 사용됩니다.

스스로 custom directive를 정의할 수도 있습니다.

하지만 이미 만들어진 ngStyle을 보며 directive를 이해해보죠.

<h3 
  [ngStyle]="{
    'color':budget<=1000?'red':'black',
    'background-color':budget<=1000?'yellow':'transparent'}">
      My Budget: &#8361;{{budget}}</h3>

h3 태그에 ngStyle Directive를 추가하였습니다.

마치 html 속성에 property binding을 한 모양새죠.

ngStyle의 값으로 css와 같이 key, value 쌍을 넣었습니다.

그리고 조건문도 들어갔죠.

budget 값이 1000이하면 노란배경에 빨간글씨가 됩니다.

ngStyle 적용 화면

ngStyle이라는 건 원래 html에 정의되어있지 않습니다.

즉 태그에 ngStyle이라고 표시되면 Angular가 간섭을 한다는 의미죠.

ngStyle의 실제 코드를 대략 살펴보면 아래와 같습니다.

@Directive({ selector: '[ngStyle]' })
class NgStyle implements DoCheck {
  set ngStyle: {...}
  ngDoCheck()
}

마치 Component에서처럼 selector가 존재하죠.

Anguar는 저 selector를 찾아서 HTML에 스타일을 입히는 겁니다.

ngStyle 뿐 아니라 ngClass와 같이 정의된 directive가 더 있습니다.

기회가 되면 차차 사용하면서 배우구요.

다음에는 Structural Directive를 사용해보면서 익혀보겠습니다. 

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

서비스를 개발할 때 디자인에 대한 고민을 하게 됩니다.

각 요소의 컬러나 자잘한 인터랙션 등도 포함해서요.

이미 전문가가 고민한 디자인을 입힐 수 있다면 어떨까요?

그래서 Angular에 Material 디자인을 적용해보려합니다.

고맙게도 Angular 팀이 구글의 Material 디자인을 준비해두었어요. 

아래의 명령어를 통해 기본적인 설치를 진행합니다.

Material 디자인이 적용된 Module을 받는 거에요.

npm install --save @angular/material 
npm install --save @angular/cdk
npm install --save @angular/animations

Angular Module이기 때문에 사용하기 위한 설정이 필요합니다.

1. import

데이터바인딩을 위해 ngModel을 사용할 때 FormsModule을 썼죠?

동일하게 사용하고자 하는 component를 import해야 합니다.

현재 사용하고 있는 input과 button에 적용해보겠습니다.

import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    ...,
    imports: [
        BrowserAnimationsModule,
        MatInputModule,
        MatButtonModule
    ],
    ...
})
export class AppModule { }

위와 같이 해당하는 MatInput, MatButton 모듈을 import 해야합니다.

transition 효과를 위한 BrowserAnimation 모듈도 마찬가지죠.

@NgModule의 imports에 추가합니다.

그러면 첫 번째 설정이 완료됩니다.

2. style

디자인 관련하다보니 style 부분을 처음 이야기하게 되네요.

오늘 이야기할 부분은 src폴더 아래의 style.css 입니다.

angular-cli로 생성한 컴포넌트에도 css 파일이 있었죠?

그 파일에는 각 component에 적용될 디자인이 들어갑니다.

캡슐화되어 다른 component에는 적용되지 않죠.

그렇다면 component 전체적으로 적용할 디자인은 어디에 넣을까요?

바로 src폴더 아래에 style.css에 넣어줍니다.

Material 디자인 Theme과 같은 것들 말이지요.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

style.css에 위와 같이 추가해주면 material theme이 적용됩니다.

총 4가지 theme이 있어요. 맘에 드는 걸 고르시면 됩니다.

1) deeppurple-amber.css

2) indigo-pink.css

3) pink-bluegrey.css

4) purple-green.css

이름은 Primary-Accent 컬러의 조합으로 되어있습니다.

이미지로 보면 아래와 같아요. 

angular pre-built theme

마음에 드는 걸 사용하면 됩니다.

스스로 color를 정의할 수도 있어요.

Basic, Primary, Accent, Warn, Disabled, Link 컬러를 바꾸면되죠.

저는 아직 그쪽은 약하니 이미 정의된 걸 사용하겠습니다.

이제 Material 디자인을 사용하기 위한 설정은 마쳤습니다.

html코드에 적용해보도록 할까요?

<div class="mat-app-background">
    <h3>My Budget: &#8361;{{budget}}</h3>
    <mat-form-field>
        <input matInput 
               placeholder="budget" 
               type="text" 
               [(ngModel)]="budget"/>
    </mat-form-field>
    <button mat-raised-button 
            color="primary" 
            (click)="onAddIncome()">Add Income</button>
</div>

보기 쉽도록 줄바꿈을 좀 해봤습니다.

div 태그로 전체를 싸줬구요.

Theme의 배경색을 위해 mat-app-background 클래스를 추가합니다.

제가 고른 배경은 흰색이라 딱히 변화는 없어요.

그리고 input 태그는 mat-form-field 라는 태그로 싸줍니다.

Theme이 적용되기 위해서지요.

그리고 matInput 이라는 directive를 넣어주면 input은 완성입니다.

button의 경우 다른 별도의 태그가 필요없습니다.

mat-button이나 mat-raised-button directive를 넣으면 됩니다.

color는 라는 attribute를 사용하여 색을 입힙니다.

결과 화면은 아래와 같습니다.

angular-material theme 적용

Placeholder가 움직이는 마이크로인터랙션은 덤.

material angular에는 여러가지 component가 더 있습니다.

아래 출처에서 참고할 수 있어요.

저도 진행하면서 더 사용해보도록 하겠습니다.

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

출처:

Angular Material(https://material.angular.io/)

얼마전(3달전..) 고무나무가 키가 너무 자랐다는 생각이 들었습니다.

가만 두면 왠지 화분이 못버틸 것 같았어요.

그래서 가지치기를 하기로 결심했습니다.

집에 남는 화분도 있고 가지치기한 부분이 아깝기도 하더군요.

그래서 물꽂이로 번식을 시켜보기로 결심합니다.

고무나무 가지를 자르면 하얀액이 나옵니다.

그 상태 그대로 300ml 물병에 꽂아두었어요.

물은 1주에 한 번씩 갈아주면서 기다립니다.

10월인지라 날이 추워서 걱정을 했어요.

그런데 기특하게도 점같은 뿌리가 나옵니다.(3주)

고무나무 물꽂이

그 후, 4~5주 정도 기다리니 그 점같았던 뿌리가 자라납니다.

조금 더(1~2주) 기다리니 뿌리가 심을만큼 길어졌어요.

10월 초에 고무나무 가지를 정리하고 12월 말이 되었습니다.

거의 2달 반이 넘게 기다렸네요.

물꽂이 후 화분에 심기

마트나 주변 화원에 가면 흙을 팝니다.

그리고 화분 밑에 물빠짐 바닥망도 팔아요.

고무나무에 좋은 관엽식물용 흙과 바닥망을 샀습니다.

적당히 흙을 넣고 뿌리가 나온 고무나무 가지를 심었습니다.

현재 화분 3개에 가지 3개를 심었어요.

그늘에서 2~3주 정도 요양을 하면 된다고 합니다.

포스팅하는 지금 시점까지 모두 잎이 건강해서 기뻐요.

무럭무럭 잘자랐으면 좋겠습니다.