Express

라우팅

 - 라우팅은 URI ( 또는 경로 ) 및 특정한 HTTP 요청 메소드 ( GET, POST 등 )인 특정 엔드포인트에 대한 클라이언트

   요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다.

 

1. 클라이언트 요청은 URI + HTTP 메소드로 이루어진다.

 - 네이버 루트에 접속하는 경우 -> 'http://www.naver.com/' URI + Enter ( HTTP GET )

 

2. 라우팅은 클라이언트 요청에 응답하는 방법을 말한다.

 - 클라이언트 요청은 URI와 HTTP 메소드로 이루어 진다고 했다. 근데 요청에 대한 응답을 주기 위해서는 URI가

   어떤 구조로, 어떤 메소드로 요청을 올지 미리 서버쪽에서 정의해 두어야 한다. 

 - 예를 들어 '/users 구조의 URI 가 GET 메서드로 올 때는 users.html을 보내주자' 와 같은 규칙들이다.

 - Express에서는 이를 간단하게 처리해주는 함수가 존재 한다!!

 

라우트 정의

app.METHOD(PATH, HANDLER)

 - app은 express의 인스턴스

 - METHOD는 HTTP 요청 메서드

 - PATH는 서버의 경로 ( URL 루트 하위 Endpoint )

 - HANDLER는 METHOD와 PATH가 일치할 때 실행되는 함수

 

● 간단한 라우팅 예시

app.get('/users', (req, res) => {
  res.send('this is users');
});

 - /users 라우트에 대한 GET 요청 응답은 클라이언트 화면에 'this is users'를 뿌려주는 것

 

● HANDLER 두 개 순차 실행 예시

app.get('/example/b', (req, res, next) => {
  console.log('the response will be sent by the next function ...');
  next(); // 반드시 next 호출해줘야 다음 HANDLER로 갈 수 있다.
}, (req, res) => {
  res.send('Hello from B!');
});

 - 라우트에서 HANDLER는 두 개 이상 올 수 있다.

 - HANDLER는 인자 순서로 차례대로 실행한다.

 - 다음 HANDLER를 실행시키고 싶다면 반드시 HANDLER에 'next'라는 인자를 추가해 주고 HANDLER 내부의 마지막

   부분에 next를 호출해 주어야 한다.

 - HANDLER의 인자가 ( req, res, next )인 함수를 '미들웨어'라고 한다.

 

● app.route() - 라우트 경로에 다양한 메소드 체이닝

app.route("/books")
	.get((req, res) => {
    	res.send('Get a random book');
    })
    .post((req, res) => {
    	res.send('Add a random book');
    })
    .put((req, res) => {
    	res.send('Update a random book');
    })

 - /books 경로에 대해 get, post, put 요청이 왔을 때 한번에 표현 가능

 

● express.Router()를 통해 아래와 같이 모듈화 가능

 

// book.js
import { Router } from "express";

export default (app) => {
  const router = Router();
  app.use("/books", router);

  router.get("/", (req, res) => {
    res.send("Get a random book");
  });

  router.post("/", (req, res) => {
    res.send("Add a book");
  });

  router.put("/", (req, res) => {
    res.send("Update the book");
  });
};

// app.js
import app from "express";
import bookRouter from "./books";

const app = express();

bookRouter(app);

 

미들웨어 ( Middleware )

 - 미들웨어란 인자가 req, res, next인 함수를 이야기한다.

 

 - req, res는 각각 요청, 응답 객체이며 next는 특별한 함수이다.

   next내 인자 없이 그냥 호출된다면 ' 다음 라우트로 이동 ' 하라는 뜻이고, next 안에 인자가 있는 상태로 호출하게 되면

   바로 ' 에러 처리 미들웨어 ' 로 이동하게 된다.

- 라우트 이동시 req, res 객체는 그대로 전달된다.

 

 - 미들 웨어는 (req, res, next ) 인자만 가진다. 그런데 에러처리 미들웨어는 err이라는 인자가 추가된다. 

   err은 next의 인자 값이다.

미들웨어 구조
function(req, res, next) {}

