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}`);
});
'개발 > 웹 개발' 카테고리의 다른 글
| Day 27: CRUD API 구현 (3) | 2024.09.02 |
|---|---|
| Day 26: REST API 서버 (라우팅과 컨트롤러 분리) (0) | 2024.09.02 |
| Day 24: 백엔드의 역할과 책임 (1) | 2024.08.28 |
| Day 22-23: 클라이언트 사이드 라우팅과 전역 상태 관리 (1) | 2024.08.27 |
| Day 21: React Hooks (useState와 useEffect) (0) | 2024.08.24 |