[Node.js – 기초 강좌] 5-1. 기본 웹 서버 구축(Routing 편)

이번 포스팅에서는 Node.js로 기본 웹 서버를 구축하는 방법을 알아보겠습니다.

특히 이번 포스팅에서는 Routing을 중점적으로 다루겠습니다.

기본 웹 서버 구축

웹 서버 구축이란?

웹 서버 구축이란, 사용자가 웹 브라우저를 통해 웹 페이지에 접속할 수 있도록 서버를 설정하는 것을 의미합니다.

웹 서버는 클라이언트(주로 웹 브라우저)로부터 요청을 받아 이를 처리하고, 적절한 응답을 반환하는 역할을 합니다.

기본 웹 서버 구축은 이러한 요청과 응답의 과정을 이해하고 설정하는 첫 단계입니다.

우리는 앞선 포스팅 들에서 http 모듈 / express 모듈 사용해서 간단한 웹 서버를 구축해봤습니다.

http 모듈을 이용한 웹 서버 구축

HTTP 모듈을 사용하여 간단한 웹 서버를 구축합니다.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

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

express 모듈을 이용한 웹 서버 구축

앞선 포스팅([Node.js – 기초 강좌] 4. Express Framework (소개, 사용방법)) 에서 소개한 express 모듈을 이용하여 간단한 웹 서버를 구축합니다.

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

const hostname = '127.0.0.1';
const port = 3000;

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

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

Routing 소개

Routing 이란?

라우팅은 웹 애플리케이션에서 URL 경로에 따라 클라이언트의 요청을 적절한 처리기로 전달하는 것을 의미합니다.

즉, 사용자가 특정 URL로 요청을 보내면, 서버는 해당 요청을 받아 적절한 응답을 반환하는 역할을 합니다.

라우팅의 중요성

  • 경로 관리: 라우팅을 통해 다양한 URL 요청을 관리할 수 있습니다.
  • 가독성 향상: 코드를 모듈화하여 가독성을 높일 수 있습니다.
  • 유지보수 용이: 특정 기능이나 페이지에 대한 요청을 별도로 관리하여 유지보수가 쉬워집니다.

기본 Routing 구현

Node.js & Typescript에서 express를 사용하여 routing 하는 기본 적인 방법에 대해 알아보겠습니다.

1. express & typescript 설치

$ npm install express
$ npm install typescript ts-node @types/node @types/express --save-dev

2. express에서의 기본적인 routing 설정

src 디렉토리에 app.ts 파일을 추가하여 다음과 같이 URI에 따라 기본 Routing을 적용합니다.

import express, { Request, Response } from "express";

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

app.get("/", (req: Request, res: Response) => {
  res.send("Home Page");
});

app.get("/about", (req: Request, res: Response) => {
  res.send("About Page");
});

app.get("/contact", (req: Request, res: Response) => {
  res.send("Contact Page");
});

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

결과

routing-basic-result

URL의 Parameter 처리 방법

URL Parameter란?

URL 파라미터는 URL의 일부로 전달되는 값을 의미합니다.

예를 들어, /users/:userId 경로에서 :userId가 URL 파라미터입니다. 이 파라미터는 클라이언트가 요청을 보낼 때 실제 값으로 대체되어 서버로 전달됩니다.

사용법

다음 예제에서와 같이 /users/:userId 경로는 URL 파라미터를 처리하는 방법을 보여줍니다.

  • :userId는 URL 파라미터로 정의됩니다.
  • 클라이언트가 /users/123와 같은 요청을 보내면, Express는 req.params 객체를 통해 userId 값을 추출합니다.
  • req.params.userId를 사용하여 해당 파라미터 값을 접근할 수 있습니다.

예를 들어, 다음과 같은 URL 요청이 들어올 수 있습니다:

  • /users/1 → “사용자 ID: 1”
  • /users/42 → “사용자 ID: 42”
app.get('/users/:userId', (req: Request, res: Response) => {
  const userId = req.params.userId;  // URL Parameters
  res.send(`USER ID: ${userId}`);
});

뿐만 아니라 다음과 같이 복수개의 URL 파라미터가 포함될 수도 있습니다.

app.get('/products/:category/:productId', (req: Request, res: Response) => {
  const category = req.params.category;
  const productId = req.params.productId;
  res.send(`Category: ${category}, Product ID: ${productId}`);
});

정규식을 이용한 유효성 검사

URL 파라미터는 클라이언트로부터 입력되기 때문에, 유효성 검사가 필요할 수 있습니다. 이를 위해 간단한 검증 로직을 추가할 수 있습니다.

app.get('/users/:userId', (req: Request, res: Response) => {
  const userId = req.params.userId;

  if (!/^\d+$/.test(userId)) {  // 숫자만 허용하는 정규식 검사
    res.status(400).send('유효하지 않은 사용자 ID입니다.');
    return;
  }

  res.send(`사용자 ID: ${userId}`);
});

Routing Module 사용

Routing Modeul 이란?

Routing Module은 애플리케이션에서 라우트를 모듈화하여 관리하기 위한 구조를 의미합니다.

특히 대규모 애플리케이션에서 라우트를 체계적으로 관리하고 유지보수하기 쉽도록 돕는 역할을 합니다.

Routing Module은 각기 다른 경로와 관련된 라우트들을 개별 파일이나 모듈로 분리하여, 애플리케이션의 특정 기능이나 도메인과 연관된 라우트를 그룹화할 수 있게 합니다.

사용하기

폴더 구조
04_express_app
├── src
│   ├── routes
│   │   ├── userRoutes.ts
│   │   ├── productRoutes.ts
│   ├── app.ts
├── package.json
├── tsconfig.json
Router 모듈 사용

/users/products 경로로 url로 전달되었을 때, 라우팅 처리하는 모듈을 별도로 생성하여 처리해보겠습니다.

1. userRoutes.ts 생성

// src/routes/userRoutes.ts 파일 생성
import { Request, Response, Router } from "express";

const router = Router();

router.get("/list", (req: Request, res: Response) => {
  res.send("User list");
});

router.post("/add", (req: Request, res: Response) => {
  res.send("Create user");
});

export default router;

2. productRoutes.ts 생성

import { Request, Response, Router } from "express";

const router = Router();

router.get("/list", (req: Request, res: Response) => {
  res.send("Product list");
});

router.post("/add", (req: Request, res: Response) => {
  res.send("Create product");
});

export default router;

3. src/app.ts에서 /users/products 경로에 대하여 라우팅하는 모듈을 연결

import express, { Request, Response } from 'express';
import userRoutes from './routes/userRoutes';
import productRoutes from './routes/productRoutes';

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

app.use(express.json());

// 기본 라우팅
app.get('/', (req: Request, res: Response) => {
  res.send('Hello, world!');
});

// 사용자 라우팅 모듈
app.use('/api', userRoutes);

// 상품 라우팅 모듈
app.use('/api', productRoutes);

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

결과

route-module-nodejs

참고 링크

Leave a Comment