Search results for 'IT Tech'

Angular Component Communication (Input)

2018. 12. 2. 22:41

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

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

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

'IT Tech > Angular' 카테고리의 다른 글

Angular Dialog(Material Design)  (0) 2019.01.01
Angular Component Communication (Output)  (0) 2018.12.16
Angular Test Headless  (0) 2018.11.18
Angular Pipes  (0) 2018.11.12
Angular Router (NGXS)  (0) 2018.11.05

TechTrip IT Tech/Angular

Angular Test Headless

2018. 11. 18. 20:59

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)


'IT Tech > Angular' 카테고리의 다른 글

Angular Component Communication (Output)  (0) 2018.12.16
Angular Component Communication (Input)  (0) 2018.12.02
Angular Pipes  (0) 2018.11.12
Angular Router (NGXS)  (0) 2018.11.05
Angular Router  (0) 2018.10.31

TechTrip IT Tech/Angular

Angular Pipes

2018. 11. 12. 20:36

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

'IT Tech > Angular' 카테고리의 다른 글

Angular Component Communication (Input)  (0) 2018.12.02
Angular Test Headless  (0) 2018.11.18
Angular Router (NGXS)  (0) 2018.11.05
Angular Router  (0) 2018.10.31
Angular Forms (Validation)  (0) 2018.10.14

TechTrip IT Tech/Angular

Angular Router (NGXS)

2018. 11. 5. 21:19

Angular의 화면 이동에 대한 부분입니다.

지난 글에서 RouterModule을 다뤄봤는데요.

(Angular Router)


브라우저에 주소를 입력하여 이동했었죠?

오늘은 NGXS의 플러그 인을 사용하겠습니다.


사이트의 이동경로는 중요한 상태중 하나입니다.

그것을 스토어에서 관리하면 장점이 있지요.

사용자가 접속한 주소를 컴포넌트가 알 수 있구요.

어느 경로를 통해 왔는지도 파악 가능합니다.

물론 사이트 내의 이동경로 뿐이지만요.


그럼 코드를 통해 살펴보겠습니다.


1. Import NgxsRouterPluginModule


플러그인을 사용하기 위해 모듈을 Import 합니다.

NgxsRouterPluginModule 입니다.

그리고 @NgModule 의 Imports에 추가합니다.

RouterModule 설정은 그대로 둡니다.

...
import { NgxsRouterPluginModule } from '@ngxs/router-plugin'

const appRoutes : Routes = [
  { path: '', component: BudgetComponent },
  { path: 'config', component: SettingComponent }
]

@NgModule({
  ...
  imports: [
    ...
    RouterModule.forRoot(appRoutes),
    NgxsRouterPluginModule.forRoot()
  ],
  ...
})
export class AppModule { }


2. Component에 Navigate 메소드 추가


이제 경로 이동을 추가할 컴포넌트로 갑니다.

저는 Header에 경로 이동 코드를 넣겠습니다.

Store와 Navigate 모듈을 Import 하구요.

Store에 Navigate 객체를 dispatch 합니다.

마치 action 동작을 수행하는 것처럼요.

(Angular State Management (NGXS) Code)

...
import { Store } from '@ngxs/store';
import { Navigate } from '@ngxs/router-plugin';

@Component({
  ...
})
export class HeaderComponent implements OnInit {
  constructor(private store: Store) { }
  moveTo(path){
    this.store.dispatch(new Navigate([path]))
  }
}

참! 생성자에 Store 의존성을 주입하구요.

Service를 사용할 때와 동일합니다.

(Angular Service 만들기)

Angular의 강점인 의존성 주입이죠?


3. Template에 method 바인딩


로고 아이콘, 타이틀을 클릭하면 루트로

설정 아이콘을 클릭하면 설정으로 보냅니다.

아래와 같이 click에 바인딩을 해주었습니다.

