Computer >> 컴퓨터 >  >> 소프트웨어 >> 메일

EmailJS로 Vue.js 애플리케이션에서 이메일 보내는 완벽 가이드

얼마 전 저는 간단한 Vue 프로젝트를 진행하면서 새로 만든 연락처 폼을 통해 이메일을 전송하는 기능이 필요했습니다. 누군가 제 연락처 폼을 작성할 때마다 자동으로 이메일을 받고 싶었죠.

그래서 여러 가지를 검색하다가 EmailJS를 발견했습니다. 공식 문서도 잘 정리되어 있고 사용법도 정말 쉬워서, 이 경험을 글로 정리해 공유하기로 했습니다. 이 글이 도움이 되길 바랍니다 :)

시작하기

이 글에서는 EmailJS를 사용해 Vue.js 애플리케이션에서 이메일을 보내는 방법을 단계별로 알아보겠습니다.

본격적으로 시작하기 전에 컴퓨터에 Vue CLI가 설치되어 있다고 가정합니다. 이 글에서는 Vue CLI로 간단한 데모 프로젝트를 만들 예정이기 때문입니다. 아직 설치하지 않으셨다면 먼저 Vue CLI 설치 방법을 확인해 주세요.

다음 명령어로 프로젝트를 생성합니다:

vue create vue-emailjs-demo

기본 프리셋을 사용할지, 기능을 직접 선택할지 묻는 프롬프트가 나타나면 default를 선택하세요.

새 프로젝트 디렉터리가 생성되면 다음 명령어로 해당 디렉터리로 이동합니다:

cd vue-emailjs-demo

EmailJS란 무엇이고 어떻게 설치하나?

EmailJS는 클라이언트 측 기술만으로 이메일을 보낼 수 있게 해주는 서비스입니다. 별도의 서버가 필요 없습니다. 지원되는 이메일 서비스 중 하나를 EmailJS에 연결하고, 이메일 템플릿을 만든 뒤, JavaScript 라이브러리로 이메일 발송을 트리거하기만 하면 됩니다.

코드 작성에 앞서 EmailJS 계정을 먼저 만들어야 합니다. 계정이 있으면 이메일 템플릿을 생성하고 자동 발송되는 이메일을 받을 주소를 지정할 수 있습니다.

새 계정으로 로그인하면 대시보드로 이동하게 됩니다.

이메일 템플릿 만들기

이메일 템플릿은 거의 모든 필드(예: 제목, 내용, 받는 사람 이메일, 보내는 사람 이름 등)에 동적 변수를 포함할 수 있습니다. 이 변수들은 JavaScript 호출을 통해 채워지는데, 곧 자세히 살펴보겠습니다.

먼저 이메일 서비스를 추가합니다. 저는 Gmail을 선택했지만, 필요에 맞는 서비스를 자유롭게 선택하시면 됩니다.

또한 Service ID 이름을 정하는 게 번거롭다면 검색 아이콘을 클릭하세요. ID가 자동으로 생성됩니다.

다음으로 이메일 템플릿을 만듭니다. 템플릿 페이지로 이동해 새 템플릿을 생성하세요. 이메일 템플릿은 이메일의 제목, 본문 내용, 수신 주소 등을 정의하는 역할을 합니다.

EmailJS로 Vue.js 애플리케이션에서 이메일 보내는 완벽 가이드

위 이미지에서 {{from_name}}처럼 이중 중괄호로 감싼 부분이 변수입니다. 사용자가 폼을 작성하면 그 정보를 이 변수들을 통해 EmailJS에 전달하게 됩니다.

템플릿에서 사용할 수 있는 주요 필드를 정리하면 다음과 같습니다:

  • Subject(제목): 이메일의 제목입니다.
  • Content(내용): 이메일 본문입니다. 여기에 사용자의 메시지, 이름, 회신 주소를 담을 예정입니다.
  • To Email(받는 이메일): 이메일이 전달될 수신 주소입니다.
  • From Name(보내는 이름): 선택 사항이며, 원하는 이름을 입력할 수 있습니다.
  • From Email(보내는 이메일): 수신자에게 표시되는 발송자 이메일 주소입니다. 'Default email address' 체크박스가 활성화되어 있으면 EmailJS가 사용 중인 이메일 서비스에 연결된 주소를 대신 사용합니다.
  • Reply To(회신 주소): 회신을 받을 이메일 주소를 설정합니다.
  • BCC와 CC: 지정한 여러 주소에게 메시지 사본을 함께 보낼 때 사용하는 필드입니다. 이 가이드에서는 최대한 단순하게 유지하기 위해 Reply To, BCC, CC는 다루지 않습니다. 더 자세한 정보가 필요하면 EmailJS 공식 문서를 참고하세요.

