오늘 자바스크립트 과제테스트를 연습을 시작했다.
프로그래머스에서는 시간제한이 있기 때문에 로컬서버에서 진행하려하는데
서버에 대한 지식이 부족해서 먼저 express에 대해서 공부한 부분들을 정리해보려한다.
Express
express에 대한 간단한 개념정도는 알고 있어야 한다고 생각해서 찾아봤다.
Express 기초
이전에 SPA Router 구현을 위해 Express를 설치해서 사용해본 경험이 있어서 간단하게 설치했다.
npm install express설치하면 자동으로 패키지 관리를 위한 package.json파일과 node_modules파일이 생성된다.
server.js 코드 파악해보기
전에 SPA 구현하면서 그냥 따라 작성했던 server.js파일을 뜯어보기로 했다.
const express = require("express");
const path = require("path");
const app = express();
app.use(
"/static",
express.static(path.resolve(__dirname, "frontend", "static"))
);
app.get("/*", (req, res) => {
res.sendFile(path.resolve("frontend", "index.html"));
});
app.listen(process.env.PORT || 5000, () => console.log("Server running ...."));대부분 대충만 이해하고 정확하게는 모르기 때문에 한줄 한줄 뜯어보기로 했다.🤔
import
const express = require("express"); const path = require("path");
ES 모듈을 import하기 위한 문법이다. CommonJS방식이라고 한다.
const moment = require("moment")
여기서 moment가 사용할 패키지 이름이다.
그렇다면 자연스럽게 바로 밑의 코드도 path라는 모듈을 import하는 코드로 파악된다.
path 모듈은 node.js에서 기본적으로 제공하는 모듈이고
파일/폴더/디렉토리 등의 경로를 편리하게 설정할 수 있는 기능을 제공한다고 한다.
resolve라는 메서드를 두번 사용하는데 해당 메서드는 여러개의 경로를 합쳐주는 역할이다.
app
const app = express();
해당 코드는 간단하게 express()를 사용해 앱을 생성하는 코드라고 한다.
middleware
미들웨어를 설정하는 코드라고 전에 주석처리를 했는데 이번 기회에 미들웨어에 대해서 알아보려한다.
Express 미들웨어 이론 & 실용
Express에서 미들웨어란 요청을 처리할 때마다 자동으로 실행되는 함수들이다.
웹 요청과 응답에 대한 정보를 사용해서 필요한 처리를 진행할 수 있도록 분리된 독립적인 함수라고 한다.
미들웨어는 다음과 같은 기능을 수행할 수 있다.
-
요청과 응답을 수정하는 기능
-
요청 및 응답 객체에 데이터를 추가하는 기능
-
요청이나 응답을 다음 미들웨어로 전달하거나 응답을 종료하는 기능
미들웨어는 다음과 같은 방법으로 작성할 수 있다.
-
함수:
Express.js에서 가장 간단한 미들웨어는 함수다. 함수는 요청 객체(req), 응답 객체(res), 그리고 다음 미들웨어로 이동하는 next 함수를 인자로 받는다. 이 함수에서는 작업을 수행한 후 다음 미들웨어로 이동한다. -
미들웨어 함수: 미들웨어 함수는 함수가 아닌 객체를 반환하는 함수다. 이 객체는 요청 객체(req), 응답 객체(res), 다음 미들웨어로 이동하는 next 함수를 포함하며, 이 객체의 메서드를 통해 미들웨어가 실행된다.
-
라우팅 미들웨어: 라우팅 미들웨어는 특정 경로에 대한 요청을 처리하는 미들웨어다. 라우팅 미들웨어는 라우팅을 정의할 때 사용되며, 경로와 미들웨어 함수를 매핑한다.
app.use()
app.use("/static", express.static(path.resolve(__dirname, "frontend", "static")));
app.use()함수는 Express.js에서 가장 기본적인 미들웨어 함수 중 하나다.
이 함수는 미들웨어 함수를 애플리케이션에 추가하는 역할을 한다.
해당 메서드를 사용해서 "/static" 경로에 대한 요청에 대해
앱에서정적 파일을 제공하는 기능을 하는 것 같다.
express.static() 함수는 정적 파일을 제공하는 미들웨어함수이고,
이 함수는 정적 파일이 위치한 디렉토리의 경로를 인자로 받는다고 한다.
__dirname은 현재 파일이 위치한 디렉토리로 기준인 것 같다.
path.resolve를 통해 "frontend/static"디렉토리의 절대경로를 생성한다.
app.usr()함수에 첫 번째 인자로 "/static"경로를 전달하고 있으므로,
/static경로로 요청이 들어오면 이 미들웨어 함수가 실행된다.
이 함수는 요청된 파일이 "frontend/static"디렉토리에 존재한다면 해당 파일을 응답으로 보낸다.
즉, "frontend/static"디렉토리에 있는 정적 파일을
"/static"경로로 요청하는 클라이언트에게 제공하는 코드다.
app.get()
app.get("/*", (req, res) => { res.sendFile(path.resolve("frontend", "index.html")); });
"app.get()"함수는 Express.js에서 HTTP GET 요청을 처리하는 라우팅 미들웨어 함수 중 하나이다.
이 함수의 첫 번째 인자로 클라이언트로부터 들어온 요청 경로를 지정하며,
"/*"는 모든 요청 경로를 의미한다.
두 번째 인자로는 요청에 대한 처리를 담당하는 콜백 함수다.
"res.sendFile()" 함수를 이용하여 "frontend/index.html"파일을 응답으로 보낸다.
해당 함수는 파일을 응답으로 보내는 미들웨어 함수다.
"app.get()"함수를 사용하여, 모든 GET 요청에 대해 "frontend/index.html"파일을 응답을 보내는 라우팅 미들웨어를 등록하는 것이다.
즉, 클라이언트로부터 모든 GET 요청이 들어올 경우
"frontend/index.html"파일을 응답으로 제공하는 코드다.
SPA 페이지이기 때문에 어떤 경로로 클라이언트가 접근하더라도 index.html로 응답하는 것이다.
app.listen()
app.listen(process.env.PORT || 5000, () => console.log("Server running ...."));
"app.listen()"함수는 Express.js에서 제공하는 메서드 중 하나로, HTTP 서버를 생성하고 앱을
지정된 포트("process.env.PORT" 또는 5000)에서 실행한다. 첫 번째 인자로는 서버가 실행될 포트를 전달하고, 이때 "process.env.PORT"는 시스템 환경 변수로 설정된 포트 번호를 가져오며,
설정되어 있지 않으면 기본값인 5000을 사용한다.
두 번째 인자로는 콜백 함수를 등록하여 서버가 실행될 때 메시지를 출력한다.
즉, Express.js애플리케이션을 실행하고, 서버가 지정된 포트에서 요청을 처리할 수 있도록 구현한 것이다. 서버가 실행되면 콘솔에 "Server running ...."이라는 메시지가 출력된다.
마무리
이렇게 Express에 대해서 공부한 부분들을 정리해봤다.
서버랑 미들웨어 개념이 되게 어려울줄 알았는데 생각보다 쉬웠다.
원래 GPT를 잘 사용하지 않는 편인데, 블로그 글만으로는 부족한 부분들이 많아서
처음으로 사용해봤는데 상세하게 잘 설명해줘서 놀랐다.😮
앞으로 GPT랑 자주 같이 공부할 것 같다.
서버는 됐으니 이제 내일부터 과제테스트 구현을 시작해야겠다.😊