<mat-toolbar color="primary">
  <mat-icon (click)="moveTo('/')">account_balance</mat-icon>
  <span class="application-title" 
      (click)="moveTo('/')">Daily Account Log</span>
  <span class="fill-remaining-space"></span>
  <mat-icon 
      (click)="moveTo('/config')">settings</mat-icon>
</mat-toolbar>

그러면 로고를 클릭할 때 moveTo가 호출되구요.

path에 따라 화면을 이동합니다.


route 이동 동작화면(ngxs)


동작화면을 보면 깜빡임도 없죠?

<router-outlet> 부분만 다시 rendering 됩니다.

필요한 부분(Component)만 바꿔치기 되는 거죠.


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


정보출처: 

https://angular.io/guide/router

https://ngxs.gitbook.io/ngxs/plugins/router

'IT Tech > Angular' 카테고리의 다른 글

Angular Test Headless  (0) 2018.11.18
Angular Pipes  (0) 2018.11.12
Angular Router  (0) 2018.10.31
Angular Forms (Validation)  (0) 2018.10.14
Angular Forms (Simple)  (0) 2018.10.07

TechTrip IT Tech/Angular

Angular Router

2018. 10. 31. 19:40

이번은 새로운 페이지의 추가, 이동 입니다.


웹사이트는 여러 페이지로 이루어져 있습니다.

사용자는 페이지를 이동해가며 사이트를 이용합니다.

Angular에서의 페이지 이동은 Router를 통합니다.


역시 코드와 함께 살펴보겠습니다.


1. Component 생성


새로운 페이지를 구성할 컴포넌트를 생성합니다.

angular-cli 를 이용하여 생성하겠습니다.

(Angular 새로 Component 만들기)


ng g c setting


실행하면 setting 컴포넌트가 생성됩니다.


2. Import Routes, RouterModule


angular 모듈을 import 합니다.

app.module.ts 파일을 수정합니다.

import { Routes, RouterModule } from '@angular/router';

간단하죠?


3. Routes, RouterModule 설정


이제 컴포넌트와 주소를 연결해줄 Routes를 만듭니다.

자바스크립트 객체의 배열로 생성하면 됩니다.

{ path: 주소이름, component: 컴포넌트 }

주소이름은 맨 앞의 / 를 생략한 상태로 씁니다.

/는 빈 문자열 /config는 'config' 라고 입력합니다.


그리고 NgModule의 imports에 RouterModule을 추가합니다.

생성한 Routes를 인자로 forRoot 메서드를 호출합니다.

import { Routes, RouterModule } from '@angular/router';
...
const appRoutes : Routes = [
  { path: '', component: BudgetComponent },
  { path: 'config', component: SettingComponent }
]

@NgModule({
  ...
  imports:[
    ...
    RouterModule.forRoot(appRoutes),
    ...
  ],
  ...
})
export class AppModule { }

위와 같이 설정하면 아래와 같이 맵핑됩니다.

{서버주소} 는 BudgetComponent

{서버주소}/config 는 SettingComponent



4. Template 변경


이제 주소에 따라 다른 컴포넌트가 보여져야합니다.

따라서 화면에도 변경이 필요하겠죠?

<router-outlet> 이라는 태그를 사용합니다.

이곳에 컴포넌트를 render 하라는 directive 에요.

<div class="mat-app-background">
    <div class="mat-elevation-z4">
        <app-header></app-header>
    </div>
    <router-outlet></router-outlet>
</div>

위와 같이 하면 완성입니다.

주소에 따라 다른 컴포넌트가 보여집니다.


router 동작 화면


사실 위처럼 주소를 외워서 이동하지는 않죠?

다음에는 화면 버튼을 통한 이동을 해볼게요.

로딩하는 하얀 화면 동작도 없어질 겁니다.


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

'IT Tech > Angular' 카테고리의 다른 글

Angular Pipes  (0) 2018.11.12
Angular Router (NGXS)  (0) 2018.11.05
Angular Forms (Validation)  (0) 2018.10.14
Angular Forms (Simple)  (0) 2018.10.07
Angular State Management (NGXS) Code  (0) 2018.09.22

