NestJS를 사용한 자바스크립트 프로젝트의 프론트엔드 통신 구현 방법

08 Nov 2023

nestjs

NestJS는 JavaScript 및 TypeScript 기반의 서버 사이드 애플리케이션을 개발하기위한 프레임워크입니다. 이 프레임워크를 사용하면 백엔드 로직을 구현하고 API 통신을 처리하는 데 도움을 받을 수 있습니다. 그러나 NestJS는 프론트엔드와의 통신을 직접 처리하지 않으므로 프론트엔드 코드에서 통신 구현을 해야합니다.

이 글에서는 NestJS와 함께 자바스크립트 프로젝트의 프론트엔드와 통신하는 방법을 알아보겠습니다.

Ajax를 사용한 통신

NestJS를 사용한 자바스크립트 프로젝트에서 가장 일반적으로 사용되는 통신 방법은 Ajax입니다. Ajax를 사용하면 비동기적으로 서버와 통신하고 데이터를 가져올 수 있습니다.

// 예시: GET 요청 보내기
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/api/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    const responseData = JSON.parse(xhr.responseText);
    // 서버로부터 받은 데이터를 처리하는 로직 작성
  }
};
xhr.send();

위의 코드는 GET 요청을 보내는 예시입니다. XMLHttpRequest 객체를 사용하여 요청을 생성하고, open() 메소드를 사용하여 요청을 설정합니다. onreadystatechange 이벤트 핸들러를 사용하여 서버로부터 응답을 받았을 때 데이터를 처리할 수 있습니다.

POST, PUT, DELETE와 같은 다른 유형의 요청을 보내는 방법도 유사합니다. xhr.open() 메소드에 사용할 메서드를 지정하고 요청에 필요한 데이터를 send() 메소드로 보냅니다.

Fetch API를 사용한 통신

XMLHttpRequest 대신 Fetch API를 사용하여 통신을 처리할 수도 있습니다. Fetch API는 더욱 간편하고 강력한 기능을 제공합니다.

// 예시: GET 요청 보내기
fetch('http://localhost:3000/api/data')
  .then(response => response.json())
  .then(data => {
    // 서버로부터 받은 데이터를 처리하는 로직 작성
  })
  .catch(error => {
    // 에러 처리
  });

위의 코드는 GET 요청을 보내는 예시입니다. fetch() 함수를 사용하여 요청을 보내고 then() 메소드를 사용하여 응답을 처리합니다. 응답 데이터는 .json() 메소드를 사용하여 JSON 형식으로 변환됩니다.

POST, PUT, DELETE 등 다른 유형의 요청을 보내는 방법도 매우 유사하며, fetch() 함수의 두 번째 인수인 옵션 객체를 사용하여 요청을 설정할 수 있습니다.

Axios를 사용한 통신

Axios는 HTTP 요청을 보낼 때 사용되는 인기있는 자바스크립트 라이브러리입니다. NestJS 프로젝트에서 프론트엔드와의 통신을 간단하게 처리할 수 있도록 도와줍니다.

먼저 axios를 설치해야합니다.

npm i axios

그런 다음 axios를 사용하여 요청을 보낼 수 있습니다.

// 예시: GET 요청 보내기
axios.get('http://localhost:3000/api/data')
  .then(response => {
    const responseData = response.data;
    // 서버로부터 받은 데이터를 처리하는 로직 작성
  })
  .catch(error => {
    // 에러 처리
  });

Axios는 get(), post(), put(), delete()와 같은 메소드를 제공하여 다양한 유형의 요청을 보낼 수 있습니다. 응답 객체에서 .data 속성을 사용하여 서버로부터 받은 데이터에 액세스할 수 있습니다.

정리

이 글에서는 NestJS와 함께 자바스크립트 프로젝트의 프론트엔드와 통신하는 방법을 알아보았습니다. Ajax, Fetch API, 그리고 Axios를 사용하여 각각 통신을 처리하는 방법을 설명하였습니다. 프론트엔드와의 통신은 NestJS의 역할이 아니므로 개발자는 이러한 통신 메커니즘들을 활용하여 프론트엔드와의 원활한 통신을 구현해야합니다.

더 자세한 정보는 NestJS 문서를 참조하시기 바랍니다.

#NestJS #Javascript