[javascript] Axios를 사용하여 이메일 전송 API 호출하기

21 Nov 2023

javascript

이번 블로그 포스트에서는 JavaScript의 Axios 라이브러리를 사용하여 이메일 전송 API를 호출하는 방법에 대해 알아보겠습니다.

Axios는 브라우저와 Node.js에서 모두 사용할 수 있는 HTTP 클라이언트 라이브러리로, 간편한 API 호출을 위해 많이 사용됩니다. 이번 예제에서는 Axios를 사용하여 이메일 전송 API를 호출하는 방법을 보여드리겠습니다.

1. Axios 설치 및 모듈 import

먼저, Axios를 설치하고 프로젝트에 모듈을 import해야 합니다. 다음 명령어를 사용하여 Axios를 설치해보세요.

npm install axios

설치가 완료되면, JavaScript 파일 상단에 Axios를 import해주세요.

const axios = require('axios');

2. API 호출하기

모듈을 import했으니 이제 API를 호출해보겠습니다. 예를 들어, 이메일 전송을 위한 API endpoint가 https://example.com/api/sendEmail 라고 가정해봅시다.

axios.post('https://example.com/api/sendEmail', {
    to: 'john@example.com',
    subject: 'Hello',
    message: 'This is a test email'
})
.then(function (response) {
    console.log('Email sent successfully');
})
.catch(function (error) {
    console.error('Error sending email:', error);
});

Axios의 post 메소드를 사용하여 API endpoint와 전송할 데이터를 지정합니다. 위의 예시에서는 수신자 이메일 주소, 제목, 그리고 내용을 전송하고 있습니다. 성공적으로 이메일이 전송되었을 경우 then 블록이 실행되고, 에러가 발생했을 경우 catch 블록이 실행됩니다.

3. 응답 처리하기

API 호출 후 서버로부터 받은 응답을 처리해야 할 때도 있습니다. 이메일 전송 API의 경우, 성공 여부와 같은 정보를 받을 수 있으므로 응답을 처리하는 방법을 알아봅시다.

axios.post('https://example.com/api/sendEmail', {
    to: 'john@example.com',
    subject: 'Hello',
    message: 'This is a test email'
})
.then(function (response) {
    // 응답 데이터에 접근해 원하는 작업 수행
    console.log(response.data);
})
.catch(function (error) {
    console.error('Error sending email:', error);
});

then 블록 내부에서 response.data를 이용하여 API 응답 데이터에 접근할 수 있습니다. 이를 활용해 원하는 작업을 수행하면 됩니다.

결론

이번 포스트에서는 Axios를 사용하여 이메일 전송 API를 호출하는 방법에 대해 살펴보았습니다. Axios의 간편한 API 호출 방법과 응답 처리 방법을 익히면, 서버와의 통신을 좀 더 효율적이고 편리하게 할 수 있습니다.