3. 라우팅 분리하기
1) 분리하는 방법
보통 routes 폴더 안에 여러 route 파일들을 두는 구조를 이용
//위치: routes/user.js
const express = require('express');
const router = express.Router();
//GET / 라우터
router.get('/', (req, res) => {
//GET /user/
res.send('hello user');
});
module.exports = router;// app.js
const indexRouter = require('./routes');
const userRouter = require('./routes/user');
app.use('/', indexRouter);
app.use('/user', userRouter);
4. req, res 에 대하여
1) req
req는 클라이언트가 서버로 보낸 HTTP 요청에 대한 정보를 담고 있음
- req.app: req 객체를 통해 app 객체에 접근, req.app.get('port')와 같은 식으로 사용
- req.body: body-parser 미들웨어가 만드는 요청의 본문을 해석한 객체
- req.cookies: cookie-parser 미들웨어가 만드는 요청의 쿠키를 해석한 객체
- req.ip: 요청의 ip 주소가 담겨 있음
- req.params: 라우트 매개변수에 대한 정보가 담긴 객체
- req.query: 쿼리스트링에 대한 정보가 담긴 객체
- req.signedCookies: 서명된 쿠키들은 req.cookies 대신 여기에 담겨 있음
- req.get(헤더 이름): 헤더의 값을 가져오고 싶을 때 사용하는 메서드
2) res
res는 서버가 클라이언트에게 응답을 보낼 때 사용하는 객체
- res.app: req.app처럼 res 객체를 통해 app 객체에 접근
- res.cookie(키, 값, 옵션): 쿠키를 설정하는 메서드
- res.clearCookie(키, 값, 옵션): 쿠키를 제거하는 메서드
- res.end(): 데이터 없이 응답을 보냄
- res.json(JSON): JSON 형식의 응답을 보냄
- res.redirect(주소): 리다이렉트할 주소와 함께 응답을 보냄
- res.render(뷰, 데이터): 다음 절에서 다룰 템플릿 엔진을 렌더링해서 응답할 때 사용하는 메서드
- res.send(데이터): 데이터와 함께 응답을 보냄. 데이터는 문자열, HTML, 버퍼,객체나 배열 다 가능
- res.sendFile(경로): 경로에 위치한 파일을 응답
- res.set(헤더, 값): 응답의 헤더를 설정
- res.status(코드): 응답 시의 HTTP 상태 코드를 지정
5. pug 템플릿 엔진
템플릿 엔진: HTML의 단점을 개선
- 반복문 조건문 변수 등을 사용할 수 있음
- 동적인 페이지 작성 가능
- PHP, JSP 와 유사
- 대표적으로 pug가 있음
Pug
- 태그를 닫을 필요 X
- 들여쓰기로 표현
- css 처럼 표현 가능!
<div class="jade"></div>=>.jade로 표현!
보통 views 폴더 안에 pug 파일들을 위치시킴
npm i pug: 설치
코드 예제
//app.js -> pug 템플릿 설정해줘야함
app.set('views', path.join(__dirname, 'views')); // 템플릿 파일 위치
app.set('view engine', 'pug'); // Pug를 템플릿 엔진으로 설정//views/layout.pug
doctype html
html
head
title= title
link(rel='stylesheet', href='/style.css')
body
block content
//views/index.pug
extends layout
block content
h1= title
p Welcome to #{title}
//views/error.pug
extends layout
block content
h1= message
h2= error.status
pre #{error.stack}6. nonjucks 템플릿 엔진
pug 가 익숙해지지 않으면 nonjucks!
확장자는 html로 함
코드예제
//app.js
const nunjucks = require('nunjucks');
app.set('view engine', 'html');
nunjucks.configure('views', {
express: app,
watch: true,
});//views/layout.html
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
//views/error.html
{% extends 'layout.html' %}
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
//views/index.html
{% extends 'layout.html' %}
{% block content %}
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
{% endblock %}