[SeSACx코딩온] Express 활용
Express 활용
1. Express 설정
(1) 기본 설정
먼저 Express를 설치하고 기본 설정을 합니다.
npm init // package 초기 설정
npm init -y // package 초기 설정, 질문은 Y로 미리 설정
npm install express // express 설치
npm install ejs // ejs 설치
npm i express ejs // i 는 install 약자 //express, ejs 동시 설치
// app.js
const express = require('express');
const app = express();
const PORT = 8000;
app.set('view engine', 'ejs'); // 템플릿 엔진으로 EJS 사용
app.set('views', './views'); // EJS 파일이 위치한 디렉토리 설정
(2) 서버 실행
서버를 실행하기 위해 app.listen() 메서드를 사용합니다.
app.listen(PORT, () => {
console.log(`${PORT}번 서버 실행`);
});
이제 위에서 설정한 8000번에서 서버가 실행됩니다.
2. 라우팅 설정
Express에서는 다양한 HTTP 요청에 대해 라우터를 설정할 수 있습니다. 예시로 세 개(홈, 소개, 작성)의 라우트를 설정합니다.
// 홈 페이지
app.get('/', (req, res) => {
res.render('index', { title: '홈' });
});
// 소개 페이지
app.get('/about', (req, res) => {
res.render('about', { title: '소개' });
});
// 작성 페이지
app.get('/create', (req, res) => {
res.render('create', { title: '작성' });
});
app.get() 메서드를 사용하여 각 경로에 대한 GET 요청을 처리하고, res.render() 메서드를 통해 EJS 파일을 렌더링합니다.
3. EJS 템플릿 작성
(1) 기본 템플릿 구조
각 EJS 파일은 HTML 구조를 가지고 있으며, <%= %> 구문을 사용하여 변수를 출력할 수 있습니다. index.ejs는 다음과 같이 작성할 수 있습니다:
<!-- index.ejs -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <%= %> 구문을 사용,
res.render('index', { title: '홈' });
에서 입력한 `홈` 이 동적으로 입력됨. -->
<title>project<%= title %></title>
</head>
<body>
<nav>
<div>
<a href="/"><h1>My Blog</h1></a>
</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/create">Create</a></li>
</ul>
</nav>
<div>
<h1>HOME</h1>
</div>
</body>
</html>
(2) 각 페이지 템플릿
<!-- about.ejs -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>project<%= title %></title>
</head>
<body>
<nav>
<div>
<a href="/"><h1>My Blog</h1></a>
</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/create">Create</a></li>
</ul>
</nav>
<div>
<h1>ABOUT</h1>
</div>
</body>
</html>
<!-- create.ejs -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>project<%= title %></title>
</head>
<body>
<nav>
<div>
<a href="/"><h1>My Blog</h1></a>
</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/create">Create</a></li>
</ul>
</nav>
<div>
<h1>CREATE</h1>
</div>
</body>
</html>
4. Express 자주 사용되는 메서드
(1) app
app.get(path, callback): HTTP GET 요청에 대한 라우터를 등록합니다.app.post(path, callback): HTTP POST 요청에 대한 라우터를 등록합니다.app.use([path,] callback [, callback...]): 미들웨어 함수를 등록합니다.app.set(name, value): Express 애플리케이션의 설정 값을 지정합니다. 일반적으로,view engine과views설정을 지정하는 데 사용됩니다.app.listen(port, [host], [backlog], [callback]): HTTP 서버를 시작합니다. 이 메서드는 포트 번호, 호스트 이름, 백로그 크기, 콜백 함수를 전달받습니다.
(2) res
res.send([body]): HTTP 응답으로 데이터를 전송합니다. 이 메서드는 문자열, 버퍼, 객체, 배열 등 다양한 유형의 데이터를 전송할 수 있습니다.res.redirect([status,] path): HTTP 리다이렉트를 수행합니다. 이 메서드는 경로와 상태 코드를 전달받습니다.res.render(view [, locals] [, callback]): 뷰 템플릿을 렌더링합니다. 이 메서드는 뷰 이름과 뷰에 전달될 데이터를 전달받습니다.
(3) req
req.params: 라우트 매개변수를 가져옵니다. 이 메서드는 콜론(:)으로 시작되는 동적 라우트 매개변수를 포함하는 객체를 반환합니다.req.query: URL 쿼리 매개변수를 가져옵니다. 이 메서드는 URL의?뒤에 나오는 쿼리 문자열을 객체로 반환합니다.
5. EJS를 이용한 동적 콘텐츠 생성
EJS를 사용하면 JavaScript 코드를 템플릿 안에서 사용할 수 있습니다. 이를 통해 조건부 렌더링, 반복문 등을 쉽게 구현할 수 있습니다.
<!-- 반복문을 사용하여 여러 개의 `<h1>` 태그를 생성 -->
<% for(let i = 0; i < 5; i++) { %>
<!-- html 부분에서는 ejs에서 해석 가능하므로 <% %> 사용하지 않음. -->
<h1>Hello</h1>
<% } %>