node.js 02 혼공

15708 단어 node.js 혼공 node.js

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 폴더를 생성하고 이미지 하나를 해당 폴더에 넣어줍니다.

템플릿 엔진

템플릿 엔진의 장점
1. 많은 코드를 줄일 수 있다.
  → 대부분의 Template Engine은 기존의 HTML에 비해서 간단한 문법을 사용한다.
2. 재사용성이 높다.
  → 웹페이지 혹은 웹앱을 만들 때 똑같은 디자인의 페이지에 보이는 데이터만 바뀌는 경우가 굉장히 많다.
3. 유지보수에 용이하다.
  → 하나의 Template을 만들어 여러 페이지를 렌더링하는 작업에는 또 다른 이점이 있다.
템플릿 엔진 - ejs 설치

위와 같은 이유로 템플릿 엔진이란 것을 이제 사용할 것인데요. express 에서 사용가능한 템플릿 엔진은 종류가 많이 있는데요, 우리는 그중에 EJS란 것을 사용해보도록 하겠습니다!
```
$ npm install ejs
```
ejs 파일 추가하기
1. 설치를 하고 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});
})
```
2. 그리고 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>
```
3. 잘 뜨긴 하는데요 우리가 만든 파일과 조금 다른 거 같습니다. 우리가 만든 ejs 파일을 먼저 한번 볼까요?
```
Hi. My name is <%= name %><br>
```
  - 중간에 이 부분이 있는데요 저 뒷부분에 <%= name %> 이게 있지만 실제 화면에서는 아무것도 보이지 않습니다. 이부분이 ejs 템플릿 문법으로 만약에 name 이라는 변수가 넘어온 것이 있으면 그것을 출력하는 것인데 지금 우리가 넘겨준 것이 없으므로 아무것도 출력하지 않습니다.
4. 그럼 그 변수를 넘겨준다는 표현은 무엇일까요? 앞서 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]

Author And Source

이 문제에 관하여(node.js 02 혼공), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nick2866/node.js-02-혼공-시작

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Converting RealmSwift to Xcode9/Swift 4 (workaround)

TIL.2) Router & Sass_React

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다