JavaScript

email.js로 backend 없이 메시지 전달 받기

curious week 2025. 9. 9. 20:33

email js 사용하기

 

Send email directly from your code | EmailJS

No server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier!

www.emailjs.com

접속 후 회원가입

 

Add New Service 선택

원하는 이메일 선택 후 작성.

Service ID 메모장에 복사 후,

Connect Account 하면, 연결됨. (연결이 안 되면 다시 시도하면 됨.)

연결 후 연결한 이메일에서 인증.

사이드 탭에서 Templates 선택 후 Create New Template

To Email에 자신의 이메일 적고 원하는 대로 템플릿 꾸미기

마찬가지로 Template ID 메모장에 복사

npm install @emailjs/browser

프로젝트 상단에 import

import emailjs from '@emailjs/browser';

'service ID', 'template ID', 본인이 템플릿에 작성한 변수 작성, 'Public key'

const handleSubmit = (e) => {
    e.preventDefault();
	emailjs.send('service ID', 'template ID', {
  		from_name: formData.name, // 본인이 템플릿에 작성한 변수: form 태그 데이터
  		to_name: '이름',
  		from_email: formData.email,
  		to_email: '연결한 이메일',
  		message: formData.message,
	},
    'account page Public key'// account Public Key
    );
}

public 키는 account tab에서 확인할 수 있다. 이렇게 작성해서 submit하면 된다.

tamplate / mail

탬플릿 형식에 맞는 메일을 받을 수 있다.