에러 처리 미들웨어 구조
function(err, req, res, next) {}

 - 미들 웨어가 들어가는 위치는 아래와 같다.

// 모든 요청에 대해 적용
app.use(Middleware);


// 라우터에 적용
router.use(Middleware);


// METHOD, PATH에 맞는 요청일때만 적용
app.METHOD(PATH, Middleware[, Middleware[, Middleware ...]])

 - 미들 웨어를 사용하면

1. 라우팅 순서를 제어할 수 있다.

import express from "express";

const app = express();

const myLogger = (req, res, next) => {
  console.log("Logged");
  next();
};

app.use(myLogger);

app.get("/", (req, res) => {
  res.status(200).json({ status: "succ" });
});

app.listen(3000);

// Looged

 - next()를 생략하면 get 요청은 받을 수 없다.

 

2. req 값을 조작할 수 있다.

import express from "express";

const app = express();

const myLogger = (req, res, next) => {
  console.log("Logged");
  req.user = "kim";
  next();
};

app.use(myLogger);

app.get("/", (req, res) => {
  console.log(req.user);
  res.status(200).json({ status: "succ" });
});

app.listen(3000);

// Looged
// kim

3. 미들 웨어는 순차적으로 실행된다.

 

4. 에러 핸들링을 쉽게 할 수 있다.

import express from "express";

const app = express();

const myLogger = (req, res, next) => {
  console.log("Logged");
  req.user = "kim";
  next("인자");
};

app.use(myLogger);

app.get("/", (req, res) => {
  console.log(req.user);
  res.status(200).json({ status: "succ" });
});

app.use((err, req, res, next) => {
  console.log(err);
  res.status(500).json({ status: "fail" });
});

app.listen(3000);

// Looged
// 인자

 

5. 하지만 next 내부 인자가 'route' 인경우 다음 미들웨어가 아닌, 다음 라우터로 넘어간다!'

import express from "express";

const app = express();

const myLogger = (req, res, next) => {
  console.log("Logged");
  req.user = "kim";
  next("route");
};

app.use(myLogger);

app.get(
  "/",
  (req, res, next) => {
    if (true) {
      next("route");
    } else {
      console.log("실행 안됨");
      next();
    }
  },
  (req, res, next) => {
    console.log("실행 될까?");
  }
);

app.get("/", (req, res) => {
  console.log("실행됨");
});

app.use((err, req, res, next) => {
  console.log(err);
  res.status(500).json({ status: "fail" });
});

app.listen(3000);

// Looged
// 실행됨

---

주의

1. next 다음 줄도 실행이 된다!!

import express from "express";

const app = express();

app.get("/", (req, res, next) => {
  next();
  console.log(1);
  console.log(2);
});

app.get("/", (req, res) => {
  console.log("실행");
});

app.length;
app.listen(3000);

// 실행;
// 1;
// 2;

 - 함수는 끝까지 실행되거나, return을 만나야 종료된다.

 - next()로 다음 라우터로 넘어가지만, 경로 끝까지 가면 next() 다음 줄이 실행 된다.

 - 함수 종료를 명시하고 싶으면 next 다음에 return 을 써주면 된다.

 

2. res 다음 줄도 실행된다.

import express from "express";

const app = express();

app.get("/", (req, res, next) => {
  next();
  console.log(1);
  console.log(2);
});

app.get("/", (req, res, next) => {
  console.log("실행");
  res.status(200).json({
    status: "succ",
  });
  console.log("res 다음 줄 ");
  console.log("res 다음, 다음 줄 ");
  next();
});

app.get("/", (req, res) => {
  console.log("마지막 get");
});

app.length;
app.listen(3000);

// 실행
// res 다음 줄
// res 다음, 다음 줄
// 마지막 get
// 1
// 2

 - res는 응답을 보내는 것일 뿐, 함수는 이어서 실행된다.

 - 응답을 보내도 다음 줄에 next가 있으면 다음 라우터로 이동한다.

 

---

 

[ Express ] Express 첫 시작, 라우팅과 미들웨어