이롭게 현명하게
[React] EmailJS 사용방법 / 자바스크립트로 이메일 보내기 본문
목차
EmailJS란?
EmailJS 사용법
참고사항
[EmailJS란?]
개인 웹 포트폴리오나 회사 사이트에서 사용자가 문의사항을 남기는 이메일 폼 양식을 본 적이 있다.
이 폼을 보고 내 웹 포트폴리오에 적용하면 좋을 거 같다는 생각이 들었다.
Contact 페이지에 적용시키기 위해서는 EmailJS를 사용하면 된다.
EmailJS는 javascriptAPI를 사용해 웹에서 메일을 바로 전송할 수 있도록 지원한다.
EmailJS를 사용하면 내 이메일 주소는 공개하지 않으면서 내 포트폴리오에 접속한 사람으로부터 메일을 받을 수 있는 기능이다.
* githubPage는 정적 페이지만 지원한다. 데이터베이스 등을 활용하여 백엔드에서 메일을 보낼 수 없다.
그렇기 때문에 githubPage에서 사용하기 충분하다.
월별 200개 까지는 무료로 사용이 가능하다.
200 초과로 사용하거나 다른 부가 기능(ex. 파일첨부)을 사용하려면 비용을 지불해야 한다.
무료로도 충분하여 EmailJS를 사용하기로 했다.
[EmailJS 사용법]
<Service 등록>
EmailJS에 접속한다.
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
Sign Up 클릭
회원가입 작성
회원가입 후 로그인
* 로그인 후 메일 인증(스크린샷을 남기지 못했다ㅜ)
로그인 후 Add New Service 클릭
사용할 서비스 클릭
저는 GMail을 선택했습니다.
사용할 서비스 선택 후 Connect Account 클릭 > Gmail(선택한 서비스) 계정 로그인
계속 클릭
'나를 대신하여 이메일 전송' 클릭 > 계속
* 나를 대신하여 이메일 전송에 체크하지 않는다면 나중에 에러가 날 수 있습니다.
Create Service 클릭
Create Service를 클릭하면 연결한 계정이 나타난다.
'나를 대신하여 이메일 전송'에 체크를 하지 못했거나 연동한 계정을 바꾸고 싶다면
계정 블록 선택
Disconnect 클릭 후 계정을 다시 연동하면 된다.
연결된 계정의 메일함에 테스트메일이 온다.
성공적으로 연동되었다.
<Template 등록하기>
좌측 메뉴에서 Email Templates 클릭
Create New Template 클릭
Create New Template을 클릭했을 때의 화면이다.
여기서 메일 템플릿을 만들 수 있다.
오른쪽 To Email은 받을 이메일을 넣어준다. 무료 사용자의 경우 연동한 이메일 주소만 사용할 수 있기 때문에 'Use Default Email Adress'를 꼭 체크해두어야 한다.
reply_to : 뭐지...
Bcc : 숨은 참조
cc : 참조
{{}} : 변수가 들어간다. 이때 프로젝트 form 태그의 자식요소 name과 같아야 한다.
Auto-Reply : 메일을 보내는 사람에게 전송이 성공적으로 전송됐음을 알려주는 회신 메일 템플릿
※ 이때 메일을 전송할 때 2개(보내는 메일, 회신메일)가 보내지기 때문에 무료로 이용 시 주의
Attachments : 첨부 파일 관련 설정
Contacts : 이메일 발신자 연락처 저장 설정
Setting : 템플릿 정보 설정
Template 커스텀
Template 완성 후 Save 버튼 클릭
저장된 템플릿
저장한 템플릿으로 테스트해보고 싶다면 Test It 클릭
* 저장 후 Test IT을 해야 한다.
※ Test에도 사용 횟수가 차감된다.
Test Template의 각각의 변수에 테스트 설정할 내용을 넣어준다.
변수에 입력 후 Send Test Email 클릭
Send Test Email 클릭 후 Result에 '200 OK'가 나타난다면 Test 메일이 성공적으로 보내졌다.
연동한 메일함에 메일이 도착해 있는 것을 확인할 수 있다.
Test에도 사용 횟수가 차감되니 주의해야 한다.
<웹 프로젝트에 적용하기>
EmailJS를 사용하기 위해서는 라이브러리를 설치해 주어야 한다.
yarn add @emailjs/browser
npm install @emailjs/browser --save
저는 리액트로 진행하였습니다.
여기서 name은 필요하지 않아 없앴다.
email과 message만 남겨두었다.
import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';
export const ContactUs = () => {
const form = useRef();
const sendEmail = (e) => {
e.preventDefault();
emailjs
.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, {
publicKey: 'YOUR_PUBLIC_KEY',
})
.then(
() => {
console.log('SUCCESS!');
},
(error) => {
console.log('FAILED...', error.text);
},
);
};
return (
<form ref={form} onSubmit={sendEmail}>
{/* <label>Name</label>
<input type="text" name="user_name" /> */}
<label>Email</label>
<input type="email" name="user_email" />
<label>Message</label>
<textarea name="message" />
<input type="submit" value="Send" />
</form>
);
};
※ 여기서 전송 버튼은 <input type="submit"/>으로 해야 한다. <button>으로 사용할 경우 form양식이 전송되지 않는다.
*KEY 값은 문자열로 넣어주어야 한다!
'YOUR_SERVICE_ID' : 메뉴의 Email Sevices를 클릭하면 볼 수 있다.
'YOUR_TEMPLATE_ID' : 메뉴의 Email Templates를 클릭하면 볼 수 있다.
'YOUR_PUBLIC_KEY' : 메뉴의 Account를 클릭하면 볼 수 있다.
Template의 name과 프로젝트의 input name 변수명이 같아야 한다.
수정한 코드
// 프로젝트
import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';
export const ContactUs = () => {
const form = useRef();
const sendEmail = (e) => {
e.preventDefault();
emailjs
.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, {
publicKey: 'YOUR_PUBLIC_KEY',
})
.then(
() => {
console.log('SUCCESS!');
},
(error) => {
console.log('FAILED...', error.text);
},
);
};
return (
<form ref={form} onSubmit={sendEmail}>
<label>Email</label>
<input type="email" name="from_name" />
<label>Message</label>
<textarea name="message" />
<input type="submit" value="Send" />
</form>
);
};// 템플릿
<p>받는 사람 : {{to_name}}</p>
<p>보낸 사람 : {{from_name}}</p>
<p>내용 :</p>
<p style="padding: 12px; border-left: 4px solid #d0d0d0; font-style: italic;">{{message}}</p>
<p> </p>
//CSS
form{
display: flex;
flex-direction: column;
align-items: center;
}
프로젝트 실행 후 send 클릭
npm run start
메일함에 잘 도착해 있는 것을 확인할 수 있다.
[참고사항]
웹 페이지에 있는 메일 전송 폼으로 사용자가 메일을 작성해서 전송하면 다음과 같이 메일이 전송된다.
이때 메일을 받은 '나' 는 받은 메일에 응답하기 위해 답장 버튼을 클릭한다.
답장 버튼을 클릭하여 메일을 전송하면 나에게 보내기로 전송이 된다.
그러므로 EmailJS로 온 메일에 답장을 하려면 '답장버튼'을 클릭해서 답장하면 안됀다.
받은 메일 주소로 직접 입력하여 답장을 해야한다.
잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊
댓글과 좋아요는 큰 힘이 됩니다!
[ 참고자료 ]
https://livealife.tistory.com/14
React 프로젝트에 emailjs 적용하기
개인 포트폴리오나 회사 사이트에 이메일을 보내는 폼양식 페이지를 본적이 있을것이다. 이메일 보내는 폼을 emailjs 라는 라이브러리를 통해 리액트 프로젝트에 적용시켜보고자 한다. 먼저 https:
livealife.tistory.com
https://www.emailjs.com/docs/examples/reactjs/
React | EmailJS
EmailJS integration with React
www.emailjs.com
'웹 개발 > React' 카테고리의 다른 글
| [React] 리액트 useReducer (0) | 2024.01.18 |
|---|---|
| [React] 리액트 React.memo (0) | 2024.01.17 |
| [React] 리액트 useCallback (0) | 2024.01.16 |
| [React] 리액트 State란? (0) | 2024.01.15 |
| [React] 리액트 props 사용방법 (0) | 2024.01.12 |