TechTrip IT Tech/Angular

Angular Forms (Validation)

2018. 10. 14. 11:51

이번에는 Angular Forms 모듈을 좀 더 활용해보도록 하죠.

유효성 검증에 대해 다뤄볼까 합니다.


보통은 keyup이나 focusout event를 받아서 처리합니다.

Angular에서는 Validator라는 것을 사용합니다.


0. Component에 Import Validators


Validators 모듈을 가져옵니다.

import { FormControl, Validators } from '@angular/forms';
...

@Component({
  ...
})
export class BudgetComponent implements OnInit{ ... }


1. Form Control에 Validators 추가


Form Control을 생성할 때 Validators를 추가합니다.

import { FormsControl, FormGroup, Validators } from '@angular/forms';
...
@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    consumptionForm = new FormGroup({
        amount: new FormControl('', [
            Validators.required,
            Validators.pattern(/^\d+$/)
        ]),
        desc: new FormControl('')
    });
    ...
}

FormControl 생성자에 2번째 변수로 넣어줬죠.

값을 입력했는지 여부를 required로 검증하구요.

Regular Expression 패턴 검증도 합니다.

amount에 숫자만 들어가는지 검증합니다.


2. Template에 Feedback 추가


유효성에 따라 적절한 Feedback을 줍니다.

<form class="consumption-form" (ngSubmit)="onAdd()" 
[formGroup]="consumptionForm">
  <mat-form-field>
    <input matInput
           formControlName="amount"
           placeholder="Amount" 
           type="text">
      <mat-error 
          *ngIf="consumptionForm.controls.amount.hasError('pattern') 
          && !consumptionForm.controls.amount.hasError('required')">
        <strong>Numbers</strong> only
      </mat-error>
      <mat-error
          *ngIf="consumptionForm.controls.amount.hasError('required')">
        Amount is <strong>required</strong>
      </mat-error>
  </mat-form-field>
  ...
  <button [disabled]="!consumptionForm.valid" 
          mat-stroked-button 
          color="accent" type="submit">Add</button>
</form>

mat-error가 아닌 span이어도 괜찮습니다.

material design 적용을 위한 태그입니다.

중요한 부분은 *ngIf directive 입니다.

(http://dschci.tistory.com/89)

FormControl에 오류가 있을 때만 표시되죠.


그리고 FormGroup도 영향을 받습니다.

FormGroup내 FormControl에 오류가 있다면

FormGroup도 유효하지 않은 상태가 되죠.

그에 따라 버튼을 disable 시켰습니다.


Angular에는 다양한 Validators가 준비되어있습니다.

자주쓰는 email 이나 최소, 최대길이 등이죠.

Validator를 직접 만들수도 있습니다.

boolean을 리턴하는 ValidatorFn을 만들면 되죠.

class Validators {
  static min(min: number): ValidatorFn
  static max(max: number): ValidatorFn
  static required(control: AbstractControl): ValidationErrors | null
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null
  static minLength(minLength: number): ValidatorFn
  static maxLength(maxLength: number): ValidatorFn
  static pattern(pattern: string | RegExp): ValidatorFn
  static nullValidator(control: AbstractControl): ValidationErrors | null
  static compose(validators: (ValidatorFn | null | undefined)[] | null): ValidatorFn | null
  static composeAsync(validators: (AsyncValidatorFn | null)[]): AsyncValidatorFn | null
}


Validation이 적용된 화면은 아래와 같습니다.


동작 화면


작업 중인 소스는 아래에서 확인가능합니다.


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


정보출처:

https://angular.io/api/forms/Validators



'IT Tech > Angular' 카테고리의 다른 글

Angular Router (NGXS)  (0) 2018.11.05
Angular Router  (0) 2018.10.31
Angular Forms (Simple)  (0) 2018.10.07
Angular State Management (NGXS) Code  (0) 2018.09.22
Angular State Management (NGXS)  (0) 2018.09.15

TechTrip IT Tech/Angular

Angular Forms (Simple)

2018. 10. 7. 19:43

프론트엔드 개발에서 Form은 필수적으로 사용됩니다.

로그인을 한다든지, 질문이나 댓글을 남기는 등 말이지요.


Angular 역시 Form을 쉽게 개발하도록 돕습니다.

데이터 바인딩, 유효성 검증, 에러 처리 관점에서요.

그럼 코드와 함께 보도록 하겠습니다.


0. Import ReactiveForms Module 


익숙한 과정이죠?

Angular의 모듈을 가져옵니다.

이번에는 Form에 관련된 모듈입니다.


app.module.ts 파일을 편집합니다.

import { FormsModule } from '@angular/forms';
...

@NgModule({
  ...
  imports: [
    ReactiveFormsModule,
... ], ... }) export class AppModule { }


1. Component ts 파일에 form control 추가


이제 컴포넌트 파일에 FormControl을 만들어줍니다.

html(템플릿)에 바인딩하기 위함입니다.

import { FormControl, FormGroup } from '@angular/forms';
...

@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    consumptionForm = new FormGroup({
        amount: new FormControl(''),
        desc: new FormControl('')
    });
    ...
}

