본문 바로가기
개발/웹 개발

Day 25: Node.js와 Express 서버 만들기

1. 오늘의 학습 목표

학습 목표: 브라우저를 벗어나 서버에서도 JavaScript를 실행할 수 있게 해주는 런타임 환경인 Node.js와, Node.js를 위한 가장 대중적인 웹 프레임워크인 Express.js를 사용하여 웹 서버를 생성하는 방법을 배웁니다. 서버로 들어오는 모든 요청을 중간에서 처리하는 미들웨어(Middleware)의 개념과 역할을 이해합니다.

 

핵심 요약: Express는 웹 서버를 만드는 과정을 매우 간단하게 만들어주는 도구입니다. 미들웨어는 이 서버의 기능을 유연하게 확장할 수 있게 해주는 강력한 '중간 처리기'입니다.


2. 핵심 개념 파헤치기

2.1. Node.js란?

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 쉽게 말해, 브라우저 밖(서버 환경 등)에서도 JavaScript를 실행할 수 있게 해주는 프로그램입니다. Node.js 덕분에 프론트엔드와 백엔드 모두 JavaScript라는 하나의 언어로 개발하는 것이 가능해졌습니다.

 

2.2. Express.js란?

Express는 Node.js를 사용하여 웹 서버 및 API를 쉽게 만들 수 있도록 도와주는 최소한의 기능을 갖춘 유연한 웹 프레임워크입니다. 복잡한 HTTP 통신, 라우팅(Routing) 등의 작업을 간단한 코드로 처리할 수 있게 해줍니다.

 

2.3. 미들웨어란 무엇인가?

미들웨어는 클라이언트로부터 요청(Request)이 들어와서 서버가 응답(Response)을 보내기까지의 중간 과정에 위치하여 특정 기능을 수행하는 함수입니다. Express의 가장 핵심적인 개념 중 하나로, 모든 Express 애플리케이션은 미들웨어 함수들의 연쇄적인 호출로 이루어집니다.

미들웨어의 역할:

  • 모든 요청에 대해 공통적으로 수행해야 할 작업 처리 (예: 요청 로깅, 사용자 인증)
  • 요청 본문(body) 파싱
  • 요청(req) 및 응답(res) 객체 수정

미들웨어의 구조: 미들웨어 함수는 req(요청 객체), res(응답 객체), next(다음 미들웨어로 제어를 넘기는 함수) 세 가지 매개변수를 가집니다. 반드시 next()를 호출해야 다음 단계로 진행됩니다.


3. 코드로 배우기

3.1. 구현 목표

Express를 사용하여 간단한 웹 서버를 만들고, 서버에 들어오는 모든 요청의 URL과 시간을 기록하는 로거(Logger) 미들웨어를 직접 만들어 적용합니다.

※실행 전 준비: 터미널에서 npm init -y로 package.json 생성, npm install express로 Express를 설치해야 합니다.

 

3.2. [1단계: 기본적인 Express 서버 생성하기]

express 모듈을 불러와 서버 인스턴스(app)를 생성합니다. 루트 경로(/)로 GET 요청이 오면 "Hello, Express!"를 응답하고, 3000번 포트에서 서버를 실행합니다.

//server.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

 

3.3. [2단계: 로거 미들웨어 함수 만들기]

요청이 들어온 시간과 요청된 URL(req.originalUrl)을 콘솔에 출력하는 미들웨어 함수를 만듭니다. 마지막에 next()를 호출하여 요청이 다음 단계(여기서는 라우트 핸들러)로 넘어갈 수 있도록 합니다.

//server.js 파일 상단 또는 별도 파일에 작성

const myLogger = (req, res, next) => {
  const requestTime = new Date().toLocaleString();
  console.log(`[${requestTime}] Requested URL: ${req.originalUrl}`);
  next(); // 다음 미들웨어 또는 라우트 핸들러로 제어를 전달
};

 

3.4. [3단계: 미들웨어 서버에 적용하기]

app.use()를 사용하여 우리가 만든 myLogger 미들웨어를 애플리케이션에 등록합니다. app.use로 등록된 미들웨어는 모든 경로의 요청에 대해 실행됩니다.

//server.js
const express = require('express');
const app = express();
const port = 3000;

//1. 미들웨어 함수 정의
const myLogger = (req, res, next) => {
  //... (이전 단계 코드)
};

//2. 미들웨어 적용 (라우트 핸들러보다 위에 위치해야 함)
app.use(myLogger);

//3. 라우트 핸들러
app.get('/', (req, res) => {
  //... (이전 단계 코드)
});

//... (서버 실행 코드)

4. 전체 코드 (Final Code)

 

//server.js

const express = require('express');
const app = express();
const port = 3000;


const loggerMiddleware = (req, res, next) => {
  const requestTime = new Date().toLocaleString('ko-KR');
  console.log(`[${requestTime}] ${req.method} ${req.originalUrl}`);
  next(); //다음으로 제어를 넘깁니다.
};

app.use(loggerMiddleware);

//루트 경로 ('/')에 대한 GET 요청을 처리하는 라우트 핸들러
app.get('/', (req, res) => {
  res.send('Hello, Express World!');
});

//'/about' 경로에 대한 GET 요청을 처리하는 라우트 핸들러
app.get('/about', (req, res) => {
  res.send('This is the About page.');
});

//서버를 지정된 포트에서 실행
app.listen(port, () => {
  console.log(`Express server listening at http://localhost:${port}`);
});