기상정보 API

Endpoint : GET api/weatherforecast

닷넷 코어 API를 만들면 기본으로 생성되는 더미 API이며

랜덤한 기상정보의 컬렉션을 내려다 준다. 이것을 사용하여 Angular에서 뷰화면을 구현해보자 

[
{
date: "2020-10-03T15:18:15.0754333+09:00",
temperatureC: -6,
temperatureF: 22,
summary: "Bracing",
},
{
date: "2020-10-04T15:18:15.0770259+09:00",
temperatureC: 33,
temperatureF: 91,
summary: "Chilly",
},
{
date: "2020-10-05T15:18:15.0770329+09:00",
temperatureC: -18,
temperatureF: 0,
summary: "Sweltering",
},
{
date: "2020-10-06T15:18:15.0770334+09:00",
temperatureC: -10,
temperatureF: 15,
summary: "Freezing",
},
{
date: "2020-10-07T15:18:15.0770335+09:00",
temperatureC: 12,
temperatureF: 53,
summary: "Balmy",
},
]


프론트 작업순서

  • 대응 모델 생성
  • 대응 서비스(어댑터) 생성
  • UI Component 작성
    # UI Component 생성
    ng generate component ./components/weatherforecast

    # UI가 사용할 서비스 추가
    ng generate service ./services/weatherforecast

    # 모델
    ng g class ./models/Weather --type=model

직접코드도 가능할테지만, 위와같이 AngularCli를 이용하면 필요한 요소의 템플릿코드 작성을 할수가 있다.


모델 생성

export class Weather {
    date: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
}

TS(TypeScript)가 대중화가 되기전,  스크립트형 개발방법에서 타잎을 지정하는것에 거부감이 있었던적이 존재했다.

코드가 비대해질수록  리팩토링,타잎유닛검사,실행전 에러검출등 TS가 유리한것은 사실이며

이것은, TS를 지원하는 개발툴의 지원으로  빠른 프로토타잎과 개발이라는 장점도 함께 가져감으로 

빠른 장점을 가진 동적 타잎이 사실은 타잎세이프하지 않은 개발방식이며 JS진영에서도 OOP와 함께 TypeSafe한 개발방식이 대중화 되기 시작하였다.


서비스생성

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Weather } from '../models/weather.model';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WeatherforecastService {

  private weatherUrl = 'api/weatherforecast/';

  constructor(private http: HttpClient) {
    console.log("Create WeatherforecastService"); 
  }

  /** GET heroes from the server */
  getWeather(): Observable<Weather[]> {
    console.log("Get Weather");  //TODO: 로깅모듈로 변경하기
    return this.http.get<Weather[]>(this.weatherUrl)
  }
}


UI 컴포넌트

weatherforecast.component.ts 
import { Component, OnInit } from '@angular/core';
import { Weather } from 'src/app/models/weather.model';
import { WeatherforecastService } from 'src/app/services/weatherforecast.service';

@Component({
  selector: 'app-weatherforecast',
  templateUrl: './weatherforecast.component.html',
  styleUrls: ['./weatherforecast.component.scss']
})
export class WeatherforecastComponent implements OnInit {

  headers = ["date", "temperatureC", "temperatureF", "summary"];

  weathers: Weather[]

  constructor(private weatherforecastService:WeatherforecastService) {
    console.log("Create WeatherforecastComponent"); 
  }

  ngOnInit(): void {
    console.log("Init WeatherforecastComponent");
    this.getWeathers();
  }

  getWeathers(): void{    
    this.weatherforecastService.getWeather()
      .subscribe(weathers => this.weathers = weathers);      
  }

}
weatherforecast.component.html 
<p>weatherforecast component</p>
<table id="weathers">
  <tr>
    <th *ngFor = "let column of headers">
      {{column}}
    </th>
  </tr>

  <tr *ngFor = "let weather of weathers">
    <td *ngFor = "let column of headers">
      {{weather[column]}}
    </td>
  </tr>
</table>
weatherforecast.component.scss 
table {
width: 50%;
border: 1px solid #444444;
}
th, td {
border: 1px solid #444444;
}


결과

app.component.html
<p>Admin Start</p>

<a href="https://angular.io/tutorial" target="_blank">앵귤라 듀토리얼</a>

<app-weatherforecast></app-weatherforecast>

<router-outlet></router-outlet>





  • No labels