Router

정의

Express 애플리케이션에서 라우팅을 구현하는 객체

라우터 객체는 Express 애플리케이션에서 라우팅을 구현하는 데 사용됩니다. 라우터를 사용하여 HTTP 요청을 특정 핸들러로 매핑할 수 있습니다. 핸들러는 요청을 처리하고 응답을 생성하는 함수입니다.

사용목적

•

HTTP 요청을 특정 핸들러로 매핑합니다.

•

URL 패턴과 매개변수를 사용하여 라우팅을 구현합니다.

•

미들웨어를 사용하여 라우팅을 확장합니다.

주요 속성 및 메소드

속성	설명
app	라우터가 연결된 Express 애플리케이션
use(middleware)	라우터에 미들웨어를 추가합니다.
get(path, handler)	HTTP GET 요청에 대한 핸들러를 정의합니다.
post(path, handler)	HTTP POST 요청에 대한 핸들러를 정의합니다.
put(path, handler)	HTTP PUT 요청에 대한 핸들러를 정의합니다.
delete(path, handler)	HTTP DELETE 요청에 대한 핸들러를 정의합니다.
all(path, handler)	모든 HTTP 요청에 대한 핸들러를 정의합니다.
param(name)	URL 패턴에서 매개변수를 추출하는 함수를 반환합니다.
paramNames()	URL 패턴에서 사용되는 모든 매개변수 이름을 반환합니다.

게시판 예시코드

•

app.js

•

./routes/index.js

•

./routes/users.js

•

./views/board/list.html

•

./views/board/read.html

•

./views/board/insert.html

•

./views/board/update.html

app.js

// 모듈 import
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 app = express()
const port = 3000
app.set('port', port)

// 정적 파일 경로 지정
app.use('/', express.static(path.join(__dirname, 'public')))

app.use(morgan('dev'))
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(cookieParser())
app.use(session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true
  }));


// 라우터 설정
app.use('/', indexRouter)


// 위의 매핑되지 않은 나머지 요청
app.use((req, res, next) => {
    res.status(404).send('NOT FOUND')
})

// 에러 핸들러
app.use((err, req, res, next) => {
    console.error(err);
    res.status(500).send(err.message)
})

// 포트 설정 및 요청 대기
app.listen(app.get('port'), () => {
    console.log(app.get('port'), '번 포트에서 대기 중');
})
JavaScript
복사

./routes/index.js

const express = require('express')

const router = express.Router()


router.get('/', (req, res) => {
    res.send('Main')
})


module.exports = router
JavaScript
복사

./routes/users.js

const express = require('express');

const router = express.Router();

// GET /user 라우터
router.get('/', (req, res) => {
  res.send('Hello, User');
});

module.exports = router;
JavaScript
복사

./routes/board.js

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.body.id;
    console.log('삭제 : ' + 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;
JavaScript
복사

./views/board/list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시글 목록</title>
</head>
<body>
    <h1>게시글 목록</h1>
    <a href="/board/insert">글쓰기</a>
    <ul>
        {% for board in boardList %}
            <li>
            <a href="/board/{{loop.index -1}}">
                <strong>{{ board.title }}</strong>
            </a>
            <p>작성자: {{ board.writer }}</p>
            <p>{{ board.content }}</p>
            </li>
        {% endfor %}
    </ul>
</body>
</html>
HTML
복사

./views/board/read.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시글 읽기</title>
</head>
<body>
    <h1>게시글 읽기</h1>
    <table border="1">
        <tr>
            <td>제목</td>
            <td>{{ board.title }}</td>
        </tr>
        <tr>
            <td>작성자</td>
            <td>{{ board.writer }}</td>
        </tr>
        <tr>
            <td>내용</td>
            <td>{{ board.content }}</td>
        </tr>
    </table>
    <a href="/board/update/{{id}}">수정</a>
    
</body>
</html>
HTML
복사

./views/board/insert.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시글 등록</title>
</head>
<body>
    <h1>게시글 등록</h1>
    <form action="/board" method="post">
        <input type="text" name="title" placeholder="제목"> <br>
        <input type="text" name="writer" placeholder="작성자"> <br>
        <input type="text" name="content" placeholder="내용"> <br>
        <input type="submit" value="등록">
    </form>
</body>
</html>
HTML
복사

./views/board/update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시글 수정</title>
</head>
<body>
    <h1>게시글 수정</h1>
    <form action="/board/update" method="post">
        <input type="hidden" name="id" value="{{id}}">
        <input type="text" name="title" placeholder="제목" value="{{board.title}}"> <br>
        <input type="text" name="writer" placeholder="작성자" value="{{board.writer}}"> <br>
        <input type="text" name="content" placeholder="내용" value="{{board.content}}"> <br>
        <input type="submit" value="수정">
    </form>
    <form action="/board/delete" method="post">
        <input type="hidden" name="id" value="{{id}}">
        <input type="submit" value="삭제">
    </form>
</body>
</html>
HTML
복사