자바스크립트로 메일 보내고 받기: EmailJS 활용 가이드

웹 애플리케이션에서 사용자에게 직접 이메일을 보내거나, 사용자로부터 이메일을 수신하는 기능은 매우 유용합니다. 예를 들어, 회원 가입 인증 메일, 비밀번호 찾기 메일, 문의하기 기능 등 다양한 곳에서 활용될 수 있습니다. 이러한 기능을 구현하기 위해서는 별도의 메일 서버를 구축하거나, SMTP 프로토콜을 직접 다루는 등 복잡한 과정이 필요합니다. 하지만 EmailJS와 같은 서비스를 활용하면 간단하게 이메일 기능을 구현할 수 있습니다.

이 글에서는 자바스크립트를 이용하여 EmailJS를 활용하여 이메일을 보내고 받는 방법에 대해 자세히 알아보겠습니다.

EmailJS란?

EmailJS는 웹 개발자가 웹 페이지에서 직접 이메일을 보낼 수 있도록 지원하는 클라우드 기반 서비스입니다. REST API를 제공하여 간단한 자바스크립트 코드만으로 이메일 전송이 가능합니다. 무료로 사용할 수 있는 할당량이 제공되며, 유료 플랜을 통해 더 많은 기능과 할당량을 이용할 수 있습니다.

EmailJS 계정 생성 및 프로젝트 설정

1. EmailJS 웹사이트 가입: EmailJS 공식 웹사이트에 접속하여 계정을 생성합니다.
2. 새로운 서비스 생성: 대시보드에서 새로운 서비스를 생성하고, 원하는 이메일 서비스(Gmail, Outlook 등)를 연결합니다.
3. 템플릿 생성: 이메일 내용을 미리 정의하는 템플릿을 생성합니다. 템플릿에는 받는 사람, 제목, 본문 등을 포함할 수 있습니다.
4. API 키 발급: 생성된 서비스에 대한 API 키를 발급받습니다. 이 API 키는 자바스크립트 코드에서 사용될 예정입니다.

728x90

자바스크립트 코드 작성

<script src="https://smtpjs.com/v3/smtpjs.js"></script>
<script>
  function sendEmail() {
    emailjs.send('your_service_id', 'your_template_id', {
      to_name: 'Recipient Name',
      from_name: 'Your Name',
      message: 'Hello from EmailJS!'
    })
    .then((result) => {
        console.log(result.text);
    }, (error) => {
        console.log(error.text);
    });
  }
</script>

 

• your_service_id: EmailJS 대시보드에서 발급받은 서비스 ID를 입력합니다.
• your_template_id: 생성한 템플릿의 ID를 입력합니다.
• to_name: 받는 사람의 이름을 입력합니다.
• from_name: 보내는 사람의 이름을 입력합니다.
• message: 이메일 본문 내용을 입력합니다.

이메일 수신

EmailJS는 기본적으로 이메일 수신 기능을 제공하지 않습니다. 이메일 수신을 위해서는 별도의 서버를 구축하거나, 다른 이메일 서비스 제공업체의 API를 활용해야 합니다.

추가 기능 및 고급 설정

EmailJS는 다양한 추가 기능과 고급 설정을 제공합니다.

• 첨부 파일: 이메일 본문에 파일을 첨부할 수 있습니다.
• HTML 이메일: HTML 형식의 이메일을 보낼 수 있습니다.
• 이벤트 트리거: 이메일 전송 성공/실패 시 이벤트를 발생시켜 추가적인 작업을 수행할 수 있습니다.
• 에러 처리: 오류 발생 시 에러 메시지를 확인하고 적절한 조치를 취할 수 있습니다.

주의 사항

• 무료 할당량: 무료 플랜의 경우 이메일 전송 횟수에 제한이 있으므로, 많은 양의 이메일을 보내야 하는 경우 유료 플랜을 고려해야 합니다.
• 보안: API 키를 안전하게 관리해야 합니다.
• 스팸 필터: 일부 이메일 서비스에서는 EmailJS를 통해 전송된 이메일이 스팸으로 분류될 수 있습니다.

결론

EmailJS는 웹 개발자가 간편하게 이메일 기능을 구현할 수 있도록 도와주는 유용한 서비스입니다. 이 글을 통해 EmailJS를 활용하여 자바스크립트로 이메일을 보내는 방법에 대해 충분히 이해했기를 바랍니다.

참고:

• EmailJS 공식 문서: https://www.emailjs.com/docs/