자바스크립트(EmailJS)로 메일보내기를 사용하려고 합니다.
해당 JS를 이용하여 이메일을 보내봅시다.
이 외에도 mailgun, sendGrid 등... 여러가지 메일을 보내는 서비스가 있습니다.
회원가입을 간단하게 마치시고
제공하는 서비스 목록입니다.
주로 Gmail을 사용할것으로 예상됩니다.
해당 Serivce 아이디를 잘 정해서 저장해봅시다.
설치
nodeJs 를 이용할 경우
$ npm install emailjs-com --save
그냥 스크립트를 사용할 경우
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.4.1/dist/email.min.js"> </script>
<script type="text/javascript">
(function(){
emailjs.init("YOUR_USER_ID");
})();
</script>위와 같은 스크립트를 추가하셔야합니다.
유저 아이디는 로그인하셔서 Account 탭에서 확인 할 수 있습니다.
보내기
첫번째는 객체를 이용하여 보내기 입니다.
var templateParams = {
name: 'James',
notes: 'Check this out!'
};
emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
}, function(error) {
console.log('FAILED...', error);
});
폼 테그를 이용하여 보내기
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', '#myForm')
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
}, function(error) {
console.log('FAILED...', error);
});
해당 사용하는 서비스 아이디와 템플릿 아이디는 로그인을 하여 서비스를 등록하시면 확인 할 수 있습니다.
아래와 같습니다.
템플릿을 변경하면
성명 : {{username}}
E-mail : {{email}}
생년월일 : {{dateOfBirth}}
주소 : {{address}}
파메메터에 보낸 변수명을 통해서 전달됩니다.
이런식으로 {{ }} 안에 변수명을 사용하여 주시면 됩니다.
이 외에도 REST API 를 제공하여 설치하지 않고도 이메일을 보내실 수 있습니다.
// code fragment
var data = {
service_id: 'YOUR_SERVICE_ID',
template_id: 'YOUR_TEMPLATE_ID',
user_id: 'YOUR_USER_ID',
template_params: {
'username': 'James',
'g-recaptcha-response': '03AHJ_ASjnLA214KSNKFJAK12sfKASfehbmfd...'
}
};
$.ajax('https://api.emailjs.com/api/v1.0/email/send', {
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json'
}).done(function() {
alert('Your mail is sent!');
}).fail(function(error) {
alert('Oops... ' + JSON.stringify(error));
});이런식 입니다.
보낸 요청에 대한 히스토리도
GET https://api.emailjs.com/api/v1.1/history
{
'user_id' : '',
'accessToken : '',
'page' : '',
'count : '',
'errors_only: ''
}
| user_id | Yes | User ID of the account |
| accessToken | Yes | Access Token of the account |
| page | No | A current page |
| count | No | Records in one page |
| errors_only | No | Get only failed records |
위 요청으로 POSTMAN 등...을 사용하여서 보내주시면 됩니다.
아래는 공식 홈페이지에서 제공하는 React와 Vue에서 사용하는 예제 입니다.
ReactJS
import React from 'react';
import emailjs from 'emailjs-com';
import './ContactUs.css';
export default function ContactUs() {
function sendEmail(e) {
e.preventDefault();
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
}
return (
<form className="contact-form" onSubmit={sendEmail}>
<input type="hidden" name="contact_number" />
<label>Name</label>
<input type="text" name="user_name" />
<label>Email</label>
<input type="email" name="user_email" />
<label>Message</label>
<textarea name="message" />
<input type="submit" value="Send" />
</form>
);
}
VueJS
<template>
<form class="contact-form" @submit.prevent="sendEmail">
<label>Name</label>
<input type="text" name="user_name">
<label>Email</label>
<input type="email" name="user_email">
<label>Message</label>
<textarea name="message"></textarea>
<input type="submit" value="Send">
</form>
</template>
<script>
import emailjs from 'emailjs-com';
export default {
methods: {
sendEmail: (e) => {
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
.then((result) => {
console.log('SUCCESS!', result.status, result.text);
}, (error) => {
console.log('FAILED...', error);
});
}
}
}
</script>
이러한 기능으로 손쉽게 메일을 보낼 수 있습니다.
이만 포스팅을 마치겠습니다.
이 글이 도움이 되었다면 공감과 +a 꾹♥
