[javascript] 앵귤러와 RESTful API 개발

05 Dec 2023

javascript

앵귤러와 RESTful API를 함께 사용하여 웹 애플리케이션을 개발하는 방법에 대해 알아보겠습니다. 앵귤러는 자바스크립트 기반의 프론트엔드 프레임워크로, SPA(Single Page Application)를 개발할 때 많이 사용됩니다. RESTful API는 네트워크를 통해 데이터를 주고받을 수 있는 형태의 웹 서비스입니다.

앵귤러 설치하기

앵귤러를 사용하기 위해서는 먼저 Node.js와 npm을 설치해야 합니다. 그런 다음, 다음 명령을 사용하여 앵귤러를 글로벌로 설치합니다.

npm install -g @angular/cli

앵귤러 프로젝트 생성하기

앵귤러 프로젝트를 생성하기 위해서는 다음 명령을 사용합니다.

ng new my-app

이 명령은 “my-app”이라는 이름의 새로운 앵귤러 프로젝트를 생성합니다.

RESTful API 개발하기

앵귤러 프로젝트에서 RESTful API를 사용하기 위해 HTTP 클라이언트 모듈을 사용할 수 있습니다. HttpClientModule을 임포트하고, HttpClient를 사용하여 API 요청을 보낼 수 있습니다.

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

...

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

API 요청을 보내기 위해 서비스를 생성하고, HttpClient를 주입한 후에 사용할 수 있습니다. 다음은 간단한 GET 요청을 보내는 예제입니다.

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

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

  private apiUrl = 'https://api.example.com';

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get(`${this.apiUrl}/data`);
  }
}

앵귤러 컴포넌트에서 이 서비스를 사용하여 API 요청을 수행할 수 있습니다.

import { Component } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ data }}</h1>
  `
})
export class AppComponent {

  data: any;

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.getData().subscribe((response: any) => {
      this.data = response;
    });
  }
}

결론

앵귤러는 RESTful API와 함께 사용할 수 있는 강력한 웹 개발 도구입니다. 앵귤러 프로젝트에서 HTTP 클라이언트를 사용하여 API 요청을 보내고 응답을 처리할 수 있습니다. RESTful API를 개발하고 앵귤러와 연동하는 것은 웹 애플리케이션 개발에 많은 도움이 될 수 있습니다.

참고 자료: