[JavaScript] EmailJS 라이브러리

EmailJS 라이브러리

들어가며

• 간편하게 회원가입으로 무료로 월 200건까지 이메일을 보낼 수 있도록 도와주는 EmailJS 라이브러리에 대해 정리해본다.

 

EmailJS

개념

• 사용자가 서버 없이 자바스크립트만으로 이메일을 보낼 수 있도록 도와주는 서비스
  • 사용자는 백엔드 설정 없이 클라이언트 사이드에서 이메일을 전송할 수 있다.
• SMTP 서버를 활용하여 이메일을 전송하며, Gmail, Outlook 등의 이메일 서비스를 지원한다.

 

주요 특징

• 클라이언트 사이드에서 직접 이메일을 전송할 수 있어 백엔드가 필요없다.
• Gmail, Yahoo, Outlook 등 여러 서비스와 호환된다.
• 사용자 정의 템플릿을 만들어 동적으로 데이터를 전달할 수 있다.
• 전송 데이터를 암호화하며 API 키를 사용하여 인증을 처리한다.
• 몇 줄의 코드만으로 이메일 전송 기능을 구현할 수 있다.

 

주요 구성 요소

• Service ID : 이메일을 전송하기 위해 필요한 특정 이메일 서비스 식별자
• Template ID : 미리 정의된 이메일 템플릿을 참조하는 고유 ID
• User ID : EmailJS 계정과 연결된 사용자의 고유 ID

 

사용하기

EmailJS 사이트 회원 가입

• EmailJS 사이트 회원 가입을 한다. (무료)

Send email directly from your code | EmailJS

 

이메일 서비스 추가하기

• 좌측의 @[Email Services]@ 탭을 클릭한 후, @[Add New Service]@ 버튼을 추가한다.

 

• 언하는 메일 서비스를 선택한다.

 

• 메일을 발신할 계정을 연결(Connect) 해준 후, Service ID를 확인한다.
  • SSO를 통해 EmaiJS 사이트와 해당 이메일 계정을 연동 시켜주는 작업이 필요하다. 

 

• 이메일 서비스를 생성하면, 연동된 이메일로 테스트 메일이 발송된다.

 

위에서 추가한 이메일 주소가 이메일 발신 주소가 된다.

 

 

템플릿 생성하기

• 좌측의 @[Email Templates]@ 탭을 클릭한 후, @[Create New Template]@ 버튼을 추가한다.

 

• @To Email@에 수신 메일 주소를 적어준다.
• @From Nam@에 발신자 이름을 적어준다. (선택값)
• @From Email@은 발신 메일 주소이다. (EmailJS에 연결한 계정)
• @Replay to@는 회신을 받을 이메일 주소이다.
• @BCC@, @CC@는 각각 숨은 참조와 참조이다.

 

본문 안에서 중괄호 2개로 둘러쌓인 변수들({{to_name}}, {{from_name}}, {{message}})은 나중에 코드에서 파라미터로 전달해주는 값들이 들어가게 된다.

 

 

코드 작성하기

• 우선 터미널에 아래 명령을 실행하여 EmailJS SDK를 설치해준다.

$ npm install --save @emailjs/browser    # yarn add @emailjs/browser

 

• 그리고 폼(Form)을 구현하는 컴포넌트 파일에 폼 제출 이벤트 처리 함수에 다음과 같이 코드를 작성해준다.

SERVICE_ID 확인 (/admin)	TEMPLATE_ID 확인 (/admin/templates)	PUBLIC_KEY 확인 (/admin/account)

 

ContactForm.jsx

import { useRef } from "react";
import emailjs from "emailjs-com";

const ContactForm = (values) => {
    const form = useRef();

    const sendEmail = (e) => {
        e.preventDefault();
        
        // 템플릿을 만들 때, {{}} 안에 넣었던 변수명들
        const templateParmas = {
            from_name: form.current.mail,
            to_name: 'dev-astra',
            message: form.message,
        };
        
        try {
            emailjs.send(
               "YOUR_SERVICE_ID",
               "YOUR_TEMPLATE_ID",
               templateParmas,
               "YOUR_PUBLIC_KEY"
            )
            alert("Email sent successfully!");
        }
        catch (error) {
            console.error(error.text);
            alert("Failed to send email.");
        });
    };

    return (
        <form ref={form} onSubmit={sendEmail}>
            <label>Name</label>
            <input type="text" name="name" required />
            <label>Email</label>
            <input type="email" name="mail" required />
            <label>Message</label>
            <textarea name="message" required />
            <button type="submit">Send</button>
        </form>
    );
};

export default ContactForm;

 

보안을 위해 SERVICE_ID, TEMPLATE_ID, PUBLIC KEY는 환경 설정 파일(@.env@)에 넣은 후 불러오는 방식을 사용하여 가져오도록 한다.

 

• 만약 "The Public Key is invalid" 오류가 발생한다면, @Account@ 페이지의 @[Security]@ 탭의 @API Settings@ 부분의 체크박스를 아래와 같이 설정해준다.
  • @Allow EmailJS API for non-browser applications.@ 체크
  • @Use Private Key (recommended)@ 체크 해제

 

사용 방법에 대한 더 자세한 내용은 아래의 API Guide 문서를 확인한다.
📎https://www.emailjs.com/docs/rest-api/send/

 

• 아무 문제가 없다면, 다음과 같이 메일함에서 발송된 메일을 확인할 수 있다.

 

참고 사이트

Documentation | EmailJS

Email JS "The Public Key is invalid"