지난 포스팅에서 nodemailer를 사용하여 gmail에 인증번호를 보내는 기능을 구현해보았습니다.
2024.08.26 - [NodeJs] - [NODE JS] nodemailer를 사용한 gmail 인증
[NODE JS] nodemailer를 사용한 gmail 인증
🔎nodemailer- Node.js 환경에서 이메일을 보내기 위한 모듈. 이메일을 보내는 기능을 쉽게 구현할 수 있게 도와주는 라이브러리로, SMTP(SMTP 서버를 사용한 이메일 전송)와 같은 여러 메일 전송 방법
dbsxo4083.tistory.com
이번엔 이메일을 보내고 클라이언트 측에서 그 이메일 인증번호를 저장해 두었다가 입력을 하면 서버 측에서 인증을 처리하는 기능을 구현해보겠습니다.
클라이언트는 React나 next.js등 다양한 라이브러리를 사용할 수 있지만 최대한 간단하게 구현하기 위해서 ejs 템플릿을 사용하여 구현하였으며 편의상 css 스타일 적용은 하지 않았습니다.
우선 필요한 모듈들부터 설치해보겠습니다.
npm i ejs
🔎EJS란
EJS는 Embedded JavaScript의 약자로 HTML과 javascript 코드 결합이 가능한 템플릿 엔진입니다
✍🏻 index.js
const express = require('express');
const app = express();
const path = require('path');
const port = 3000;
const nodemailer = require('nodemailer');
require('dotenv').config(); // 환경 변수 로드
app.set("view engine", "ejs");
app.set('views', path.join(__dirname, 'views'));
app.use(express.json());
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
지난번 포스팅에서 다룬 이메일 전송 코드는 전부 지우고 서버를 열 수 있는 코드만 남겨 두었습니다.
주요 함수 설명
- app.set("view engine", "ejs"): Express에서 EJS를 템플릿 엔진으로 사용하도록 설정합니다.
- app.set('views', path.join(__dirname, 'views')): EJS 템플릿 파일들이 저장된 디렉터리를 지정합니다. Express는 이 디렉터리에서 템플릿 파일들을 찾아 렌더링합니다.
그 다음 프로젝트 디렉토리에 views라는 폴더를 만들고 그 안에 index.ejs라는 파일을 만듭니다.
✍🏻 index.js
<html>
<head>
</head>
<body>
</body>
<script>
</script>
</html>
index.ejs 파일 구조는 이런식으로 잡았습니다.
- <head>: 웹페이지의 메타데이터, 스타일시트, 스크립트 등 설정을 포함합니다.
- <body>: 웹페이지의 실제 콘텐츠(텍스트, 이미지, 링크 등)를 담고 있습니다.
- <script>: 자바스크립트 코드를 작성해 웹페이지에 동적 기능을 추가합니다
🔎EJS 파일에서 JavaScript 문법을 사용하는 방법
1. <%= %>: 출력 (HTML 이스케이프)
이 구문을 사용하여 데이터를 HTML에 출력할 수 있습니다. 이 때, EJS는 HTML 이스케이프 처리를 자동으로 해줍니다. 예를 들어, HTML에서 위험할 수 있는 <, > 같은 태그가 실제로 브라우저에 렌더링되지 않고, 안전한 형태로 출력됩니다.
<p><%= username %></p>2. <%- %>: 출력 (HTML 이스케이프 없이)
이 구문은 HTML 이스케이프 처리를 하지 않고, 그대로 HTML에 삽입합니다. 주의해서 사용해야 합니다.
<p><%- content %></p>content 변수가 HTML 태그를 포함한 문자열이라면, 이 태그가 그대로 렌더링됩니다.
3. <% %>: JavaScript 코드 실행
이 구문은 JavaScript 코드를 실행하지만, 결과를 출력하지 않습니다. 주로 제어 구조(if, for 등)를 사용할 때 활용됩니다.
<% if (user.isAdmin) { %> <p>Welcome, Admin!</p> <% } %>위 코드는 user.isAdmin이 참일 때만 "Welcome, Admin!"이라는 문구를 출력합니다.
4. <%# %>: 주석
이 구문은 주석을 작성하는 데 사용됩니다. EJS 파일에 있는 주석은 클라이언트에게 보내지는 HTML 파일에 포함되지 않습니다.
<%# This is a comment and will not be included in the rendered HTML %>5. <%- include('file') %>: 다른 EJS 파일 포함
다른 EJS 파일을 현재 템플릿에 포함시킬 수 있습니다.
<%- include('header') %>6. <% for, if, else 등 JavaScript 문법 %>: JavaScript 코드
일반적인 JavaScript 제어 구조(if, for 등)를 사용할 수 있습니다.
<ul> <% for(let i = 0; i < items.length; i++) { %> <li><%= items[i] %></li> <% } %> </ul>위 코드는 items 배열의 각 요소를 <li> 태그로 감싸서 출력합니다.
'NodeJs' 카테고리의 다른 글
| [NODE JS] puppeteer를 활용한 Crawing (4) | 2024.09.02 |
|---|---|
| [NODE JS] nodemailer를 사용한 gmail 인증(3) (0) | 2024.08.28 |
| [NODE JS] nodemailer를 사용한 gmail 인증 (0) | 2024.08.26 |
| [Node JS]네이버 로그인 오픈 api 구현 (0) | 2024.08.26 |
| [Node JS] sha256를 이용해서 비밀번호 암호화 하기 (0) | 2024.07.29 |