Node Express 웹 어플리케이션 기반에서 웹페이지의 호출 프로세스를 단계별로 확인하고 관련 파일과 코드의 용도 및 기능을 파악해보겠습니다.

1)터미널에서 npm start 명령어를 실행한다.

-package.json파일내 Scripts 속성에 정의된 명령어가 실행된다.
-node 명령어를 통해 bin폴더내 www 파일이 실행된다.

2)./bin/www 파일

- www 자바스크립 파일에서는 app.js 모듈을 호출하여 app.js 모듈에서 제공된 Express Application 객체를 HTTP 웹서버와 지정된 포트를 통해 서비스하고 통신환경을 모니터링합니다.
-주석을 통해 관련 제공 기능을 설명하였으니 참고하시기 바랍니다. 

/**

 * app.js 참조하고 Node Web Applicaition 객체 생성하기

 * debug.js 참조하고 디버깅 객체 생성하기

 * http.js 모듈 참조하고 Express 웹서버 객체 생성하고 관리하기

 */

var app = require("../app");

var debug = require("debug")("sample-project1:server");

var http = require("http");

/**

 * .env 환경설정 파일이 존재하며 해당 파일에 PORT 설정값을 이용하고

 * 해당 설정값이 없으면 3000번 포트를 기본 포트로 사용한다.

 */

var port = normalizePort(process.env.PORT || "3000");

app.set("port", port);

/**

 * 노드 어플리케이션을 서비스할 노드 웹서버 객체 생성하기

 */

var server = http.createServer(app);

/**

 * 노드 웹서버 http통신을 위해 포트를 지정 통신 포트로 설정하고 사용자 요청 수신을 대기한다.

 * 웹서버 통신중 발생하는 에러 처리를 위한 이벤트 처리기를 등록한다.

 * 웹서버 http Request 요청이 수신될때마다 해당 요청을 모니터링할 수신 이벤트 처리기를 등록한다.

 */

server.listen(port);

server.on("error", onError);

server.on("listening", onListening);

/**

 * 통신 포트 체크 함수

 * 통신 포트는 숫자형식의 특정 지정 포트방식 또는 통신방식이 사전 지정된 네임드 파이프 방식을 지원한다.

 */

function normalizePort(val) {

  var port = parseInt(val, 10);

  if (isNaN(port)) {

    // named pipe

    return val;

  }

  if (port >= 0) {

    // port number

    return port;

  }

  return false;

}

/**

 * HTTP 웹서버 통신 에러발생시 에러 처리를 위한 이벤트 처리기

 */

function onError(error) {

  if (error.syscall !== "listen") {

    throw error;

  }

  var bind = typeof port === "string" ? "Pipe " + port : "Port " + port;

  // 발생 에러코드 유형별  예외처리

  switch (error.code) {

    case "EACCES":

      console.error(bind + " requires elevated privileges");

      process.exit(1);

      break;

    case "EADDRINUSE":

      console.error(bind + " is already in use");

      process.exit(1);

      break;

    default:

      throw error;

  }

}

/**

 * HTTP 통신 이벤트 처리기

 */

function onListening() {

  var addr = server.address();

  var bind = typeof addr === "string" ? "pipe " + addr : "port " + addr.port;

  debug("Listening on " + bind);

}

 
3)app.js

-app.js 모듈파일을 통해 Node Express Web Application 객체를 생성하고 각종 Express Application 서비스 환경을 설정하고 관리합니다. 
- Express Web Application 객체는 ./bin/www 파일에서 호출되어 사용됩니다.
-주석을 통해 관련 제공 기능을 설명하였으니 참고하시기 바랍니다.

/**

* Node Express Application 객체 생성 및 서비스 환경 설정을 위한 각종 팩키지 모듈을 참조합니다.

 */

var createError = require("http-errors");

var express = require("express");

var path = require("path");

var cookieParser = require("cookie-parser");

var logger = require("morgan");

var indexRouter = require("./routes/index");

var usersRouter = require("./routes/users");

//Express 어플리케이션 객체 생성

var app = express();

//해당 어플리케이션의 뷰엔진 유형 및 뷰 파일의 제공위치를 설정합니다.

app.set("views", path.join(__dirname, "views"));

app.set("view engine", "pug");

//해당 어플리케이션에서 사용할 각종기능을 추가하고 설정합니다.

app.use(logger("dev")); //로깅설정

app.use(express.json()); //json 기능 추가

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

app.use(express.static(path.join(__dirname, "public"))); //public폴더 정적 서비스 폴더로 추가

//각종 라우팅 파일 루트 호출 주소 설정처리

//URL 호출을 통한 사용자의 각종 요청과 응답을 라우터를 통해 처리합니다.
//MVC패턴에서의 Controller 역할을 Router가 담당합니다. 
app.use("/", indexRouter);
app.use("/users", usersRouter);