참고: 이 글의 뒷부분에서 Service ID와 Template ID를 사용하게 됩니다. 또한 User ID도 필요한데, 대시보드의 Integration(통합) 메뉴에서 확인할 수 있습니다. 이 값들을 미리 클립보드에 복사해 두었다가 필요할 때 붙여넣으면 편리합니다.

애플리케이션에 EmailJS 설치하기

이제 코드로 넘어가겠습니다 :) 애플리케이션에 EmailJS를 설치하려면 다음 명령어를 실행하세요:

npm install emailjs-com --save

아주 간단한 연락처 폼에서 이메일을 보낼 것입니다. 이 폼은 보내는 사람의 이름, 이메일, 메시지 내용을 수집합니다. 정말 간단하죠!

Vue CLI로 프로젝트를 생성할 때 자동으로 만들어진 HelloWorld.vue 컴포넌트를 수정해도 되고, ContactForm.vue라는 새 컴포넌트를 만들어도 됩니다. 저는 후자를 선택하겠습니다.

아래에서 연락처 폼 컴포넌트인 ContactForm.vue를 만들어 보겠습니다. 먼저 template부터 시작합니다:

<template>
    <div class="container">
        <form>
          <label>Name</label>
          <input 
            type="text" 
            v-model="name"
            name="name"
            placeholder="Your Name"
          >
          <label>Email</label>
          <input 
            type="email" 
            v-model="email"
            name="email"
            placeholder="Your Email"
            >
          <label>Message</label>
          <textarea 
            name="message"
            v-model="message"
            cols="30" rows="5"
            placeholder="Message">
          </textarea>
          
          <input type="submit" value="Send">
        </form>
    </div>
</template>

마크업 구조 설명

앞서 언급했듯이 아주 단순한 연락처 폼에서 이메일을 보냅니다. 폼 내용을 담을 div 요소를 만들고, 스타일을 적용하기 위해 div에 container 클래스를 추가합니다.

<style scoped>
* {box-sizing: border-box;}

.container {
  display: block;
  margin:auto;
  text-align: center;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 50%;
}

label {
  float: left;
}

input[type=text], [type=email], textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
</style>

다음 명령어로 개발 서버를 실행할 수 있습니다:

npm run serve

브라우저에서 localhost:8080을 열면 작성한 폼이 화면에 표시됩니다:

EmailJS로 Vue.js 애플리케이션에서 이메일 보내는 완벽 가이드

이제 폼 데이터 제출을 처리할 sendEmail 메서드를 만들 차례입니다. 그 전에 파일에서 emailjs를 임포트해야 합니다.

script 태그 바로 아래에 다음 줄을 추가하세요:

import emailjs from 'emailjs-com';

아래는 script에 필요한 나머지 코드입니다:

<script>
export default {
  name: 'ContactUs',
  data() {
    return {
      name: '',
      email: '',
      message: ''
    }
  },
  methods: {
    sendEmail(e) {
      try {
        emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target,
        'YOUR_USER_ID', {
          name: this.name,
          email: this.email,
          message: this.message
        })

      } catch(error) {
          console.log({error})
      }
      // Reset form field
      this.name = ''
      this.email = ''
      this.message = ''
    },
  }
}
</script>

코드 동작 원리

위 코드에서는 try...catch를 사용했지만 반드시 사용할 필요는 없습니다. Service ID, Template ID, User ID를 클립보드에 복사해 두라고 안내했던 부분이 기억나시나요? 이제 바로 그 순간입니다! 스니펫의 해당 부분을 여러분의 실제 값으로 교체하세요.

emailjs.sendForm()은 Service ID, Template ID, User ID와 sendEmail()에 전달된 폼 데이터를 EmailJS로 전송하는 함수입니다. 오류가 발생하면 catch() 블록에서 console.log()로 출력해 확인할 수 있습니다.

특히 중요한 점은, sendForm()이 지정된 이메일 템플릿과 전달된 폼 데이터를 기반으로 이메일을 발송한다는 것입니다. 따라서 폼 입력 요소의 name 속성값이 EmailJS 템플릿의 변수명과 정확히 일치해야 합니다.

아래는 이름, 이메일, 메시지 내용을 반영해 수정한 제 EmailJS 템플릿입니다.

EmailJS로 Vue.js 애플리케이션에서 이메일 보내는 완벽 가이드

이것으로 끝입니다!

템플릿에 설정한 To Email 주소의 메일함을 확인해 보세요. 이메일이 이미 도착해 있을 겁니다. 원한다면 템플릿 화면 우측 상단의 Test it 또는 playground 기능을 활용해 발송 결과를 미리 테스트해 볼 수도 있습니다.

GitHub 저장소

이 글에서 사용한 전체 코드는 제 GitHub 계정에서 확인할 수 있습니다.

글이 도움이 되었다면 주변에 공유해 주세요. 끝까지 읽어 주셔서 감사합니다!