[typescript] Angular HTTP 통신

26 Dec 2023

typescript

Angular는 HTTP를 통해 서버와 통신하여 데이터를 가져오거나 업데이트하는 기능을 제공합니다. Angular에서 HTTP 통신을 사용하는 방법을 살펴보겠습니다.

HttpClient 모듈 가져오기

HTTP 통신을 위해 먼저 Angular의 HttpClient 모듈을 가져와야 합니다. HttpClientModule을 애플리케이션 모듈에 추가합니다.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ],
  // ...
})
export class AppModule { }

HTTP 요청 보내기

HTTP 요청을 보내려면 HttpClient를 사용합니다. 예를 들어, 서버에서 데이터를 가져오기 위해 GET 요청을 보내는 방법을 살펴보겠습니다.

import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

데이터 구독하기

HTTP 요청을 보내고 나면, 그에 대한 응답을 받아와서 처리해야 합니다. 이를 위해 Angular의 Observable을 사용하여 데이터를 비동기적으로 구독할 수 있습니다.

export class DataComponent implements OnInit {
  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getData().subscribe((data) => {
      // 데이터를 처리하는 로직을 작성합니다.
    });
  }
}

Angular를 사용하여 HTTP 통신을 하는 방법에 대해 간단히 알아보았습니다. 이를 통해 서버와의 효과적인 데이터 교환을 달성할 수 있습니다.

HttpClient 모듈 가져오기

HTTP 요청 보내기

데이터 구독하기

참고 자료