주제
routing
라우팅을 이용하여 각각의 url에 따라 다른 결과물 표시
middleware
웹 프레임워크의 특징. 반복해서 자주 해야 되는 동작들을 미리 처리해두고 필요할 때 사용
EJS
View 템플릿
상세 내용
1. Express - Routing
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World! <a href="/hi">Say Hi!</a>');
})
app.get('/hi', (req, res) => {
res.send('Hi, this is express router.');
})
app.listen(port, () => {
console.log(`listening at http://localhost:${port}`);
})→ path가 '/'일 때 = 도메인 주소만 입력하고 들어왔을 때
→ '/hi' 로 진입할 수 있는 router
※ http method
- 주소를 요청하는 방식. 같은 주소라도 어떤 방식으로 요청하는지에 따라 응답을 다르게 할 수 있다.
Express - Router 객체 사용하기
비슷한 router 끼리 묶어서 파일로 분리시켜 관리
router 객체를 사용하기 전 코드
app.get('/goods/list', (req, res) => {
res.send('상품 목록 페이지')
})
app.get('/goods/detail', (req, res) => {
res.send('상품 상세 페이지')
})
app.get('/user/login', (req, res) => {
res.send('로그인 페이지')
})
app.get('/user/register', (req, res) => {
res.send('회원가입 페이지')
})```
### router 객체로 비슷한 router를 묶어서 모듈식으로 처리/관리
Express 에서는 Router 객체를 "mini-app" 이라고 부르기도 함
#### goods.js (routes/goods.js)
```node
var express = require('exress');
var router = express.Router();
router.get('/list', function (req, res, next) {
res.send('Router 상품 목록 페이지');
});
router.get('/detail', function (req, res, next) {
res.send('Router 상품 상세 페이지');
});
module.exports = router;index.js
const goodsRouter = require('./routes/goods');
app.use('/goods', goodsRouter);
2. Express - Middleware
반복되는 작업들, 혹은 정의한 route에 오기 전에 중간에서 미리 처리해야 할 것들을 정의해 둔 것
예) 요청이 들어올 때마다 매번 어떤 유저의 요청인지 인증검사를 하기 위한 유저 인증 코드
const express = require('express');
const app = express();
// middleware를 사용하는 부분
// 어떤 요청이 들어오건 간에 req를 로그로 찍고 나서 실제 route로 전달되게 됨
app.use((req, res, next) => {
console.log(req);
next();
});
app.get('/', (req, res, next) => {
res.send('Welcome!');
});
app.listen(3000);들어온 요청은 우리가 설정한 미들웨어를 통과하고 중간에 응답을 해서 종료가 되거나 (res.send()) 아니면 다음 미들웨어가 있는 경우에는 다음 미들웨어로 넘어감.
데이터 가공 용도
express.json, express.urlencoded()
웹서버에 요청할 때 단순히 url 외에 추가적인 정보 전달 가능
예) Post 메서드의 body 정보 - express 에서 사용하려면 복잡한 절차가 필요한데, 이 데이터를 바로 사용하기 쉽게 가공해주는 미들웨어가 express.json()이다.
app.use(express.urlencoded({extended: false}));
app.use(express.json());Express의 기본 제공 미들웨어 - static
- Express 애플리케이션의 정적 자산을 제공하는 역할 수행
이를 이용하면 express에서 이미지, 동영상 등의 정적 파일 제공 가능
프로젝트에서 public 폴더를 생성하고 이미지를 넣은 후 아래 코드 추가
app.use(express.static('public'));Template Engine
템플릿 엔진을 사용하면 일관된 양식의 HTML 파일에 그때그때 원하는 데이터를 동적으로 삽입해서 우리가 원하는 형태의 홈페이지를 구성할 수 있다.
Template Engine의 장점
1. 많은 코드를 줄일 수 있다.
→ 대부분의 Template Engine은 기존의 HTML에 비해 간단한 문법 사용
2. 재사용성이 높다.
→ 웹페이지 혹은 웹앱을 만들 때 똑같은 디자인의 페이지에, 보이는 데이터만 바뀌는 경우가 굉장히 많다.
3. 유지보수에 용이하다.
→ 하나의 Template을 만들어 여러 페이지를 렌더링하는 작업에는 또 다른 이점이 있다.
Template Engine 설치
ejs 설치
npm install ejs
- package.json 파일을 열었을 때 dependencies 부분에 ejs가 들어가 있으면 정상적으로 설치된 것.
views 폴더를 생성하고, test.ejs 파일 추가
app.set('views', __dirname + '/views');
app.set('view engine', ejs);
app.get('/test', (req, res) => {
let name = req.query.name;
res.render('test', {name}); // test: test.ejs 파일을 그리라는 뜻
})<body>
Hi. My name is <%= name %>
</body><%= name %> 부분은 ejs 템플릿의 문법으로, 만약에 name이라는 변수가 넘어온 것이 있으면 그것을 출력하는데, 넘어온 것이 없으면 아무것도 출력하지 않는다.
