728x90
반응형
실 사용자가 이런 메일을 받는다고 생각하니...
참을 수 없어졌다.
바로 바꿔주도록 하자.
심플 이즈 베스트 👍
일러나 gif 좀 넣고 싶긴 했는데 지금은 개발이 더 급해서 패스했다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
background-color: #f2f2f2;
padding: 20px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.code {
font-weight: bold;
color: #333;
padding: 5px;
background-color: #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<div className='container'>
<p>뭉치 회원가입을 위해서는</p>
<p >아래 인증번호를 입력창에 넣어주세요</p>
<span className='code'>인증 코드 나올 곳</span>
</div>
</body>
</html>우리의 친구 chatGPT한테 이미지 주고 뜯어낸 코드다.
(미리 말하는데 메일에선 css를 인라인으로 넣어줘야 한다.)
이대로 nodemailer에 집어 넣으면 '당신 코드 뚱뚱해요'가 된다.
그렇기 때문에 mail.html 코드를 만들어준다.
import nodemailer from 'nodemailer';
import fs from 'fs';
import path from 'path';
const filePath = path.join(__dirname, 'mail.html');
const template = fs.readFileSync(filePath, 'utf8');
transporter.sendMail({
from: `"뭉치" <${AUTH_USER}>`,
to: email,
subject: '🔥 뭉치 인증 코드',
html: template,
}
그 다음 nodemailer 코드로 돌아와서 html로 바꿔주고 path, fs로 해당 파일을 읽어오게 한다.
근데~ 여기에서 우리는 생각이라는 걸 해야한다.
이메일 보내는거 좋은데 어떻게 생성한 코드를 html에 집어 넣을 수 있을까 🤔
제목처럼 동적으로 인증코드를 생성해서 보내줘야 하는거다.
const filePath = path.join(__dirname, 'mail.html');
const template = fs.readFileSync(filePath, 'utf8');
const emailHtml = template.replace('{{confirmationCode}}', result);
transporter.sendMail({
from: `"뭉치" <${AUTH_USER}>`,
to: email,
subject: '🔥 뭉치 인증 코드',
html: emailHtml,
}replace 사용하면 완벽하다.
인증 코드 나올 곳을 {{confirmationCode}}로 바꿔준 다음 생성한 인증코드인 result를 넣어준다.
<body>
<div style="width: 100%; background-color: #f2f2f2; padding: 40px; box-sizing: border-box; font-family: Arial, sans-serif; text-align: center;">
<p>뭉치 회원가입을 위해서는</p>
<p style="margin-bottom:50px">아래 인증번호를 입력창에 넣어주세요</p>
<span style="font-weight: bold; color: #333; padding: 5px; background-color: #ddd; border-radius: 5px; font-size:25px;">{{confirmationCode}}</span>
</div>
</body>아까도 말했다시피 css를 인라인 스타일로 넣어줘야 먹힌다.
가독성도 없고 쓰는게 불편하지만 쩔 수 없징...
꽃단장(?)에 성공했다.
굳 👍
728x90
반응형
'Project > MUNGCHI' 카테고리의 다른 글
| #6 데이터 마이그레이션 하기 (0) | 2024.01.29 |
|---|---|
| #5 서버 백엔드 올리기 + AWS EC2, MongoDB, Redis (1) | 2023.11.25 |
| #4 클라우드 업체 선택하기 - 돌고돌아 고향으로(?) (2) | 2023.11.24 |
| #3 한시간 단위로 집계해서 Redis에 캐싱하기 (0) | 2023.11.10 |
| #2 도메인 구매 시 호구 안되는 법 알려드림 (1) | 2023.11.09 |
댓글