node.js[Express] 라우팅 모듈패턴

---

1 템플릿 설치

express모듈 템플릿 중의(hbs, pug, ejs) 하나를 설치한다. 

const express = require('express');
const app = express();

//중략..


//view 템플릿
app.set('view engine', 'pug');
app.set('views', 'views');

//index page
app.get('/', (req, res, next)=>{
    res.render('home');
});


//중략...

//서버연결
app.listen(3005);

 

* app.set('views', 'views') : view템플릿 폴더를 views로 지정

 

 

 

 

 

---

2 폴더(경로) 구조

views폴더 아래 layouts 폴더를 생성하고, 각 템플릿에 매칭되는 레이아웃 템플릿 파일을 생성한다.

 

 

---

3 라우트.js 

간단하게 로그인 라우트를 작성해보자. routes폴더 아래 routeLogin.js파일을 생성한 뒤, 아래와 같이 express.Router( )를 지정한다.  loginLoute.js는 사이트 방문자가 도메인/login 으로 접속했을 때 login.pug 템플릿을 로딩한다. 

 

const express = require('express');
const app = require('app');
const router = express.Router();


app.set('view engine', 'pug');
app.set('views' , 'views');


router.get( '/' , (req, res, next)=>{
    res.render('login');
});


module.exports = router;

 

 

위의 코드에서 routeLogin.js에서 입력한 router.get('/')경로는 '도메인/login'과 같다는 점에 유의하자. 

 

 

 

 

 

 

 

---

4 템플릿 작성

layouts폴더에 있는 레이아웃 관련 pug파일은 사이트의 핵심 GUI를 담당한다. 사용자 입장에서 페이지가 변경되더라도 기본적인 배경색상, Header, Footer는 변경되지 않는다. 즉, mainLayout에는 변하지 않는 html정보를 넣고, 하위 템플릿에는 각 페이지에 맞는 특수한 html정보를 넣어준다.

템플릿 구조(부모-자식 관계)

 

pug와 같은 템플릿 구조 역시 모듈식이다. 부모 템플릿에서 특정 부분을 자식 템플릿으로 아웃소싱할 때는 'block content'를 사용하며, 모듈을 받는 템플릿(자식)은 'extends [경로]'로써 해당 부분을 받는다. 위에서 템플릿 모듈의 경로는 app.set('views', 'views')에서 지정했듯, views 폴더가 시작점이다.

 

 

 

 

 

 

---

5 라우트 import (index.js)

웹서버 main실행 파일은 사용자 요청이 있을 때마다 모듈로 나눠진 라우트 파일들을 불러온다. 

 

const express = require('express');
const app = express();

//템플릿 설정
app.set('view engine', 'pug');
app.set('views', 'views');


//라우팅 미들웨어
const loginRoute = require('./routes/loginRoute');
app.use('/login', loginRoute);


//메인 페이지 
app.get('/', (req,res)=>{
	res.send('hello world');
})

//https 서버연결
app.listen(3005);

 

routes폴더에 있는 라우트 파일을 담고 있는 라우트 변수를 생성한 뒤, 각 라우터별로 미들웨어를 설정한다. 위의 코드를 실행하면 아래와 같다.