뷰 엔진과 템플릿 엔진 (View Engines and Template Engines)
Node.js 웹 애플리케이션 개발에서 뷰 엔진과 템플릿 엔진은 서버 측에서 HTML을 생성하는 데 사용됩니다. 대표적인 엔진으로 Pug와 EJS가 있습니다.
Pug
Pug는 간결한 문법을 사용하여 HTML을 생성하는 템플릿 엔진입니다.
Pug 설치 및 설정
npm install pug
Express 애플리케이션에서 Pug를 사용하는 방법입니다.
const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.set('views', './views');
app.get('/', (req, res) => {
res.render('index', { title: 'Welcome', message: 'Hello, Pug!' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
Pug 템플릿 예제
//- views/index.pug
doctype html
html
head
title= title
body
h1= message
EJS
EJS는 JavaScript 문법을 사용하여 HTML을 생성하는 템플릿 엔진입니다.
EJS 설치 및 설정
npm install ejs
Express 애플리케이션에서 EJS를 사용하는 방법입니다.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.set('views', './views');
app.get('/', (req, res) => {
res.render('index', { title: 'Welcome', message: 'Hello, EJS!' });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
EJS 템플릿 예제
<!-- views/index.ejs --> <!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <h1><%= message %></h1> </body> </html>
사용자 인증과 세션 관리 (User Authentication and Session Management)
Node.js 애플리케이션에서 사용자 인증과 세션 관리를 위해 Passport.js를 사용할 수 있습니다.
Passport.js 설치 및 설정
npm install passport passport-local express-session
Passport.js 설정
const express = require('express');
const session = require('express-session');
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const app = express();
app.use(session({ secret: 'secretKey', resave: false, saveUninitialized: true }));
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(
(username, password, done) => {
// 사용자 인증 로직
if (username === 'user' && password === 'pass') {
return done(null, { id: 1, name: 'User' });
} else {
return done(null, false);
}
}
));
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser((id, done) => {
done(null, { id: 1, name: 'User' });
});
app.post('/login', passport.authenticate('local', {
successRedirect: '/',
failureRedirect: '/login'
}));
app.get('/', (req, res) => {
if (req.isAuthenticated()) {
res.send('Hello, authenticated user!');
} else {
res.send('Hello, guest!');
}
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
웹 소켓을 활용한 실시간 통신 (Real-time Communication with WebSockets)
웹 소켓을 사용하면 서버와 클라이언트 간에 실시간 양방향 통신이 가능합니다. Node.js에서는 Socket.io를 사용하여 쉽게 구현할 수 있습니다.
Socket.io 설치 및 설정
npm install socket.io
Socket.io 서버 설정
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
server.listen(3000, () => {
console.log('Server is running on port 3000');
});
클라이언트 코드
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
var messages = document.getElementById('messages');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
보안 관리 (Security Management)
Node.js 애플리케이션에서 보안 관리에는 사용자 입력 검증, CSRF 방어, XSS 방어 등이 포함됩니다.
사용자 입력 검증 (User Input Validation)
express-validator를 사용하여 사용자 입력을 검증할 수 있습니다.
npm install express-validator
예제 코드
const express = require('express');
const { body, validationResult } = require('express-validator');
const app = express();
app.use(express.json());
app.post('/register', [
body('username').isAlphanumeric().withMessage('Username must be alphanumeric'),
body('password').isLength({ min: 6 }).withMessage('Password must be at least 6 characters long')
], (req, res) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return res.status(400).json({ errors: errors.array() });
}
res.send('User registered successfully');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
CSRF 방어 (CSRF Protection)
csurf 미들웨어를 사용하여 CSRF 공격을 방어할 수 있습니다.
npm install csurf
예제 코드
const express = require('express');
const session = require('express-session');
const csurf = require('csurf');
const app = express();
app.use(session({ secret: 'secretKey', resave: false, saveUninitialized: true }));
app.use(express.urlencoded({ extended: false }));
app.use(csurf());
app.get('/form', (req, res) => {
res.send(`<form action="/process" method="POST">
<input type="hidden" name="_csrf" value="${req.csrfToken()}">
<button type="submit">Submit</button>
</form>`);
});
app.post('/process', (req, res) => {
res.send('Form processed successfully');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
XSS 방어 (XSS Protection)
xss-clean 패키지를 사용하여 XSS 공격을 방어할 수 있습니다.
npm install xss-clean
예제 코드
const express = require('express');
const xss = require('xss-clean');
const app = express();
app.use(express.json());
app.use(xss());
app.post('/submit', (req, res) => {
res.send('Data submitted successfully');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
이 문서에서는 Node.js를 사용한 웹 애플리케이션 개발의 다양한 측면을 다루었습니다. 뷰 엔진과 템플릿 엔진 설정, 사용자 인증과 세션 관리, 웹 소켓을 활용한 실시간 통신, 그리고 보안 관리 방법을 소개하고, 상세한 설명과 함께 다양한 예제를 제공하였습니다. 이를 통해 Node.js 웹 애플리케이션 개발의 기본을 이해하고, 실용적인 기술을 습득할 수 있습니다.