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

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

탈출 인증샷