이전에 우리는 GET 요청에 적절한 반응을 해주지 않아서 무한로딩에 걸렸었습니다.

• 해결을 위해서 GET 요청이 원하는 데로 RESPONSE 로 페이지를 줘야합니다.

GET 요청에 반응하는 방법

• app.get('/', handleGetHome) 의 콜백함수인 handleGetHome 에는 3개의 파라미터가 사용가능한데 첫번째는 req<object> (요청)이고 두번째 핸들러는 res<object> (반응)으로 사용합니다. 세번째 이상은next<function>(미들웨어)로 1개 사용합니다.
  • 위의 Controller(라우팅 함수) 는 express 가 제공합니다.
  • res<object> 에서 제공하는 몇 가지 메소드
    • res.end() : 요청을 끝냅니다.
    • res.send() : 파라미터 안의 정보로 유저에게 페이지를 제공합니다.
  • next<function> : 함수 내부 작업 수행후 다음 Controller로 이동시키기 위한 함수, 밑에서 자세하게 알아봅시다.

• 예시 (미들웨어 사용 X, 글로벌 미들웨어 X)

// ~src/server.js

...
// GET 요청(request)에 반응(response)
app.get("/", handleGetHome);

...
// "/" 페이지 요청시 반응
function handleGetHome(req, res) {
  console.log("GET /");
  return res.send("Home Page");
}

    간단한 페이지를 유저에게 보여주는 것 확인할 수 있습니다.

Middleware (미들웨어)

• next<function>

  • Controller 가 미들웨어로 사용될 경우 라우팅 함수 의 세번째 매개변수로 사용됩니다.
  • 미들웨어인 Controller는 정의할때 본인의 스코프 내에 next() 를 작성하여 다음 Controller 가 실행되게 합니다.
  • 본인의 스코프 내에 조건문을 작성하여 어떤 조건이 충족시 다음의 Controller 가 실행되는 것을 막을 수도 있습니다.

• 예시 (미들웨어 사용 O, 글로벌 미들웨어 X)

// ~src/server.js

...
// GET 요청(request)에 반응(response)
app.get("/", middleware, handleGetHome);

...
// "/" 페이지 요청시 반응
function handleGetHome(req, res) {
  return res.send("Home Page");
}

// Middleware 정의
function middleware(req, res, next) {
  console.log(`GET ${req.url}`);
  next();
}

    위와 같이 코드 작성시 미들웨어 사용 전후 결과는 같습니다만 Controller(콜백함수)마다 목적을 정확하게 정의해줄 수 있고 반복되는 코드 작성을 방지할 수 있습니다.

• Global Middleware
  • 어느 URL 에서도 사용되는 Middleware
  • app.use() 사용
  • 순서가 중요합니다. app.use() 는 항상 app.get() 보다 위에 위치해야 합니다.
• 예시 (미들웨어 사용 O, 글로벌 미들웨어 X)

// ~src/server.js

...
// 글로벌 미들웨어
app.use(handleUrl);

// GET 요청(request)에 반응(response)
app.get("/", handleGetHome);

...
// "/" 페이지 요청시 반응
function handleGetHome(req, res) {
  return res.send("Home Page");
}

// Middleware 정의
function handleUrl(req, res, next) {
  console.log(`{req.method} ${req.url}`);
  next();
}

    위와 같이 작성시 코드 작성 비용이 줄어들고 requst method 를 정확히 파악할 수 있습니다.

    이제 HTTP GET 요청(Request)과 반응(Response), 미들웨어(Middleware)에 대해서 이해했으니 이를 이용해서 페이지를 렌더링 해주면 됩니다.