Skip to content

새로운 페이지 만들기 예시

Jump to bottom
kyunghan edited this page Jun 2, 2021 · 6 revisions

test라는 새로운 줄기의 라우터를 만들어 보자

라우팅

// app.js
//...
const testRouter = require('./routes/test');

app.use('/test', testRouter);
  • /test라우터의 미들웨어를 선언
  • 선언한 미들웨어를 사용
// routes/test.js
const express = require('express'):
const router = express.Router();
const testCtrl = require('../controllers/testController');

router.get('/', testCtrl.testprint);
module.exports = router;
  • 사용자가 /test에 접속하면 router.get 동작
  • testCtrl.testprint와 같이 동작에 필요한 함수들은 컨트롤러에 따로 명시하여 사용

컨트롤러

// controllers/testController.js
module.exports = {
    testprint: (req, res, next) => {
         res.render('test', {title: test};
    }
};
  • 동작에 필요한 함수들을 모아 놓은 곳
  • render를 통해 뷰에게 동작을 전달

뷰

// views/test.ejs
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title><%= title %></title>
</head>
<body>
	test입니다.
</body>
</html>
  • 사용자가 직접 접하는 화면
  • ejs파일은 html과 js를 같이 사용 가능
  • controller에서 넘어온 동작(변수)사용 가능

test라우터에 동적URL을 사용해보자

// routes/test.js
//...
router.get('/example/:whatever', testCtrl.dynamicURLTest);
  • 루트(/)가 '/test'로 존재하며 루트뒤에 새로운 경로 추가
  • : (콜론)이후는 동적 URL이라 불리며 작성된 URL경로는 어떤 이름으로도 사용될 수 있습니다.
  • 즉 /test/example/1 == /test/example/saver == /test/example/...로 사용될 수 있습니다. 
// controllers/testController.js

// controllers/testController.js
module.exports = {
  testprint: (req, res, next) => {
    res.render('test', { title: 'test111' });
  },
  dynamicURLTest: (req, res,next) => {
    res.render('dynamicTest', { title: 'dynamic111' })
  }
};

라우터와 컨트롤러를 연결

이후 dynamicTest페이지를 생성한 후 /test/example/<동적URL>의 주소로 접속하면 dynamic111이 title인 페이지를 볼 수 있다.

Clone this wiki locally