보통 form은 여러개가 묶여있죠?

그룹핑 하기 위한 FormGroup도 사용하였습니다.



2. Template html에 form 태그 추가


말씀드렸듯이 html에 form을 추가하고 바인딩합니다.

fromGroup 속성에 컴포넌트의 FormGroup을 바인딩합니다.

익숙한 Property Binding이죠?

(http://dschci.tistory.com/81)

그리고 각각의 input에 FormControl을 할당해줍니다.

formControlName이라는 속성에 이름을 넣습니다.

저는 각각 amount, desc라고 명명했죠.

...
<form class="consumption-form" 
            (ngSubmit)="onSubmit()" 
            [formGroup]="consumptionForm">
  <mat-form-field>
    <input matInput
           formControlName="amount" 
           placeholder="Amount"
           type="text" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput
           formControlName="desc" 
           placeholder="Description" 
           type="text">
  </mat-form-field>
  <button mat-raised-button color="primary" type="submit">Add</button>
</form>
...

material을 위한 태그와 속성은 없어도 동작합니다.

(mat-form-field, matInput)

그럼 이제 마지막으로 submit 동작을 정의해줍니다.


3. Component에 submit 로직 추가


위 html에 보면 submit 타입의 버튼이 있습니다.

그 버튼이 눌렸을 때의 동작입니다.

form의 ngSubmit에 바인딩이 있죠.

ngForm의 ngSubmit Event Binding입니다.

(http://dschci.tistory.com/83)

컴포넌트의 onSubmit 메서드와 연결되어있죠.


아래 코드입니다.

control에 입력된 값에 접근하는 방법입니다.

FormGroup이 컴포넌트에 정의되어있죠?

쉽게 아래와 같이 접근 가능합니다.

...
@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    onSubmit() {
        let amount: number = Number(this.consumptionForm.controls.amount.value)
        let desc: string = this.consumptionForm.controls.desc.value
        ...
    }
}

위는 간단한 바인딩을 통한 Form 사용이었습니다.

동작화면은 FormsModule 기능이 좀 더 사용되었습니다.


Angular Forms 동작 화면


다음에는 데이터 검증 및 에러 피드백에 대해서 써볼게요.


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

'IT Tech > Angular' 카테고리의 다른 글

Angular Router  (0) 2018.10.31
Angular Forms (Validation)  (0) 2018.10.14
Angular State Management (NGXS) Code  (0) 2018.09.22
Angular State Management (NGXS)  (0) 2018.09.15
Npm 거슬리는 pacakge-lock.json?  (2) 2018.09.02

TechTrip IT Tech/Angular

Angular State Management (NGXS) Code

2018. 9. 22. 23:04

오늘은 지난 글에서 소개했던 ngxs의 코드를 살펴보겠습니다.


아래와 같은 순서로 만들어 가게 되는데요.


1. Action 추가 (소비 내역 추가)

2. State 추가 (하루 소비 내역)

3. Select 추가 (component에서 하루 소비 내역 조회)


1. Action 추가


action은 데이터를 변경하는 동작을 말합니다.

소비 내역을 추가하는 action을 정의하였습니다.

(저는 가계부를 만드는 개인 프로젝트 진행중입니다.)

import { Consumption } from "../domain/consumption";

export class AddConsumption {
    static readonly type = '[Budget Page] Add Consumption';
    constructor(public consumption: Consumption) {}
}

지난 번 생성한 Consumption 도메인을 활용합니다.


type에는 어떠한 action인지 설명을 적어줍니다.

ngxs 공식 페이지에서는 아래와 같은 규칙을 권장합니다.

- 명령이 수행되는 맥락 (ex: [User API],[Product Page])

- 행위를 설명하는 동사 (ex: Get, Add, Delete)

- 행위의 대상 Entity (ex: User, Product)


constructor는 추가할 consumption을 인자로 받습니다.


즉, 설명과 Action이 수행될 metadata를 정의해주는 것입니다.


2. State 추가


State의 이름과 기본값, action의 실제 동작을 정의합니다.

ngxs 코드의 가장 핵심 부분이라고 볼 수 있습니다.


State는 @State라는 annotation을 사용하여 정의합니다.

import { Action, State, StateContext } from '@ngxs/store';
import { DailyExpense } from '../domain/dailyExpense';
import { AddConsumption } from './budget.actions';

@State({
    name: 'dailyExpense',
    defaults: {
        datetime: new Date(),
        consumptions: [],
    }
})
export class DailyExpenseState {
    @Action(AddConsumption)
    addConsumption(context: StateContext, action:AddConsumption){
        const state = context.getState();
        context.setState({
            ...state,
            consumptions: [
                ...state.consumptions,
                // this is the new consumption instance that we add
                action.consumption,
            ],
        });
    }
}

name은 Store에서 State를 구분하는 역할을 합니다.

따라서 유일(Unique)한 이름을 부여해야만 합니다.


기본값은 날짜와 소비내역 배열로 하였습니다.


State class에는 action과 dependency를 정의합니다.

저는 아직 dependency는 정의하지 않았구요.

action만 정의하였습니다.


Action 추가에서 action의 class를 만들었죠.

실제 수행되는 코드는 State안에 있습니다.

@Action annotation을 사용합니다.

context와 action을 인자로 받는 method를 만듭니다.

context에는 ngxs Store에 저장된 State가 담겨있습니다.

그것을 가져와서 action을 수행합니다.


3. Select 활용


이제 실제로 Component에서 State를 활용해보겠습니다.

먼저 app.module.ts에 import를 해주어야합니다.

...
import { NgxsModule } from '@ngxs/store';
import { DailyExpenseState } from './budget/budget.state';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgxsModule.forRoot([
      DailyExpenseState
    ])
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ngxs 모듈에 정의한 State를 넣어주었습니다.


다음은 State를 사용할 Component의 코드를 보겠습니다.

...
import { Store, Select } from "@ngxs/store";
import { Observable } from 'rxjs';

@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    // ngxs select
    @Select(state => state.dailyExpense) dailyExpense$: Observable<DailyExpense>;

    // ngxs store dependency injection
    constructor(private store: Store) { }

    ngOnInit() {
        this.balance = this.budget;
        this.date = new FormControl(new Date());

        this.dailyExpense$.subscribe((dailyExpense) => {
            // using state data
            ...
        })
    }

    // using ngxs action 
    addConsumption(consumption: Consumption) {
        this.store
            .dispatch(new AddConsumption(consumption));;
    }
}

