Express - Routing
-
라우팅
-
같은 주소에서 서로 보여주는 내용이 다를 수 있습니다.
-
url주소의 뒷부분인
path정보에 따라 다른 결과 값이 나타날 수 있습니다.// '/' 와 '/hi'의 차이 app.get('/', (req, res) => { res.send('Hello World!') }) app.get('/hi', (req, res) => { res.send('Hi. This is express router') })
-
Express - Router 객체 사용하기
나만의 쇼핑몰
- 1)로그인 화면 → 2) 회원가입화면 → 3) 로그인을 하고나면 상품 목록 페이지 → 4) 상품을 하나 클릭하면 상품 상세페이지 → 5) 장바구니 페이지(구매하기) → 6) 결제를 하기 위한 배송정보를 입력하는 페이지
- 지금 이 서비스만 해도 페이지가 적어도 6개는 필요합니다. 실제로 서비스를 만들다보면 이런 페이지의 숫자는 엄청나게 늘어납니다. 그럼 이렇게 페이지가 하나씩 늘어날 때마다 index.js 파일에
app.~~가 계속 추가가 되는데요. 이러다보면 파일 하나에 너무 많은 양의 코드가 있고 점점 관리하기가 힘들어지는 문제가 생깁니다. Express 에서는 이를 방지하기 위해 Router 객체를 제공해서 비슷한 route끼리 묶어서 파일로 분리 시킬 수 있게 해줍니다.
Express - Middleware
-
미들웨어란?
router 를 사용하면서 잠깐 미들웨어란 말을 들어보았을 겁니다. 이 미들웨어란 무엇일까요? 먼저 예를 하나 들어보겠습니다. 우리가 매 route 를 생성할 때마다 만약에 공통된 처리를 하고 싶은 경우를 생각해볼게요. 요청이 들어올 때마다 이 요청이 어떤 유저의 요청인지 인증검사를 해야할 수 있어요. 그런 경우에 코드를 작성하게 되면 route 를 하나 만들 때마다 매번 유저 인증을 확인하는 코드를 넣어야 할 것입니다. 이런 반복되는 작업들, 혹은 우리가 정의한 route에 오기 전에 중간에서 미리 처리해야할 것들을 정의해둔 것을 미들웨어라고 합니다.
-
미들웨어
const express = require('express'); const app = express(); app.use((req, res, next) => { console.log(req); next(); }); app.get('/', (req, res, next) => { res.send('Welcome Home'); }); app.listen(3000); -
이런 예시코드를 한번 보겠습니다. 중간에
app.use라고 하는 것이 미들웨어를 쓰겠다고 하는 부분입니다. 저 코드를 사용하면 어떤 요청이 들어오던간에req를 로그로 찍고 나서 실제 route 로 전달되게 됩니다. -
이런식으로 들어온 요청은 우리가 설정한 미들웨어를 통과하고 중간에 응답을 해서 종료가 되거나 아니면 다음 미들웨어가 있는 경우에는 다음 미들웨어로 넘어갑니다.
-
데이터 가공 용도
express.json()express.urlencoded()나중에 배우겠지만 우리는 웹서버에 요청할 때 단순히 url 외에 추가적인 정보를 전달 할 수 있습니다.
POST메서드의body정보가 그것인데요. 이것을 express 에서 사용하려면 복잡한 절차가 필요합니다. 이 데이터를 바로 사용하기 쉽게 가공해주는 미들웨어가 바로 이express.json()입니다.-
index.js 파일 수정
app.use(express.urlencoded({extended: false})) app.use(express.json())
-
-
Express의 기본 제공 미들웨어 - static
Express 애플리케이션의 정적 자산을 제공하는 역할을 하는 static 입니다. 이것을 이용하면 우리의 express 에서도 이제 이쁜 이미지, 신나는 동영상 같은 정적 파일을 제공할 수 있습니다. 사용법은 간단합니다.
app.use(express.static('public'));index.js 파일 중간에 위 코드 한줄만 추가해주세요. 그리고 이제 프로젝트에서 public 폴더를 생성하고 이미지 하나를 해당 폴더에 넣어줍니다.
-
템플릿 엔진
-
템플릿 엔진의 장점
- 많은 코드를 줄일 수 있다.
→ 대부분의 Template Engine은 기존의 HTML에 비해서 간단한 문법을 사용한다. - 재사용성이 높다.
→ 웹페이지 혹은 웹앱을 만들 때 똑같은 디자인의 페이지에 보이는 데이터만 바뀌는 경우가 굉장히 많다. - 유지보수에 용이하다.
→ 하나의 Template을 만들어 여러 페이지를 렌더링하는 작업에는 또 다른 이점이 있다.
- 많은 코드를 줄일 수 있다.
-
템플릿 엔진 - ejs 설치
위와 같은 이유로 템플릿 엔진이란 것을 이제 사용할 것인데요. express 에서 사용가능한 템플릿 엔진은 종류가 많이 있는데요, 우리는 그중에
EJS란 것을 사용해보도록 하겠습니다!$ npm install ejs -
ejs 파일 추가하기
-
설치를 하고 index.js 파일을 수정합니다
-
index.js
app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.get('/test', (req, res) => { let name = req.query.name; res.render('test', {name}); })
-
-
그리고
views폴더를 생성하고test.ejs파일을 추가해줍니다-
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>Document</title> </head> <body> Hi. My name is <%= name %><br> </body> </html>
-
-
잘 뜨긴 하는데요 우리가 만든 파일과 조금 다른 거 같습니다. 우리가 만든 ejs 파일을 먼저 한번 볼까요?
Hi. My name is <%= name %><br>- 중간에 이 부분이 있는데요 저 뒷부분에
<%= name %>이게 있지만 실제 화면에서는 아무것도 보이지 않습니다. 이부분이 ejs 템플릿 문법으로 만약에 name 이라는 변수가 넘어온 것이 있으면 그것을 출력하는 것인데 지금 우리가 넘겨준 것이 없으므로 아무것도 출력하지 않습니다.
- 중간에 이 부분이 있는데요 저 뒷부분에
-
그럼 그 변수를 넘겨준다는 표현은 무엇일까요? 앞서 index.js 파일 부분을 다시 보겠습니다.
app.get('/test', (req, res) => { let name = req.query.name; res.render('test', {name}); })- 여기서 보면 render를 하는데
test와{name}두 개의 인자를 넘겨줍니다. 이는 test.ejs 파일을 그리란 뜻이고 그 ejs 파일에 name 값을 객체로 넘겨준다는 의미입니다. 그렇다면 우리는 name 값을 안 넘겨줘서 아무것도 안 뜬 것은 아닙니다. 분명 여기서 name 이라는 변수를 위에서 생성해서 넘겨주고 있습니다. - 브라우저에서 url 을 변경해 봅시다. [http://localhost:3000/test?name=sparta]
- 여기서 보면 render를 하는데
-
