포스트

Express.js 입문: 웹 서버 만들며 배우는 콜백과 CS 기초

Express.js 입문: 웹 서버 만들며 배우는 콜백과 CS 기초

들어가며

이전 글에서는 Node.js의 핵심 특징인 논블로킹 I/O에 대해 알아보았습니다. Node.js만으로도 웹 서버를 만들 수 있지만, 코드가 길고 복잡해지기 쉽습니다. 이때 필요한 것이 바로 Express.js 입니다.

Express.js는 Node.js를 위한, 사실상 표준처럼 사용되는 웹 프레임워크입니다. 복잡한 웹 서버의 기능을 간단하고 직관적인 코드로 구현할 수 있게 도와주죠. 이 글에서는 Express.js로 웹 서버를 만들며, 그 과정에 숨어있는 핵심 컴퓨터 과학(CS) 지식과 동작 원리를 함께 살펴보겠습니다.

초보자를 위한 CS 지식

코드를 작성하기에 앞서, 웹 서버가 어떻게 동작하는지 큰 그림을 이해해야 합니다.

  1. 클라이언트-서버 모델: 웹은 기본적으로 요청(Request)응답(Response)으로 이루어집니다. 여러분의 웹 브라우저(클라이언트)가 특정 주소(e.g., google.com)로 웹 페이지를 보여달라고 요청하면, 구글 서버는 그에 맞는 HTML 문서를 응답으로 보내주는 방식입니다.

  2. HTTP (HyperText Transfer Protocol): 클라이언트와 서버가 서로 대화할 때 사용하는 일종의 ‘언어’ 또는 ‘규칙’입니다. “GET 방식으로 /user 정보를 요청할게”, “응, 성공(200)했고, 여기 JSON 데이터야” 와 같은 약속이죠.

  3. 라우팅 (Routing): 서버에 여러 개의 주소(URL)가 있을 때, 특정 주소로 요청이 들어오면 미리 지정된 함수를 실행하도록 연결해주는 과정입니다. 예를 들어, /login 요청은 로그인 처리 함수로, /posts 요청은 게시글 목록을 보여주는 함수로 연결하는 것이 라우팅입니다.

핵심 개념: 콜백 함수 (Callback Function)

Express를 이해하려면 콜백 함수 개념을 반드시 알아야 합니다. 어렵지 않습니다.

콜백 함수: 다른 함수의 인자(argument)로 전달되어, 특정 이벤트나 작업이 끝난 후에 호출되는 함수.

이전 글의 스타벅스 비유를 다시 가져와 볼까요? 캐셔에게 주문하고 진동벨을 받았습니다. 여기서 “음료가 완성되면(특정 이벤트) -> 진동벨을 울려라(호출될 함수)” 라는 약속이 바로 콜백입니다. 진동벨을 울리는 것이 콜백 함수인 셈이죠.

Express에서는 라우팅 과정에서 콜백 함수가 필수적으로 사용됩니다. “/ 주소로 GET 요청이 들어오면 -> 이 함수를 실행해줘” 와 같은 형태로 말이죠.

Express.js 로 첫 서버 만들기

이제 직접 서버를 만들어 보겠습니다.

1. 프로젝트 설정

먼저 프로젝트 폴더를 만들고, 터미널에서 다음 명령어를 실행하여 package.json 파일을 생성하고 express를 설치합니다.

1
2
npm init -y
npm install express

2. 서버 코드 작성

index.js 라는 이름으로 파일을 만들고, 아래 코드를 작성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 1. express 모듈을 가져옵니다.
const express = require('express');

// 2. express 애플리케이션을 생성합니다.
const app = express();

// 3. 서버가 실행될 포트를 정의합니다.
const port = 3000;

// 4. 라우팅 설정: HTTP GET 요청이 '/' 경로로 들어올 때 실행될 콜백 함수를 정의합니다.
app.get('/', (req, res) => {
  // req: 요청(request) 객체, res: 응답(response) 객체
  res.send('Hello, Express!'); // 클라이언트에 텍스트를 응답으로 보냅니다.
});

// 5. 서버를 시작하고, 정의된 포트에서 요청을 기다립니다.
app.listen(port, () => {
  // 서버가 성공적으로 시작되면 이 콜백 함수가 실행됩니다.
  console.log(`Server is running at http://localhost:${port}`)
});

3. 서버 실행

터미널에 다음 명령어를 입력하여 서버를 실행합니다.

1
node index.js

이제 웹 브라우저를 열고 주소창에 http://localhost:3000 을 입력하면, Hello, Express! 라는 문구가 나타나는 것을 확인할 수 있습니다.

Express 동작 원리

위 코드는 어떻게 동작하는 걸까요?

graph TD
    A[클라이언트 브라우저] --> B[Node.js HTTP 서버]
    B --> C[Express 애플리케이션]
    C --> D[라우팅 규칙 확인]
    D --> E[콜백 함수 실행]
    E --> F[응답 생성]
    F --> A
  1. 클라이언트(브라우저)가 http://localhost:3000 으로 HTTP GET 요청을 보냅니다.
  2. Node.js에 내장된 HTTP 서버가 이 요청을 받아 Express 애플리케이션에 전달합니다.
  3. Express는 등록된 라우팅 규칙을 확인합니다. 요청된 경로가 / 이고, 방식이 GET 이므로, app.get('/', ...) 에 등록된 콜백 함수를 찾습니다.
  4. 찾아낸 콜백 함수 (req, res) => { ... } 를 실행합니다. 이때 Express는 요청 정보를 담은 req 객체와, 응답을 제어할 res 객체를 인자로 넣어줍니다.
  5. 함수 내부의 res.send('Hello, Express!') 가 실행되어, 클라이언트에 보낼 응답을 생성합니다.
  6. 생성된 응답이 클라이언트에게 전달되고, 브라우저는 Hello, Express! 라는 텍스트를 화면에 표시합니다.

마무리하며

이번 글에서는 Express.js를 사용해 간단한 웹 서버를 만들고, 그 과정에 필요한 기본적인 CS 지식과 콜백 함수의 개념, 그리고 Express의 내부 동작 원리를 알아보았습니다.

Express는 단순히 res.send() 외에도 정적 파일 제공, 미들웨어, 템플릿 엔진 등 웹 개발에 필요한 수많은 기능을 제공합니다. 오늘 만든 이 작은 서버가 앞으로 여러분이 만들어갈 복잡하고 멋진 웹 애플리케이션의 첫걸음이 되기를 바랍니다.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.