kakasoo

Express-generator로 기초적인 서버 만들기 (2) 본문

프로그래밍

Express-generator로 기초적인 서버 만들기 (2)

카카수(kakasoo) 2021. 3. 9. 18:52
반응형

저번에 이어서 이야기해보자. 저번에 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과 비교해보자.

반응형

'프로그래밍' 카테고리의 다른 글

push한 git commit의 작성자 변경하기  (0) 2023.02.01
Express로 기초적인 서버 만들기  (0) 2021.03.09
라즈베리파이로 집에 서버 설치하기  (0) 2021.03.08
CRA npm run build 시 에러 발생 ( 일시적 해결 방법 )  (0) 2021.03.07
쉘 스크립트와 crontab을 활용한 배포 자동화  (0) 2021.03.07
'프로그래밍' Related Articles more