State를 조회하기 위해 @Select annotation을 사용합니다.

State중 가져올 값을 lambda 형태로 정의해주면 됩니다.

그리고 저장할 변수값을 정하죠. 

보통 $를 붙여서 state임을 표시합니다. 


타입을 보면 아시겠지만 state는 rxjs의 Observable 입니다.

따라서 subscribe하면 값이 화면에 동적으로 반영되죠.


state를 변경할 때는 설명드린바와 같이 action을 사용합니다.

action을 사용할 때에는 생성자에 주입한 Store를 이용합니다.

Store에 action 객체를 생성하여 dispatch하는 형태입니다.


복잡해보이지만 천천히 살펴보시면 쉽게 이해가 되실 겁니다.

지난 포스팅의 ngxs의 개념이 도움이 되실거에요.

(http://dschci.tistory.com/111)


아래는 ngxs를 기반으로 동작하는 화면입니다.


ngxs를 활용한 화면 예제


다음에는 동작화면의 Material Form에 대해 알아볼게요.

진행하는 작업은 github에서 보실 수 있습니다.


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

'IT Tech > Angular' 카테고리의 다른 글

Angular Forms (Validation)  (0) 2018.10.14
Angular Forms (Simple)  (0) 2018.10.07
Angular State Management (NGXS)  (0) 2018.09.15
Npm 거슬리는 pacakge-lock.json?  (2) 2018.09.02
Angular 업데이트(Update from 5 to 6)  (0) 2018.05.19

TechTrip IT Tech/Angular

Angular State Management (NGXS)

2018. 9. 15. 22:57

지난 번에는 Service를 만들어 비즈니스 로직을 분리해봤습니다.


원래 Service에 RxJS를 더해 직접 구현하려다가

(Angular 기본접근법은 그렇습니다) 

조금 변경하여 State Management 라이브러리를 도입하기로 하였습니다.

Application 복잡도는 낮지만 배움과 재미를 위한 개발이라서요.


라이브러리는 많은 선배 개발자들의 고민을 바탕으로 하고 있습니다.

그렇게 만들어진 좋은 구조를 익혀가는 것도 의미가 있다고 생각되었어요.


Angular의 State Management를 생각하면 먼저 떠오르는 것은 ngrx입니다.

하지만 저는 ngxs를 써보려고 합니다.


그 이유는 ngxs가 더 Angular 답기 때문입니다.


ngrx의 출발은 Angular가 아닌 React입니다.

React는 Redux라는 State Management 라이브러리를 가지고 있습니다. 

 ※ React는 Facebook에서 만든 Front-End Library

Redux를 Angular로 가져온 것이 바로 ngrx 입니다.

잘 사용하려면 먼저 Redux를 이해할 필요가 있습니다.

Redux를 이해하려면 React의 라이프사이클에 익숙해야하죠.

즉, Learning Curve가 높을 수 있습니다.


그에 반해 ngxs는 ngrx보다는 새로운 angular 전용 라이브러리입니다.


오늘은 ngxs의 간단한 소개를 할까 합니다.

ngxs는 4가지 중요한 개념이 있습니다.

(다른 State Management 라이브러리도 비슷한 개념을 가집니다.)


먼저 doc site의 설명을 그대로 가져오면 아래와 같습니다.

State: state를 정의하는 class

Action: 수행하는 action과 metadata에 대한 정보가 담긴 class 

Selects: Store에서 state의 일부를 가져오는 function

Store: state의 저장소이자, action, select를 관리하는 전역 객체


네 이해 안되실거에요. 저도 그렇습니다.


제가 작업하면서 개념적으로 이해한 것은 아래와 같습니다.

State: Angular Component가 화면에 보여줘야하는 데이터

Action: 서버와 통신(비동기)하고 데이터를 변경하는 역할

Selects: 데이터를 Angular Component에게 가져오는 역할

Store: State를 저장, action과 select를 관리/참조하는 중심


저는 머리 속에 아래 그림처럼 정리하였습니다.

사실 많은 부분을 생략하여 그린 그림입니다.

이해를 돕는 차원에서 봐주시면 될 것 같아요.


ngxs 중요 개념 (많은 부분 생략)


그래서 ngxs 라이브러리를 사용하면 좋은 점은 무엇일까요?

스스로 개발해야했던 부분이 이미 상당부분 구현되어있습니다.

아마도 제가 스스로 만드는 것보다 훨씬 잘 만들어져있겠죠.


서버와의 통신 부분이 구조화/모듈화될 수 있습니다.

코드 관리가 더 수월해지는 장점이 있습니다.


다음 포스팅에서는 실제 코드로 작성된 부분을 공유해볼게요.


정보출처:

ngxs document site - https://ngxs.gitbook.io/ngxs


'IT Tech > Angular' 카테고리의 다른 글

Angular Forms (Simple)  (0) 2018.10.07
Angular State Management (NGXS) Code  (0) 2018.09.22
Npm 거슬리는 pacakge-lock.json?  (2) 2018.09.02
Angular 업데이트(Update from 5 to 6)  (0) 2018.05.19
Angular Service 만들기  (2) 2018.05.13

TechTrip IT Tech/Angular

Tomcat 8 에서 WildFly(JBoss) 13 로...

2018. 9. 9. 15:58

Spring Boot 어플리케이션을 Tomcat에 배포하여 사용중이었습니다.

화면은 Vue.js로 개발하였고, Spring Boot는 API Server의 역할이었죠.


Tomcat에 war로 배포하여 사용하다가 WildFly로 이동하게 되었습니다.

이유는 기술 지원 그룹 분들이 WildFly가 익숙하기 때문이었습니다.

Tomcat이나 WildFly나 그게 그거라는 말씀만 덜컥 믿었죠.

시간상 기술적으로 충분히 검토될 수 없었습니다.


From Tomcat to WildFly


그러다보니 2가지 알 수 없는 에러에 부딪쳤습니다.


첫 번째 문제는 java.lang.ClassCastException 입니다.

Tomcat에서는 발생하지 않던 문제였고, WildFly로 옮기자 발생하였습니다.

org.apache.tomcat.websocket.server.WsServerContainer 

cannot be cast to io.undertow.websockets.jsr.ServerWebSocketContainer


이 문제는 Spring Boot의 dependency 설정을 변경해줘야 합니다.

Spring Boot의 내장 톰캣을 제외합니다.

그리고 undertow를 provided scope에 추가합니다.

<dependency>
    <groupid>org.springframework.boot</groupid>
    <artifactid>spring-boot-starter-web</artifactid>
    <exclusions>
	<exclusion>
	    <groupid>org.springframework.boot</groupid>
	    <artifactid>spring-boot-starter-tomcat</artifactid>
	</exclusion>
    </exclusions>
</dependency>
<dependency>
    <groupid>org.springframework.boot</groupid>
    <artifactid>spring-boot-starter-undertow</artifactid>
    <version>2.0.4.RELEASE</version>
    <scope>provided</scope>
</dependency>


두 번째 문제는 multipart/form-data 였습니다.

화면단 Vue.js에 API 서버로 파일을 전송하는 로직이 있습니다.

multipart/form-data를 이용하여 파일을 전송하죠.

매우 일반적인 상황입니다.


그러나 파일이 없는 multipart/form-data 요청시 문제가 발생하였습니다.

Create가 아닌 Update의 경우에도 같은 API를 사용합니다.

파일의 변경이 없을 경우가 바로 그런 경우입니다.

이 역시 Tomcat에서는 문제가 없었던 로직이죠.


이 문제는 파일 저장 API를 분리하여 해결하였습니다.

파일의 변경이 없는 경우에는 API를 호출하지 않도록 화면을 수정했죠.


Tomcat과 Wildfly(JBoss)는 비슷한듯 하지만 엄연히 다른 WAS 입니다.

어떤 이유에서든 기술적인 검토를 충분히 해야했습니다. 

아마 앞으로 어떤 문제가 더 생길지... 막연한 두려움이 생기네요.

TechTrip IT Tech