앵귤러 마스터북 리뷰

앵귤러 마스터북 중간 리뷰

현재까지 1/3 정도 보았다.

이미지에서도 볼 수 있지만 한 줄 한줄 설명이 잘 되어 있고 어색한 번역은 없었다.

다만 현재 youtube search 관련한 예제에 RxJs부분이 나오는데 최신 버전의 내용이 아니라서

꽤나 삽질?을 했었다. RxJs 6.0~ 이후 부터는 map, filter등의 오퍼레이터 함수들이 

도트 체이닝 방식이 아니고 pipe 오퍼레이터 방식만 제공한다.

그리고 간간히 이렇게까지 예제를 복잡하게 구성할 필요가 있을까? 라는 의문이 드는 부분이

군데군데 있다. 쿼리 파라미터들을 아래와 같이 표현하고 있다.

search(query:string):Observable<SearchResult[]>{
  const params:string=[
    `q=${query}`,
    `key=${this.apiKey}`,
    `part=snippet`,
    `type=video`,
    `maxResults=10`
  ].join('&');
  const queryUrl=`${this.apiUrl}?${params}`;
  return this.http.get<SearchResult[]>(queryUrl)
    .pipe(
      map( response => {
        return <any>response['items'].map(item =>{
          return new SearchResult({
            id:item.id.videoId,
            title:item.videoId,
            description:item.snippet.description,
            thumbnailUrl:item.snippet.thumbnails.high.url
          })
        })
      } )
    )
}

이것을 그냥 아래처럼 클래스 메서드 2개로 나누어 보았다.

쿼리 파라미터를 HttpParams로 구성하는게 더 명확해 보이는 느낌이 든다. 

그리고 개인적으로 한 함수안에 연달아 return을 2개 이상 쓰면 괜히 짜증이 밀려오는....

그래서 그거 마구 고쳐버리고 싶은 욕구가 불타오른다.....

( 아래 코드에 대한 설명은 하지않겠다. )

getQueryParams(query) {

  const params = new HttpParams()
    .set('q', query)
    .set('key', YOUTUBE_API_KEY)
    .set('part', 'snippet')
    .set('type', 'video')
    .set('maxResults', '10');

  return this.http.get<SearchResult[]>( YOUTUBE_API_URL, {params} );
}

getUser(items) {
  return items.map( item =>{
    return new SearchResult({
      id:item.id.videoId,
      title:item.videoId,
      description:item.snippet.description,
      thumbnailUrl:item.snippet.thumbnails.high.url
    });
  });
}

그 외에 form, service 파트 부분을 간단하게 언급하고 넘어간 것이 아쉬웠지만

뒤에 예제에서 더 다루기에 앞단에서 간단히 제시한 듯 보였다.