[Vue.js] EmailJS로 이메일 보내기

🔹 EmailJS 설명

EmailJS는 클라이언트 측 기술만 사용하여 이메일을 보낼 수 있도록 도와주는 JavaScript 라이브러리입니다. 서버가 필요하지 않기 때문에 지원되는 이메일 서비스 (gmail 등) 중 하나에 연결하고 사용하기만 하면 됩니다. 

무료 플랜은 한 달에 200건의 메일을 사용할 수 있습니다.

https://www.emailjs.com/pricing/

🔹 EmailJS 가입 및 설정

1. 사이트 접속 회원가입

https://www.emailjs.com/

Send email directly from your code | EmailJS

 

2. Email Service 생성 확인

3. Email Templates 생성 클릭

4. 전송할 항목 입력 후 저장

{{ payload }} 형태로 입력할 수 있습니다. Vue.js 코드에서 보낼 payload 명을 사용하면 됩니다.

5. Service ID, Template ID, Public Key 확인

이후 코드에서 위 3가지 정보를 사용합니다. 

각각 Email Service, Email Templates, Account 탭에서 확인할 수 있습니다.

 

🔹 Vue.js 적용하기

* Tutorial 문서: https://www.emailjs.com/docs/tutorial/overview/

1. 라이브러리 설치

npm i emailjs-com

 

2. methods 만들기

sendRequestEmail() {
      const payload = {
        from_name: this.from_name,
        to_name: this.to_name,
        message: this.message,
        form_name: this.form.name,
        form_title: this.form.title,
        form_content: this.form.content,
        form_time: new Date()
      }
      emailjs.send('service_id', 'template_id', payload, 'public_key')
        .then((res) => {
            console.log(res)
        }, (error) => {
            console.log(error)
        })
    },

3. 클릭 이벤트에 담아 실행

@click="sendRequestEmail"

 

🔹 Email 전송 확인

지정한 이메일에서 정상 작동을 확인 할 수 있습니다. 거의 즉각적으로 메일이 옵니다.

EmailJS 사이트 - History 탭에서도 확인할 수 있습니다. 브라우저 정보와 payload 모두 확인 가능합니다.

메일 전송에 문제가 있었다면 여기서 Resend도 지원합니다.