앵귤러는 클라이언트 사이드 웹 애플리케이션을 개발하기 위한 프레임워크로, 서버로부터 데이터를 가져오기 위해 RESTful API와 통신해야 할 때가 많습니다. 이를 위해 앵귤러는 HTTP 모듈을 제공하며, 이 모듈을 사용하여 간편하게 API와 통신할 수 있습니다.

HTTP 모듈 사용하기

먼저, 앵귤러 HTTP 모듈을 사용하기 위해 HttpClient를 import 해야 합니다. 다음과 같이 앵귤러 컴포넌트 파일 상단에 추가합니다.

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

그리고 컴포넌트의 생성자에서 HttpClient를 인스턴스화합니다.

constructor(private http: HttpClient) { }

이제 API와 통신할 준비가 끝났습니다.

GET 요청

GET 요청을 통해 API로부터 데이터를 가져오는 방법은 다음과 같습니다.

this.http.get('/api/posts').subscribe((response) => {
  console.log(response);
});

위 코드에서 /api/posts는 요청할 API의 엔드포인트 URL입니다. get() 함수는 Observable 객체를 반환하며, subscribe()를 호출하여 비동기적으로 응답을 처리합니다. 응답은 콘솔에 출력되며, 필요에 따라 데이터를 가공하거나 화면에 표시할 수 있습니다.

POST 요청

POST 요청을 통해 새로운 데이터를 API로 전송하는 방법은 다음과 같습니다.

const postData = { title: '제목', content: '내용' };

this.http.post('/api/posts', postData).subscribe((response) => {
  console.log(response);
});

위 코드에서 /api/posts는 데이터를 전송할 API의 엔드포인트 URL입니다. post() 함수는 두 개의 매개변수를 받는데, 첫 번째는 엔드포인트 URL이고, 두 번째는 전송할 데이터입니다. 응답은 마찬가지로 subscribe() 함수로 비동기적으로 처리됩니다.

PUT 요청

PUT 요청을 통해 기존 데이터를 수정하는 방법은 다음과 같습니다.

const updatedData = { title: '수정된 제목', content: '수정된 내용' };

this.http.put('/api/posts/1', updatedData).subscribe((response) => {
  console.log(response);
});

위 코드에서 /api/posts/1는 수정할 데이터의 ID를 가진 API의 엔드포인트 URL입니다. put() 함수는 두 개의 매개변수를 받는데, 첫 번째는 엔드포인트 URL이고, 두 번째는 수정할 데이터입니다.

DELETE 요청

DELETE 요청을 통해 데이터를 삭제하는 방법은 다음과 같습니다.

this.http.delete('/api/posts/1').subscribe((response) => {
  console.log(response);
});

위 코드에서 /api/posts/1은 삭제할 데이터의 ID를 가진 API의 엔드포인트 URL입니다. delete() 함수는 삭제할 데이터의 엔드포인트 URL을 매개변수로 받습니다.

요약

앵귤러의 HTTP 모듈을 사용하여 RESTful API와 간편하게 통신할 수 있습니다. GET, POST, PUT, DELETE 요청 방법을 위 예시 코드를 통해 살펴보았습니다. 필요에 따라 응답을 가공하거나 화면에 표시할 수 있으며, 에러 처리나 인증 등의 추가적인 기능도 적용할 수 있습니다.

더 자세한 내용은 앵귤러 공식 문서를 참고하시기 바랍니다.