14주차 회의록 - Sieun1126/Final_projects GitHub Wiki

템플릿 엔진을 사용한 동적 웹 페이지 생성

1. 템플릿 엔진 설정

  1. EJS 설치 프로젝트에 EJS 템플릿 엔진 설치
npm install ejs
  1. 뷰 엔진 설정 src/app.ts 파일을 수정해 EJS를 설정
import express from 'express';
import path from 'path';
import apiRoutes from './routes/api';

const app = express();
const PORT = 3000;

// JSON 파싱 미들웨어
app.use(express.json());

// 정적 파일 제공 설정 (CSS, 이미지 등)
app.use(express.static(path.join(__dirname, 'public')));

// 뷰 엔진 설정
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// API 라우트 연결
app.use('/api', apiRoutes);

// 서버 시작
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

2. 동접 웹 페이지 생성

  1. 라우트 설정 src/routes/pages.ts를 생성하고 동적 페이지를 위한 라우트 작성
import { Router, Request, Response } from 'express';
import { readData } from '../utils/fileHandler';

const router = Router();

// 홈 페이지
router.get('/', async (req: Request, res: Response) => {
    const data = await readData();
    res.render('index', { users: data });
});

export default router;
  1. 메인 서버에 연결 src/app.ts에 페이지 라우트 추가
import pageRoutes from './routes/pages';

// 페이지 라우트 연결
app.use('/', pageRoutes);
  1. 템플릿 파일 작성 src/views 폴더를 생성하고 index.ejs 파일 추가
src/
├── views/
│   └── index.ejs
  • src/views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Company Website</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <h1>User List</h1>
    <ul>
        <% users.forEach(user => { %>
            <li><%= user.name %> - <%= user.email %></li>
        <% }) %>
    </ul>
</body>
</html>
  1. 정적 파일 추가 src/public 폴더를 생성하고 간단한 CSS 파일 추가
src/
├── public/
│   └── styles.css
  • src/public/styles.css
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 20px;
    background-color: #f4f4f9;
}

h1 {
    color: #333;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 5px 0;
}

3. 테스트 실행

npm run dev
⚠️ **GitHub.com Fallback** ⚠️