메일 보내는 라이브러리 (@emailJS / @NodeMailer) 사용법, 차이점, 사용 이유

** emailJS로 프로젝트를 했었는데, 이번엔 NodeMailer를 쓴 이유

저번 emailJS사용했던 프로젝트는 클라이언트 파트였음.

React를 사용해서 클라이언트에서 라이브러리를 통해 인증번호를 발급 후 보내주고, 확인하는 처리를 진행했는데

이번에는 NextJs를 사용해서 서버측에서 전송하는 부분 구현이기 때문.

 

(물론, 저번처럼 클라이언트 측에서 emailJS라이브러리를 사용해서 구현할 수 있지만,

-> Next API 라우트를 사용하면 클라이언트 측에 민감한 정보를 노출해도 되지 않는다는 장점이 있음. )

 

리액트는 프론트엔드 프레임워크이지만, 넥스트는 풀스택 프레임워크여서 api를 만들 수 있음.

이 경우에는 node를 사용하므로, 서버에서 사용 가능한 라이브러리를 쓸 수 있다.

(NodeMailer도 노드 환경에서만 사용 가능한 라이브러리임.)

 

정리하자면,

 

NodeMailer같은 경우는 

클라이언트(Next) ---(서버에 요청)---> 서버 (Next API 라우트)  ---(요청)--->  NodeMailer ---(반응)---> 클라이언트(Next) 의 로직

 

emailJS의 경우에는

클라이언트(React) ---(요청)---> emailJS ---(반응)---> 클라이언트 (React) 로직 

 

이기 때문에, 다른 것!

 

 

---

 

** NodeMailer 

 

 

* 사용한 이유

방문자가 페이지 주인에게 메일 보내기 위함.

(방문자 -> 나)

 

 

* 사용법

1. 앱 패스워드 생성

https://myaccount.google.com/apppasswords

로그인 - Google 계정

에서 앱 패스워드 생성해줘야 함.

 

 

 

 

2. 환경 변수 추가

 

그리고 .env.local에서

AUTH_USER=이메일 주소

AUTH_PATH=발급된 비번

 

설정 해주기

 

 

const transporter = nodemailer.createTransport({

    host: "smtp.gmail.com",

    port: 465,

    secure: true,

    auth: {

      user: process.env.AUTH_USER,

      pass: process.env.AUTH_PATH,

    },

})

코드에서는 이렇게 사용(.ts 파일)

 

 

 

 

3. 코드 작성

 

참고)

https://nodemailer.com/

Nodemailer :: Nodemailer

 

 

 

 

---

 

 

** emailJS

 

 

* 사용한 이유

방문자가 페이지 가입 할 때 인증번호 필요. 인증번호를 페이지 주인의 주소에서 방문자의 주소로 메일 보내기 위함.

(나 -> 방문자)

 

 

 

* 사용법

1. emailJS 가입

https://www.emailjs.com/

Send email directly from your code | EmailJS

 

emailJS 사이트 회원 가입 후에 연결 할 계정을 입력하면 Service ID 가 발급된다.

NodeMailer과 다르게 구글 계정에서 처리 할 필요 없음.

 

 

 

2. 이메일 연동 및, 키 발급

Email Services에서 사용할 본인 메일 연동 -> Service ID 발급

Account에서 Public Key 생성

 

 

 

3. 템플릿 생성

메일로 보낼 내용을 html 형식으로 작성 가능.

그 템플릿을 식별할 수 있는 Template_ID가 있음.

 

 

4. 환경변수 설정

.env.local에서

SERVICE_ID= 서비스 아이디

PUBLIC_ID = 퍼블릭 아이디

TEMPLATE_ID=템플릿 아이디

 

설정 해주기

 

emailjs

      .sendForm('SERVICE_ID', 'TEMPLATE_ID', form.current, {

        publicKey: 'PUBLIC_KEY',

      })

코드에서는 위에 상수로 선언 해주고(ex. const Service_ID =process.env.Service_ID) 사용

 

 

 

5. 코드 작성

 

리액트 코드 참고)

https://www.emailjs.com/docs/examples/reactjs/

React | EmailJS

 

 

emailJS 한 달에 200개는 무료인데, 초과량 넘지 않게 조심!

계정을 하나 더 만든 경험이 있음..^^