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

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

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

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

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

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

개인 프로젝트용으로 AWS 무료 사용 중입니다.

간혹 잘못 사용하여 과금되기도 했었죠.

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

사실 AWS 사용 전 가입 때 문제가 있었습니다.

같은 문제를 겪는 분이 있으실까 공유합니다.

AWS 가입은 간단한 편이니 과정은 생략!

주의할 점은 주소는 영어로 입력해야하는 것 입니다.

그럼 문제를 겪은 포인트부터 가겠습니다.

바로 전화 번호 확인입니다.

전화번호 인증 화면

'지금 전화하기' 버튼을 클릭했습니다.

하지만 전화 거는 중이라면서 전화가 오지 않아요.

당황 스럽습니다.

여러번 시도해도 마찬가지 였습니다.

게다가 최대 시도 횟수를 초과하고 맙니다

AWS에 로그인은 됩니다.

다만 모든 기능을 이용할 수 없을 뿐.

지원센터에 문의를 남깁니다.

지원 신청

언어는... 아쉽게도 일본어, 영어밖에는 안됩니다.

아래와 같이 contact을 합니다.

(그래도 비교적 영어가 익숙하잖아요?)

제목은 간단하게.

내용(description)은 저의 상황 설명이죠.

Support Dashboard에서 Live Chat 옵션을 발견합니다.

클릭하면 아래와 같이 바로 대화를 진행하게 됩니다.

AWS Live Chat

채팅하던 직원이 직접 전화를 해줍니다.

30초 가량 확인 전화에요.

영어로 이야기하지만 내용은 간단합니다.

요지는 "채팅하던 그 분 맞나요?"

당연히 Yes. 바로 검증 절차를 완료해줍니다.

간단하게 5분 안에 절차가 완료됩니다.

꽤나 만족스러운 경험이었어요.

친절합니다.

AWS는 무료로(?) 지금까지 잘 사용하고 있습니다.

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

같은 어려움을 겪는 분들께 도움이 되면 좋겠네요.

무료 사양은 아래와 같습니다.

CPU: Intel Zeon 2.5GHz 

MEMORY: 1GB

STORAGE: 30GB

넉넉하진 않지만 테스트용으로는 충분합니다.