Angular HTTP

0. HTTP 통신을 위해 app.config 에 모듈을 로드합니다.
   

npx nx generate service --project 프로젝트명

import { Injectable } from '@angular/core';
import {
  HttpClient,
  HttpContext,
  HttpHeaders,
  HttpParams,
} from '@angular/common/http'; // HTTP 통신을 위해 로드
import { environment } from '../../environments/environment'; // 방금 전에 만든 서버 관련 상수값 로드

export type HttpServiceOptions = {
  headers?:
    | HttpHeaders
    | {
        [header: string]: string | string[];
      };
  context?: HttpContext;
  observe?: 'body';
  params?:
    | HttpParams
    | {
        [param: string]:
          | string
          | number
          | boolean
          | ReadonlyArray<string | number | boolean>;
      };
  reportProgress?: boolean;
  responseType?: 'json';
  withCredentials?: boolean;
};

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

  private readonly baseUrl = `${environment.baseUrl}`; // 상수 baseUrl 속성에 할당

  constructor(private readonly httpClient: HttpClient) {}

  get<T>(url: string, option?: HttpServiceOptions) { // 조회용
    return this.httpClient.get<T>(`${this.baseUrl}/${url}`, {
      ...option,
    });
  }

  post<T>(url: string, body: any, option?: HttpServiceOptions) { // 데이터 전송
    return this.httpClient.post<T>(`${this.baseUrl}/${url}`, body, {
      ...option,
    });
  }

  put<T>(url: string, body: any, option?: HttpServiceOptions) { // 데이터 전송
    return this.httpClient.put<T>(`${this.baseUrl}/${url}`, body, {
      ...option,
    });
  }

  patch<T>(url: string, body: any, option?: HttpServiceOptions) { // 수정
    return this.httpClient.patch<T>(`${this.baseUrl}/${url}`, body, {
      ...option,
    });
  }

  delete<T>(url: string, option?: HttpServiceOptions) { // 삭제
    return this.httpClient.delete<T>(`${this.baseUrl}/${url}`, {
      ...option,
    });
  }
}

import { HttpService } from '../../services/http.service';
import { environment } from 'apps/client/src/environments/environment';

constructor(
    private scrollService: ScrollService,
    private router: Router,
    private httpService: HttpService // 좀 전에 생성한 서비스 의존성 주입
  ) {}
  
  
  ngOnInit() { // 페이지 첫 로드 시 데이터를 조회하도록 onInit 후크에서 호출
    this.getItems();
  }
  
  
  getItems() { // 데이터 조회 메소드 선언
  
    this.httpService
      .get<any>(`${environment.projectId}`)
      .subscribe({ // httpService.get : 메소드는 observable 타입을 리턴하므로 곧바로 subscribe 구독
        next: (res) => { // res: 임의로 정한 변수명으로 이 인스턴스에는 서버로부터 받은 응답데이터가 담겨있습니다.
          console.log(res); // 출력으로 알맞게 데이터가 도착했는지 확인
        },
      });
  }