EJS (Embedded JavaScript)
EJS는 서버 사이드에서 HTML 템플릿을 동적으로 생성할 수 있는 템플릿 엔진이다. HTML 문서 내에 JavaScript 코드를 삽입하여 데이터를 동적으로 출력할 수 있다. EJS는 특히 Node.js와 Express.js에서 많이 사용된다.
// EJS 템플릿 파일 (views/index.ejs)
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>위 예제에서 <%= title %>과 <%= message %>는 서버에서 전달된 데이터를 포함하는 부분이다. title과 message는 서버에서 렌더링 시 동적으로 삽입된다. 이렇게 EJS는 서버에서 동적으로 HTML 콘텐츠를 생성하는 데 매우 유용하다.
MPA (Multi-Page Application)
MPA는 웹 애플리케이션의 구조 중 하나로, 애플리케이션이 여러 개의 독립적인 HTML 페이지로 구성된다. 각 페이지는 별도의 URL을 가지며, 페이지 전환 시 전체 페이지가 새로 로드된다. MPA는 페이지를 개별적으로 관리할 수 있게 해주며, 사용자 경험과 SEO 최적화 측면에서 유리하다.
특징
- 전체 페이지 리로드: 사용자가 링크를 클릭하거나 다른 페이지로 이동할 때마다, 페이지 전체가 새로 로드된다. 이로 인해 브라우저는 서버로부터 전체 HTML을 받아와야 한다.
- 서버 사이드 렌더링: 각 페이지 요청 시 서버에서 HTML 파일을 생성하여 클라이언트로 전송한다. 이 방식은 서버가 페이지 콘텐츠를 직접 생성하므로 SEO에 유리하다.
MPA는 특히 대규모 웹사이트나 복잡한 콘텐츠 구조를 가진 웹 애플리케이션에서 유용하다. 각 페이지가 독립적으로 로드되기 때문에, 페이지 간 상태를 유지할 필요가 없거나, 각 페이지를 독립적으로 관리하는 것이 유리할 때 적합하다.
쿠키와 세션
쿠키와 세션은 사용자 상태를 관리하는 두 가지 주요 방법이다. 이들은 웹 애플리케이션에서 사용자 정보를 저장하고 관리하는 데 사용된다.
쿠키
쿠키는 클라이언트 측에 저장되는 작은 데이터 조각이다. 쿠키는 웹 브라우저에 저장되며, 클라이언트가 서버로 요청을 보낼 때마다 자동으로 전송된다. 쿠키는 사용자 인증 정보, 사이트 설정 등 다양한 정보를 저장할 수 있다.
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();
app.use(cookieParser());
app.get('/', (req, res) => {
res.cookie('username', 'JohnDoe', { maxAge: 900000, httpOnly: true });
res.send('쿠키가 설정되었습니다.');
});
app.listen(3000, () => {
console.log('서버가 포트 3000에서 실행 중입니다.');
});쿠키는 클라이언트 브라우저에 저장되므로, 사용자의 컴퓨터에 데이터를 저장할 수 있다. 쿠키의 만료 시간, 보안 설정 등을 조정할 수 있으며, httpOnly 플래그를 설정하면 JavaScript에서 접근할 수 없게 된다.
세션
세션은 서버 측에서 사용자 정보를 저장하고 관리하는 방법이다. 클라이언트는 세션 ID만을 가지고 서버와 상호작용하며, 실제 데이터는 서버의 메모리나 데이터베이스에 저장된다.
const express = require('express');
const session = require('express-session');
const app = express();
app.use(session({
secret: '비밀키',
resave: false,
saveUninitialized: true,
cookie: { secure: false } // HTTPS를 사용할 경우 true로 설정
}));
app.get('/', (req, res) => {
if (!req.session.views) {
req.session.views = 1;
} else {
req.session.views++;
}
res.send(`세션의 조회 수: ${req.session.views}`);
});
app.listen(3000, () => {
console.log('서버가 포트 3000에서 실행 중입니다.');
});세션은 서버에서 관리되어, 클라이언트는 세션 ID만을 가지고 있다. 이를 통해 서버는 각 클라이언트의 상태를 안전하게 유지할 수 있다. express-session 패키지를 사용하여 세션을 설정하고 관리할 수 있고, 보안, 기타 설정을 조정할 수 있다.
이와 같이 쿠키와 세션은 웹 애플리케이션에서 사용자 정보를 저장하고 관리하는 데 중요한 역할을 하며, 각각의 장단점에 따라 적절히 사용해야 한다.
이 글에서는 EJS, MPA, 쿠키와 세션의 기본 개념과 사용 방법에 대해 살펴보았다. 각 기술은 웹 애플리케이션의 개발 및 유지 관리에 있어서 중요한 역할을 하고, 각각의 특징을 이해하고 활용하는 것이 성공적인 웹 개발의 핵심이다.
- EJS를 활용하면 동적인 웹 페이지를 서버 사이드에서 손쉽게 생성, 복잡한 HTML 구조를 관리하는 데 유용하다.
- MPA 구조는 페이지가 독립적으로 로드되고 관리되는 방식, SEO 최적화와 페이지 관리 측면에서 장점을 제공한다.
- 쿠키와 세션은 사용자 상태를 저장하고 관리하는 두 가지 방법으로, 각각의 특성과 장점을 이해하고 적절히 활용함으로써 웹 애플리케이션의 성능과 보안을 강화할 수 있다.
