목차

• EmailJs란
• EmailJs 사용이유
• 사용방법

EmailJs란

• EmailJS 는 클라이언트 측 기술만을 사용하여 이메일을 보내는 데 도움이 되는 JavaScript 라이브러리입니다.

• EmailJS는 서버가 필요하지 않다.

• 웹에서 바로 메일을 보낼 수 있도록 지원하며, 월 200건까지는 무료로 사용이 가능하다

EmailJs 사용이유

• 포트폴리오를 작성 중 Contact 페이지를 추가해 연락을 받을 수 있는 기능을 추가하고 싶어 찾아보던 중 따로 서버를 운영하지 않고도 가능한 EmailJs를 알게되어 사용하게 되었다.

사용방법

1. EamilJs에 회원가입 후 왼쪽 상단에 Eamil Service 창에서 원하는 서비스를 선택해준다.
   

2. 왼쪽 상단에 Email Templates 창으로 이동해서 원하는 템플릿을 작성해준다.
   단 이때 {{...}}의 값들은 이후 코드의 form의 name과 같아야 한다. Ex) from_name, phone, email, message

3. 코드를 작성해준다. EamilJs doc 참고
   이때 아래의 3가지는 emailJs 로그인 하면 확인 할 수 있다.

• 'YOUR_SERVICE_ID' => Email Service에서
• 'YOUR_TEMPLATE_ID' => Email template에서
• 'YOUR_PUBLIC_KEY' => account에서 확인
  

const ContactUs = () => {
  
const form = useRef();

const sendEmail = (e) => {

	e.preventDefault();

	emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
     
      .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>
  );
};

4. 내용을 작성하고 보내면 된다.
   미적감각이 부족해서 디자인이 이쁘지 않은점 이해바랍니다.
   

5. 정상적으로 이메일이 도착했다.
   

Email Js의 doc부분을 잘 따라하면 큰 문제없이 가능했다. 아직 포트폴리오를 완성하진 못했지만 나중에 여러 회사에 지원했을때 EmailJs기능을 통해 좋은 소식이 도착했으면 좋겠다.