HttpClient로 외부 API 데이터 가져오기 & JSONPlaceholder로 간단한 GET 요청 실습하기 (Angular 16 기준)

서론

Angular 16에서는 HttpClient 모듈을 사용하여 외부 API와의 통신을 간편하게 처리할 수 있습니다. 이를 통해 데이터를 가져오거나 서버에 데이터를 보내는 작업이 쉽고 효율적이며, 특히 RESTful API와의 연동에 최적화되어 있습니다. 이번 글에서는 HttpClient 모듈을 사용해 JSONPlaceholder API에서 데이터를 가져오는 방법을 설명하고, GET 요청을 활용한 실습을 통해 Angular 애플리케이션에서 데이터를 불러오는 과정과 코드를 자세히 살펴보겠습니다.

본론

1. HttpClient 모듈 설정

Angular의 HttpClient 모듈을 사용하려면 HttpClientModule을 애플리케이션의 루트 모듈에 임포트해야 합니다. 이 모듈은 @angular/common/http 패키지에 포함되어 있으며, HttpClient를 사용해 HTTP 요청을 간편하게 처리할 수 있도록 도와줍니다.

먼저, HttpClientModule을 AppModule에 추가하여 HttpClient 서비스를 사용할 수 있도록 설정합니다.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // HttpClientModule 임포트

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule  // HttpClientModule 추가
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HttpClientModule: 이 모듈을 애플리케이션에 추가하면 Angular의 HttpClient 서비스를 사용할 수 있습니다.

2. HttpClient를 사용하여 GET 요청으로 외부 API 데이터 가져오기

다음으로, HttpClient를 사용하여 외부 API의 데이터를 가져오는 PostService를 생성합니다. 여기서는 JSONPlaceholder의 /posts 엔드포인트에 GET 요청을 보내 게시물 목록을 가져올 것입니다.

1) 서비스 생성하기

Angular CLI를 사용하여 PostService라는 이름의 서비스를 생성합니다.

ng generate service post

위 명령어를 실행하면 src/app/post.service.ts 파일이 생성됩니다. 이 파일에서 HttpClient를 사용하여 외부 API의 데이터를 요청하는 코드를 작성하겠습니다.

2) GET 요청을 통해 데이터 가져오기

HttpClient를 사용하여 JSONPlaceholder API에 GET 요청을 보내고, 게시물 목록 데이터를 받아오는 메서드를 PostService에 정의합니다.

// post.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PostService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // API 엔드포인트 URL

  constructor(private http: HttpClient) {}

  // GET 요청으로 게시물 목록 가져오기
  getPosts(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

apiUrl: JSONPlaceholder의 /posts 엔드포인트 URL을 지정합니다.
getPosts() 메서드: HttpClient의 get() 메서드를 사용하여 데이터를 요청하고, Observable 형태로 데이터를 반환합니다. Observable은 Angular의 RxJS에서 제공하는 타입으로, 비동기 데이터 처리를 용이하게 합니다.

3) 컴포넌트에 서비스 주입 및 데이터 처리

PostService를 AppComponent에 주입하고, 컴포넌트에서 getPosts() 메서드를 호출하여 게시물 목록을 가져와 화면에 표시합니다.

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { PostService } from './post.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  posts: any[] = []; // 게시물 데이터를 저장할 배열

  constructor(private postService: PostService) {}

  ngOnInit() {
    this.fetchPosts();
  }

  // 게시물 목록 가져오기
  fetchPosts() {
    this.postService.getPosts().subscribe({
      next: (data) => {
        this.posts = data;
      },
      error: (error) => {
        console.error('데이터를 불러오는 중 오류 발생:', error);
      }
    });
  }
}

PostService 주입: 컴포넌트의 생성자에 PostService를 주입하여 getPosts() 메서드를 사용할 수 있도록 합니다.
fetchPosts() 메서드: getPosts() 메서드를 호출하여 데이터를 가져오고, subscribe를 통해 데이터를 비동기적으로 처리합니다.
- next: 요청이 성공하면 data를 posts 배열에 할당하여 데이터를 저장합니다.
- error: 요청이 실패하면 콘솔에 오류 메시지를 출력합니다.

4) 템플릿에서 데이터 바인딩으로 게시물 목록 표시

이제 app.component.html 템플릿에서 *ngFor를 사용해 가져온 게시물 목록을 렌더링합니다.

<!-- app.component.html -->
<div>
  <h1>게시물 목록</h1>
  <ul>
    <li *ngFor="let post of posts">
      <h3>{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </li>
  </ul>
</div>

*ngFor="let post of posts": posts 배열을 반복하여 각 post 객체의 title과 body를 출력합니다.
{{ post.title }}: 게시물의 제목을 표시합니다.
{{ post.body }}: 게시물의 내용을 표시합니다.

3. 결과 확인 및 서버 실행

이제 Angular 애플리케이션을 실행하고 브라우저에서 결과를 확인합니다.

ng serve

브라우저에서 http://localhost:4200에 접속하면 JSONPlaceholder API에서 가져온 게시물 목록이 화면에 표시됩니다. Angular가 HttpClient를 사용해 외부 API로부터 데이터를 비동기적으로 가져오고, 이를 템플릿에 바인딩하여 동적으로 렌더링하는 것을 확인할 수 있습니다.

결론

이번 글에서는 Angular 16에서 HttpClient를 사용해 외부 API의 데이터를 가져오는 방법을 살펴보고, JSONPlaceholder의 /posts 엔드포인트에 GET 요청을 보내 데이터를 가져오는 실습을 진행했습니다. HttpClient는 RESTful API와의 통신을 쉽게 처리할 수 있는 도구로, 다양한 애플리케이션에서 데이터를 비동기적으로 가져오거나 전송하는 데 매우 유용합니다. HttpClient와 RxJS를 활용해 효율적인 데이터 통신을 구현해보세요.

Q&A 섹션

Q1: HttpClient의 주요 기능은 무엇인가요?
A1: HttpClient는 Angular의 HTTP 통신을 지원하는 서비스로, 주로 외부 API와 통신할 때 GET, POST, PUT, DELETE 등의 HTTP 요청을 손쉽게 처리할 수 있습니다.
Q2: subscribe는 무엇을 하는 역할인가요?
A2: subscribe는 Observable의 비동기 데이터를 받아 처리하는 메서드로, 데이터가 로드되면 next 콜백으로 결과를 받으며, 오류가 발생하면 error 콜백으로 처리합니다.
Q3: JSONPlaceholder 외에 실제 API를 사용할 때도 같은 방법을 적용할 수 있나요?
A3: 네, JSONPlaceholder가 아닌 실제 REST API에서도 같은 방식으로 HttpClient를 사용해 데이터를 가져오거나 보낼 수 있습니다.

12일차: Angular 16 Observable과 RxJS 기초 (0)	2024.11.23
10일차: Angular 16 반응형 폼과 폼 유효성 검사 기초 (0)	2024.11.16
9일차: Angular 16 템플릿 기반 폼으로 사용자 입력 받기 (0)	2024.11.15
8일차: Angular 16 Angular의 라우팅과 네비게이션 (0)	2024.11.13
7일차: Angular 16 서비스와 의존성 주입 (DI) 기초 (0)	2024.11.12

재우니의 블로그

11일차: Angular 16 에서 HTTP 요청하기