angular2-hacker-news 웹앱 개발하기

완성된 웹애플리케이션의 모습은 상단의 이미지와 같다.

** 원문 https://houssein.me/angular2-hacker-news
** 소스 https://github.com/housseindjirdeh/angular2-hn

원본 블로그 내용의 장점은
“angular-cli”를 이용하여 빠르게 개발하는 방법을 설명했다는 것이고
설명대로만 하면 1~2시간 안에 위와 같은 애플리케이션이 실행된다.

본 글에서는 따라하는 중간에 설명이 부족한 부분만 추가해서 설명한다.
* 작업환경: 윈도우 10, VSCode 이용

# 설치가 제대로 안될 경우 ‘명령프롬프트’를 관리자 모드로 실행하여 수행
npm install -g angular-cli

# rxjs가 제대로 설치되어 있지 않다는 메시지가 나오면@5.0.1을 명시해서 별도 실행
npm install -g rxjs@5.0.1

# 설치 여부가 궁금하면 다음 명령을 실행 (있으면 설치된 것이다)
# 참고 : findstr은 윈도우에서 사용되는 grep 명령어임
npm ls -g | findstr “rxjs”

빠른 개발을 위해서는 개발도구의 도움이 크다.
VS Code의 확장프로그램 ‘Angular 2 TypeScript Snippets’를 설치하면 무척 편리하다.
%ec%ba%a1%ec%b2%98-vscode_%ed%99%95%ec%9e%a5%ea%b8%b0%eb%8a%a5-ts_snippets

꾸준히 따라갔는데도, 마지막 단계에서 제대로 된 결과가 나오지 않는다.
이것은 pipe 때문에 발생한 문제이다.

<!-- item.component.html -->
<div *ngIf="!item" class="loading-section"></div>
<div *ngIf="item">
<div class="item-laptop">

      <a class="title" href="{{item.url}}">
        {{item.title}}
      </a>
      <!-- 바로 요부분!! "item.url | domain" -->
      <span class="domain">{{item.url | domain}}</span>
<div class="subtext-laptop">
      {{item.score}} points by
      <a href="">{{item.by}}</a>
      <!-- 바로 요부분!! "(item.time | amFromUnix) | amTimeAgo" -->
      {{ (item.time | amFromUnix) | amTimeAgo }}
      <a href="">
        <span *ngIf="item.descendants !== 0">
          {{item.descendants}}
          <span *ngIf="item.descendants === 1">comment</span>
          <span *ngIf="item.descendants > 1">comments</span>
        </span>
        <span *ngIf="item.descendants === 0">discuss</span>
      </a></div>
</div>
<div class="item-mobile"></div>
</div>

블로그에서는 두가지 pipe를 사용했다.
1) domain : 사용자 정의 pipe (코드 작성)
– 출처 url에서 host 부분만 추출하는 pipe
2) amFromUnix, amTimeAgo : angular2-moment 모듈을 이용한 시간변환 pipe
– timestamp 값을 해당 국가의 기준시에 맞춰 출력 (moment.js의 angular2 버전)

** pipe 등록을 위한 추가작업 사항

1) ‘angular2-moment’ 라이브러리 추가
– 참고 https://github.com/urish/angular2-moment

npm install –save angular2-moment

2) ‘domain’ pipe 생성 및 코드 작성

ng generator pipe domain

생성된 파일 ‘domain.pipe.ts’에 다음 코드를 작성한다.
코드 https://github.com/housseindjirdeh/angular2-hn/blob/first-page/src/app/domain.pipe.ts

3) 두 pipe 모듈을 app.module.ts 에 등록시킨다.

// ...
import { DomainPipe } from './domain.pipe';
import {MomentModule} from 'angular2-moment';

@NgModule({
  declarations: [
    // ...
    DomainPipe
  ],
  imports: [
    // ...
    MomentModule
  ],
  // ...
})

// ...

4) 외부실행을 위해 ‘package.json’에 ‘ng serve –host 0.0.0.0’을 수정한다

"scripts": {
"start": "ng serve –host 0.0.0.0",
},

이제 실행해 보자. (잘된다!! 냐하~~~)

완성된 소스 ==> https://github.com/maxmin93/angular2-hn-copy

어떤가? 신기하지 않은가? 즐공~ ^^

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: