저번에 이어서 이야기해보자. 저번에 bin 폴더의 www에 app이 올라간다는 이야기를 했었다. 그러면 이 페이지는 어디서 나오는 걸까?
app.js
const express = require("express");
const path = require("path");
const cookieParser = require("cookie-parser");
const logger = require("morgan");
const indexRouter = require("./routes/index");
const usersRouter = require("./routes/users");
const app = express();
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));
app.use("/", indexRouter);
app.use("/users", usersRouter);
module.exports = app;
기본적으로 server application은 요청으로부터 응답을 반환하기까지의 과정을 다루며, 이 요청과 응답 사이에서 '미들웨어'라는 개념을 가진다. app.use() 함수로 되어 있는 모든 구문이, 요청 (Request)와 요청(Response)을 다음에 넘기기 전에 추가적인 처리를 하는 함수를 의미한다.
위 코드에서는 미들웨어가 상당히 많다. 당장 필요한 것을 제외하고, 아래처럼 관련된 코드들을 모두 지워보자.
const express = require("express");
const path = require("path");
const indexRouter = require("./routes/index");
const app = express();
app.use(express.static(path.join(__dirname, "public")));
app.use("/", indexRouter);
module.exports = app;이 정도면 꽤 깔끔해진 것 같다. 사실 지운 것들도 모두 필요한 코드지만, 각 미들웨어들이 어떤 용도인지는 나중에 알아보고, 서버가 어떻게 동작하는지에 초점을 맞추고자 한다. 따라서 전부 지우고, 위처럼 만들어주면 되겠다.
위 코드를 설명해보자.
먼저 express, path, 그리고 './routes/index' 를 불러오는 것으로 시작한다. express는 우리가 사용하고 있는 라이브러리로, JavaScript에서 서버를 구축하는 데 필요한 다양한 기능을 제공한다. path는 우리의 파일 경로를 나타내기 위해서 필요한 모듈이다.
그 다음에 불러오는 것이 indexRouter에 정의된 파일이다.
아래의 코드로 내려가면, app을 express()를 사용하여 생성하고, 그 app에 미들웨어로 express.static()이 이어진다.
public
path를 호출하면 __dirname을 호출할 수 있게 되는데, 이는 현재 파일의 경로이다. 여기에 path.join()을 통해 public이라는 경로를 붙인다. app.js가 있는 폴더로부터 public을 붙여, 서버가 그 폴더의 경로를 인식할 수 있게 해준 것이다. 이로써 public 폴더에 있는 이미지, CSS 스타일, 그 외 다양한 리소스에 웹 서버가 접근할 수 있게 된다.
router
다음으로는 app.use('/', indexRouter)로 이어진다. 위와 같이 use문에 '/' 경로가 나오는데, 이는 현재 경로를 의미한다. 여기서 말하는 경로는, API가 들어오는 경로이다. 아직은 이해 안 될수도 있는데, 127.0.0.1:3000과 같이, root에 해당하는 도메인이 '/'에 해당한다. 더 자세한 설명을 위해 indexRouter 가리키는 ./routes/index로 가보자.
routes/index
const express = require('express');
const router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;Express에는 라우팅이라는 개념이 있다. Express 공식 홈페이지에는, 라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것이라고 정의되어 있다. 우리가 app.use('/', indexRouter)를 타고 들어왔으므로, 여기는 '/'에 해당하는 공간이다. 여기가 '127.0.0.1:3000/'에 들어왔을 때의 라우팅이다.
여기서 express.Router()를 사용하여 만든 router 객체는, 나중에 indexRouter라는 이름으로, app에 연결된다.
indexRouter ( 여기서는 router ) 는 GET 메서드를 받았을 때, res.render('index', { title : 'Express' }); 라는 함수로 이어진다. 요청에는 항상 이처럼 응답으로 끝이 나야 하는데, 여기서의 render는 정적 파일을 렌더링해주는 것을 말한다. 위와 같이 작성된 경우, 웹 서버는 index 라는 이름의 정적 파일을 클라이언트에게 제공한다.
여기서의 정적 파일이, 아까 express.static()으로 지정한 public이다.
index.html
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>Express</h1>
<p>Welcome to Express</p>
</body>
</html>
우리가 127.0.0.1:3000에 들어가면 나왔던 페이지의 정체다. 아직까지 이해가 안되면, 127.0.0.1:3000/users로 들어가보고, routes/users file과 비교해보자.
결론
사실 이대로만 하면 서버가 어떻게 구성되어 있는지만 알 뿐, 견고한 프로젝트를 할 수는 없다. 외국의 좋은 글을 번역한 velog 글이 있으므로 여기에 링크를 걸어 놓는다. 서버를 만드는 데 필요한 배경 지식은 이 정도로 하고, 이 글 시리즈 목적에 맞게, 앞으로는 사이트를 만들면서 생기는 주요한 문제들을 짚어보겠다. ( 찾아봐도 잘 안나오는 것 위주로 설명한다. )