//에러 발생시 404 에러 감지 및 처리기능 추가 
app.use(function(req, res, next) {
  next(createError(404));
});

// Express Application내 에러발생 시 에러 처리를 위한 전역 예외처리 기능 사용설정
app.use(function(err, req, res, next) {
  // set locals, only providing error in development  
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};
  // render the error page
  res.status(err.status || 500);
  res.render("error");
});
 
//어플리케이션 객체 노출
module.exports = app;

4)사용자가 URL을 통해 특정 웹페이지를 호출한다.

-사용자가 http://localhost:3000 주소로 해당 어플케이션의 루트(디폴트) 웹페이지를 호출한다.
-app.js 파일내 사용자 URL 디폴트 페이지 호출에 대한 요청/응답 설정 항목인 app.use("/", indexRouter); 을 통해 routes\index.js 라우팅 파일이 호출됩니다.
- app.use("/", indexRouter);는 사용자가 URL을 통해 최상위 루트 경로(“/”)를 호출하면 indexRouter가 해당 요청을 처리할수 있게 설정한것으로 indexRouter는 var indexRouter = require("./routes/index"); 참조코드에서 알수 있듯이 routes/index.js 라우팅 파일을 말합니다.

5)routes/index.js 라우팅 파일 호출

-라우팅 파일의 주요 목적은 사용자의 요청과 응답을 처리하는 기능을 제공합니다.
-사용자는 일반적으로 URL(URI)을 통해 웹서버내 지정된 웹 어플리케이션에 자원을 호출하며 각종 사용자 URL 호출 형식과 기능을 미리 정의하는 기능을 라우터가 제공하고 그 실체가 각종 라우팅 파일입니다. 

/**

 * express 노드 팩키지 모듈을 참조하고

 * 사용자의 요청과 응답을 처리할 라우터 객체를 생성합니다.

 */

var express = require('express');

var router = express.Router();

/* 사용자가 URL을 통해 HTTP통신 방식중 Get 방식으로 디폴트 페이지를 호출 */

/**

 * 사용자가 URL을 통해 HTTP통신 방식중 Get 방식으로 디폴트 페이지를 호출한 경우에 대한 처리정의

 * 호출방식 및 호출주소형식을 정의하고 httpRequest,httpResponse 객체를 이용해 사용자의 요청에 대한

 * 정보를 추출하고 사용자에게 어떤 내용을 응답할것인지를 기술합니다.

 * 아래코드는 res객체의 render메소드를 통해 views폴더내 index.pug 뷰 파일에 title속성과 값을 포함한 데이터 객체를

 * 전달하고  뷰엔진(pug or ejs)에 의해 처리된 결과인 html을 사용자 응답값으로 브라우저에 전달합니다.

 * http://localhost:3000/ 형식으로 호출되는 라우팅 메소드 정의

 * 응답결과로 index.pug 뷰가 렌더링 됩니다.

 */

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });

});

/**

 * http://localhost:3000/test 형식으로 호출되는 라우팅(액션) 메소드정의

 * 응답결과로 index.pug 뷰가 렌더링 됩니다.

 * 샘플용으로 라우팅 메소드를 하나더 추가해보았습니다.

 */

router.get('/test', function(req, res, next) {

  res.render('index', { title: 'Express' });

});

 
module.exports = router;

6)views/index.pug 뷰 파일 렌더링

-routes/index.js 라우팅 파일내 http://localhost:3000/ 형식을 호출되는 라우팅 메소드에서 응답결과로 호출되는 index.pug 뷰 파일로 PUG 뷰엔진에 의해 관련 뷰파일내 소스가 HTML파일로 변환(렌더링)되어 라우팅 메소드로 전달되고 HTML 소스가 최종적으로 웹브라우저에 응답 결과물로 전달됩니다.
-아래 코드는 PUG 문법으로 PUG 뷰엔진에 의해 HTML코드로 렌더링됩니다.
-PUG 뷰엔진을 사용하면 HTML 생성을 위한 PUG 문법을 새로 배워야하는 부담이 있기에 많은 프로젝트에서 PUG 뷰 엔진 보다는 HTML코드를 바로 재사용 가능한 EJS 뷰 엔진을 사용합니다.
-라우팅 메소드에서 index.pug 호출시 함께 전달한 title이란 데이터가  welcome to 문자열 다음에{title}에서 사용되고 있는 것 처럼 라우팅 메소드는 뷰파일로 각종 데이터를 전달할수 있고 뷰에서는 뷰엔진 기술을 이용해 전달 데이터를 기반으로 뷰파일 내 정의된 html파일을 변조한후 변조된 최종 결과물은 웹브라우저에 전달되어 사용됩니다. 

extends layout

block content

  h1= title

  p Welcome to #{title}