정적 웹 페이지(Static web page)와 동적 웹 페이지(Dynamic web page)
정적 웹 페이지
서버에 미리 저장되어 있는 파일(HTML, CSS, JavaScript 등)이 그대로 전달되어 나타난다. 요청하면 저장된 걸 그대로 보여줄뿐.
동적 웹 페이지
요청에 의해 새롭게 만들어진 페이지가 전달된다. 사용자가 서버에 요청하는 대로 웹 페이지가 변경되어 보여진다.
github page는 대표적인 정적 페이지이다. 우리가 github에 업로드한 파일을 그대로 페이지에 보여주는 역할을 한다. github page에서 서버에 GET 요청을 하면 405 Not Allowed 오류가 뜬다.
405 Not Allowed
응답 상태 코드는 요청 방법이 서버에 의해 알려졌으나, 사용 불가능한 상태
Contact form을 정적 페이지에 넣고 싶은 경우에는 서버를 통하지 않는 방식을 이용해야 한다. Node.js를 사용하는 nodemailer나 java, php를 이용하여 백 단에서 메일을 보내는 방법은 사용할 수 없다.
정적 페이지에서 서버 없이 contact form을 구현하는 방법에는 여러 가지가 있다.
이 중에서 EmailJS 사용법에 대해 정리해보자. 참고로 EmailJS 무료 버전은 텍스트 전송만 가능하며 하루 전송량이 제한되어 있다.
EmailJS 사용 방법
1. 우선 EmailJS 홈페이지에서 회원가입을 한다.
https://www.emailjs.com/
2. Email Service를 추가해준다.
3. Connect Account 버튼을 눌러 계정을 연결해준다.
4. '나를 대신하여 이메일 전송'을 허용해준다. (발신자가 본인이 됨)
5. 'Create Service' 버튼을 누르면 테스트 메일이 자동으로 발송된다. 잘 연결되었다면 메일이 왔을테니 메일함을 확인해준다.
6. Email Templates 메뉴로 들어가 템플릿을 생성한다. 'To mail'에 내 구글 메일이 적혀있는 지 확인.
7. 프로젝트 폴더에서 npm으로 EmailJS을 설치해준다.
npm install @emailjs/browser
8. ContactUs.js 파일을 하나 생성해서 아래 기본 템플릿을 복붙한다.
- 기본 리액트 템플릿
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, 'YOUR_USER_ID')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(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>
);
};- 타입스크립트 환경 리액트 기본 템플릿
import React, { useRef } from "react";
import emailjs from "@emailjs/browser";
const ContactForm = () => {
const form = React.useRef(null);
const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
emailjs
.sendForm(
"YOUR_SERVICE_ID",
"YOUR_TEMPLATE_ID",
e.currentTarget,
"YOUR_USER_ID"
)
.then(
(result) => {
console.log(result.text);
},
(error) => {
console.log(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>
);
};
export default ContactForm;9. 아래 영역에 본인의 ID 세 개를 가져와 복붙해준다.
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_USER_ID')
- YOUR_SERVICE_ID : Email Services 메뉴 - Service ID
- YOUR_TEMPLATE_ID : Email Templates 메뉴 - Template ID
- YOUR_USER_ID : Integration 메뉴 - API keys - User ID
10. contactForm이 보여지는 페이지에서 submit 버튼을 클릭해 메일이 전송되는지 확인해본다.
EmailJS 커스텀
Email Templates 메뉴에서 템플릿을 커스텀하여 사용해보자.
input 태그의 name과 템플릿의 이중대괄호의 텍스트가 같아야 메일에 제대로 표시된다.
예를들어 <input name="from_name"/>라면, {{from_name}}으로 설정해야 한다.
예시
