퍼그 pug

app.get('/example', (req, res) => { res.render('example', { title: 'Express Example', message: 'Hello World' }); });

// example.pug h1= title p= message

app.locals.title = 'Express Example';

// example.pug h1= title p= message

app.get('/example', (req, res) => { res.locals.title = 'Express Example'; res.render('example', { message: 'Hello World' }); });

// example.pug h1= title p= message

app.get('/example', (req, res) => { res.locals.data = { title: 'Express Example', message: 'Hello World' }; res.render('example'); });

// example.pug h1= data.title p= data.message

// 변수 삽입 예시 - var username = 'John Doe' h1 Welcome, {{username}}!

// 조건문 예시 - var isAdmin = true - var isUser = true if isAdmin p You are an admin. else if isUser p You are a User. else p You are not an admin.

- var score = 'C' case score when 'A' p 'A' 학점 입니다 when 'B' p 'B' 학점 입니다 when 'C' p 'C' 학점 입니다 when 'D' p 'D' 학점 입니다 default P '학고' 입니다

// 반복문 예시 - var fruits = ['Apple', 'Banana', 'Orange'] ul each fruit in fruits li= fruit

// 함수 호출 예시 - function capitalize(str) { return str.toUpperCase(); } p= capitalize('hello, world!') p {{ capitalize('hello, world!') }}

// 👩‍💻 라우터 모듈 import const indexRouter = require('./routes/index'); const boardRouter = require('./routes/board');

// 👩‍💻 라우터 설정 app.use('/', indexRouter); app.use('/board', boardRouter);

const express = require('express'); const router = express.Router(); // GET / 라우터 router.get('/', (req, res) => { res.render('index', { title: 'Main' }); }); // 로그인 router.get('/login', (req, res) => { res.render('login', { title: 'Login' }); }); // 회원가입 router.get('/join', (req, res) => { res.render('join', { title: 'Join' }); }); module.exports = router;

const express = require('express') const router = express.Router() let boardList = [ { title : '제목1', writer : '작성자1', content : '내용1' }, { title : '제목2', writer : '작성자2', content : '내용2' }, { title : '제목3', writer : '작성자3', content : '내용3' }, ] // 👩‍💻 게시글 목록 router.get('/', (req, res) => { res.render('board/list', {boardList} ) }) // 👩‍💻 게시글 등록 router.get('/insert', (req, res) => { res.render('board/insert') }) // 👩‍💻 게시글 등록 router.post('/', (req, res) => { // 구조분해할당 const { title, writer, content } = req.body; // const title = req.body.title // const writer = req.body.writer // const content = req.body.content const newBoard = { title, writer, content }; boardList.push(newBoard); res.redirect('/board'); }); // 👩‍💻 게시글 수정 페이지 router.get('/update/:id', (req, res) => { console.log(`id : ${req.params.id}`); let id = req.params.id const board = boardList[id]; res.render('board/update', { board, id }); }); // 👩‍💻 게시글 수정 router.post('/update', (req, res) => { const { id, title, writer, content } = req.body; boardList[id] = { title, writer, content }; res.redirect(`/board/${id}`); }); // 👩‍💻 게시글 삭제 router.post('/delete', (req, res) => { const id = req.params.id; boardList.splice(id, 1); res.redirect('/board'); }); // 👩‍💻 게시글 읽기 // 요청 경로에 파라미터 매핑 방법 ➡ '/:파라미터명' router.get('/:id', (req, res) => { console.log(`id : ${req.params.id}`); let id = req.params.id let board = boardList[id] res.render('board/read', {board, id}) }) module.exports = router;

doctype html html head title= title //- 여기에 CSS 연결 body block content

* { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style-type: none; } a { text-decoration: none; } body { font-family: Arial, sans-serif; } /* header */ header { display: flex; justify-content: space-between; align-items: center; background-color: #333; color: #fff; padding: 0 20px; text-align: center; height: 80px; } header h1 { margin: 0; } header nav { height: 100%; } header nav ul { height: 100%; } header nav li { display: inline-block; height: 100%; } header nav a { display: flex; justify-content: center; align-items: center; color: #fff; text-decoration: none; min-width: 100px; height: 100%; } header nav a:hover { background-color: #fff; color: #333; } /* footer */ footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } .container { border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 300px; margin: 100px auto; } .container-md { border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 480px; margin: 100px auto; } .container-lg { border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 1024px; margin: 100px auto; } .container h2 { text-align: center; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 8px; font-weight: bold; } .form-group input, .form-group .btn { display: inline-block; font-size: 14px; width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .form-group .btn { text-align: center; background-color: #4caf50; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 10px; } .form-group .btn:hover { background-color: #45a049; } /* table */ .table { width: 100%; border-collapse: collapse; margin-top: 20px; } .table th, .table td { border: 1px solid #ddd; padding: 8px; text-align: left; } .table th { background-color: #f2f2f2; } .table tr:hover { background-color: #f5f5f5; } /* button */ .btn-box { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; } .btn { display: inline-block; text-align: center; font-size: 14px; padding: 8px 18px; box-sizing: border-box; background-color: #4caf50; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 10px; }

doctype html html head title= title link(rel='stylesheet', href='/css/style.css') body block content

extends layout block content div.container-lg h1= title h3 #{title} 화면입니다

header h1 Pug nav ul li a(href="/") Home li a(href="/login") Login li a(href="/board") Board

footer p Copyright © 2023 Pug

doctype html html head title= title link(rel='stylesheet', href='/css/style.css') body //- 여기에 header 추가 include fragment/header.pug block content //- 여기에 footer 추가 include fragment/footer.pug

extends layout block content div.container h2 Login form div.form-group label(for="username") Username: input(type="text", id="username", name="username", required) div.form-group label(for="password") Password: input(type="password", id="password", name="password", required) div.form-group button.btn(type="submit") Login a.btn(href="/join") Sign Up

extends layout block content div.container h2 Sign Up form div.form-group label(for="username") Username: input(type="text", id="username", name="username", required) div.form-group label(for="email") Email: input(type="email", id="email", name="email", required) div.form-group label(for="password") Password: input(type="password", id="password", name="password", required) div.form-group button.btn(type="submit") Sign Up

extends ../layout block content div.container-lg div.btn-box h1 게시글 목록 a.btn(href="/board/insert") 글쓰기 table.table(border=1) thead tr th No th Title th Writer tbody each board, index in boardList tr td(width=80)= index td a(href=`/board/${index}`) #{board.title} td(width=200)= board.writer

extends ../layout block content div.container-lg h1 게시글 등록 form(action="/board", method="post") table.table.form-group(border=1) tr th(width="200") Title td input(type="text", name="title") tr th(width="200") Writer td input(type="text", name="writer") tr th(width="200") Content td input(type="text", name="content") div.btn-box a.btn(href="/board") 목록 button.btn(type="submit") 등록

extends ../layout block content div.container-lg h1 #{board.title} table.table(border=1) tr th(width="200") No td #{id} tr th(width="200") Writer td #{board.writer} tr th(width="200") Content td #{board.content} div.btn-box a.btn(href="/board") 목록 a.btn(href=`/board/update/${id}`) 수정

extends ../layout block content div.container-lg h1 게시글 수정 form(action="/board/update", method="post") input(type="hidden", name="id" value=`${id}`) table.table.form-group(border=1) tr th(width="200") No td #{id} tr th(width="200") Title td input(type="text", name="title", value=`${board.title}`) tr th(width="200") Writer td input(type="text", name="writer", value=`${board.writer}`) tr th(width="200") Content td input(type="text", name="content", value=`${board.content}`) div.btn-box a.btn(href="/board") 목록 button.btn(type="submit") 수정

const express = require('express'); const morgan = require('morgan'); const cookieParser = require('cookie-parser'); const session = require('express-session'); const path = require('path'); // 👩‍💻 라우터 모듈 import const indexRouter = require('./routes/index'); const boardRouter = require('./routes/board'); const app = express(); // 포트 설정: 3000 사용 app.set('port', 3000); // 뷰 엔진 설정: Pug를 사용하도록 설정 app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'pug'); // 로깅 미들웨어 설정: 개발 환경에서는 dev 모드로 로그를 출력 app.use(morgan('dev')); // 정적 파일 제공 미들웨어 설정: public 폴더를 정적 파일 제공 디렉토리로 설정 app.use('/', express.static(path.join(__dirname, 'public'))); // JSON 파싱 미들웨어 설정 // - JSON 형식의 요청 본문을 파싱 // - URL 인코딩된 요청 본문을 파싱 app.use(express.json()); app.use(express.urlencoded({ extended: false })); // cookie-parser 미들웨어를 사용하여 쿠키를 파싱하는 부분 app.use(cookieParser()); // Express 애플리케이션에 세션 미들웨어 설정 app.use(session({ resave: false, // 세션 데이터가 변경되지 않으면 서버에 다시 저장하지 않음 saveUninitialized: false, // 초기화되지 않은 세션을 저장소에 저장하지 않음 secret: 'session-secret', // 세션 쿠키 설정 cookie: { httpOnly: true, // 브라우저에서 쿠키에 접근할 때만 가능하도록 httpOnly 속성 사용 secure: false, // HTTPS가 아닌 환경에서도 쿠키 전송 허용 }, name: 'session-cookie', // 세션 쿠키의 이름 설정 })); // 👩‍💻 라우터 설정 app.use('/', indexRouter); app.use('/board', boardRouter); // 404 오류 처리 미들웨어 app.use((req, res, next) => { // 요청된 경로가 존재하지 않을 때 404 상태 코드와 'Not Found' 메시지를 응답으로 전송 res.status(404).send('Not Found'); }); // 에러 처리 미들웨어 app.use((err, req, res, next) => { // 에러가 발생했을 때, 에러 메시지를 콘솔에 출력하고 500 상태 코드와 에러 메시지를 응답으로 전송 console.error(err); res.status(500).send(err.message); }); // Express 애플리케이션을 특정 포트에서 실행하는 부분 app.listen(app.get('port'), () => { // 애플리케이션이 실행되면 콘솔에 해당 포트에서 대기 중임을 출력 console.log(app.get('port'), '번 포트에서 대기 중'); });