❓ Express란?

• Node.js 환경에서 동작하는 웹 애플리케이션 프레임워크
• 웹 애플리케이션 구성에 필요한 Routing, View Helper, Session(영속적 Session관리를 위해서는 Redis등의 Data store가 필요하다)등의 기능을 제공한다.

웹 애플리케이션 프레임워크란?

웹 애플리케이션을 개발할 때 자주 사용되는 기능들을 미리 구조화하여 제공하는 소프트웨어 프레임워크
즉, 웹 서비스를 더 빠르고 효율적으로 개발할 수 있도록 도와주는 개발 도구 세트인 것.

💡 Express의 요청 처리를 위한 핵심 요소들

1️⃣ Layer

• Express 내부에서 사용하는 Wrapper 객체
• MiddleWare, Router, Route 모두 Layer 객체로 감싸져서 관리된다.
  • 그래서 Layer는 최소한의 공통 구조만 정의하고, 상황에 따라 속성을 유동적으로 추가한다.
• express/lib/router/layer.js 파일에서 정의
• 주요 구성 요소
  • name: 함수 이름
    • MiddleWare, Router, Route를 구분하기 위한 식별자
    • handle 프로퍼티의 값인 함수의 이름이다.
    • Ex) 'router', 'bound dispatch', session', '' …
  • handle: 실제로 우리가 등록한 MiddleWare, Router, Route
  • regexp: 경로를 정규표현식으로 변환한 값
    • MiddleWare, Router는 시작 부분부터 정규식 검사
    • Route는 시작 ~ 끝까지 정규식 검사
  • path : 해당 요청에서 일치한 실제 경로 부분(현재 레이어(layer)에서 처리 중인 상대 경로를 의미)
    • 중요한 점은, Layer 객체가 생성될 때 path 값은 저장하지 않는다는 점이다. path는 실제 요청이 들어왔을 때, 해당 Layer객체의 match()가 호출된 후, 동적으로 매치된(해당 Layer가 처리한) 부분 경로(match[0])가 저장된다. 이 값은 중첩된 객체에 의해 계속 변경될 수 있다. (자세한 내용은 아래 참고)
  • params : 동적으로 추출된 라우트 파라미터 정보 (/user/:id일 때의 id)
    • path와 마찬가지로 Layer객체의 match()가 호출된 후 저장된다.
  • route: 실제 라우트 객체 (라우터가 아닌 일반 미들웨어일 경우 undefined)
• 주요 메서드
  • match(path): 주어진 path가 이 Layer의 path와 일치하는지 정규표현식으로 검사
  • handle_request(req, res, next)
    • 요청 처리 중 이 Layer가 실제로 해당 경로와 매칭되면 실행됨
    • 사실 단순히 handle(req, res, next)을 호출할 뿐이지만, try-catch로 감싸서 오류 처리를 위해 따로 분리해 둔 것!
    • 만약 handle의 매개변수가 4개 이상이면 표준 request handler가 아니므로 next() 실행하여 패스
  • handle_error(err, req, res, next): 에러 미들웨어일 경우 실행
    • handle(*error*, *req*, *res*, *next*) 함수 호출
    • handle_request(req, res, next) 와 마찬가지로 try-catch로 감싸져있다.
    • 만약 handle의 매개변수가 4개가 아니면 표준 error handler가 아니므로 next() 실행하여 패스

next() 함수란?

각 미들웨어에서 next()를 호출하면, 다음 Layer(미들웨어 또는 라우터)로 요청 처리가 넘어간다.

이 next는 handle 함수 내부에서 생성된 클로저 함수로, 렉시컬 환경 안에 있는 stack 배열(모든 Layer의 목록)에 접근할 수 있다. 이를 통해 현재 요청에 알맞은 다음 Layer를 찾아 실행한다.

handle_request, handle_error 속 try-catch 문을 통해 잡힌 예외도 next()를 통해 전달된다.
next에 예외가 전달되면, Express는 현재 스택(Layer 배열)을 순회하면서 함수의 인자가 (err, req, res, next)처럼 4개이면, 에러 처리 미들웨어로 판단하고 실행한다.

next() 함수의 핵심 로직은 아래와 같다.

• 에러 처리 분기
  • next(err) 형태로 호출되면 에러 처리 미들웨어로 흐름을 넘김.
  • err === 'router'이면 현재 Router를 빠져나가고 상위로 흐름 이동.
• 더 이상 실행할 Layer가 없을 때
  • idx >= stack.length: 모든 미들웨어/라우트를 순회한 경우.
  • done(layerError)를 호출해 라우터 종료. (done은 Router가 요청 처리를 끝냈음을 Express에 알리는 콜백.)
• Stack overflow 방지
  • sync > 100이면 동기 호출이 과도한 상태.
  • setImmediate(next, err)로 다음 이벤트 루프에서 실행되도록 처리.

🤔 setImmediate(next, err)로 Stack overflow를 방지한다고?

Express는 next()가 재귀적으로 계속 호출될 수 있는 구조이다. 수많은 미들웨어가 next()만 호출하고 실제 응답을 하지 않으면, 동기적으로 끝없이 호출될 수도 있다. 이런 동기 호출이 너무 많이 쌓이면 콜 스택이 초과(stack overflow) 될 위험이 생긴다.

따라서 Express는 sync > 100인 경우, 다음 미들웨어로 가지 않고 아래와 같이 비동기로 넘겨버린다.

if (++sync > 100) {
  return setImmediate(next, err);
}

이렇게 하면 이벤트 루프가 잠시 쉬었다가 다시 next()를 호출하므로, 콜 스택이 리셋되고 안전하게 진행할 수 있다. 즉, 다음 이벤트 루프 사이클에서 다시 실행하도록 비동기로 넘겨버리는 것이다.

🧐 왜 Layer.path를 미리 저장하지 않고, 요청마다 match() 결과로 동적으로 설정할까?

그 이유는 요청마다 매칭되는 경로가 달라질 수 있기 때문!

Express는 app.use()나 router.get() 같은 핸들러를 모두 내부적으로 Layer 객체로 감싸서 처리해. 이때 각 요청마다 매칭된 실제 경로(path)와 params가 달라질 수 있기 때문에, path를 고정하지 않고 match() 실행 결과로 동적으로 설정하는 것.

예를 들어, 아래처럼 라우터를 구성했다고 해보자.

const userRouter = express.Router();
userRouter.get('/:id', (req, res) => {
  res.send(`User ID is ${req.params.id}`);
});

app.use('/api/users', userRouter);

클라이언트가 /api/users/1 요청을 보냈을 때,

• 첫 번째 Layer는 /api/users를 매칭하고,
• 내부 userRouter의 Layer는 /:id를 매칭한다.

이때 path는 다음과 같이 매 요청마다 다르게 저장된다.

• 외부 Layer: path = /api/users
• 내부 Layer: path = /1

⬇️ 아래에 있는 코드가 동적으로 path가 변경되는 코드이다. (express/lib/router/index.js)

// /api/users/1 요청의 경우 layerPath는 /api/users/, path는 /api/users/3!
function trim_prefix(layer, layerError, layerPath, path) {
	// 흐름 확인용
  console.log("layerPath : " + layerPath + ", path : " + path);
    
	// 경로 체크(layerPath를 정규표현식으로 매칭시키기 때문에 정확히 일치하지 않을 수 있음)
	// 따라서 path가 layerPath로 시작하는지 확인
  if (layerPath !== path.slice(0, layerPath.length)) {
     next(layerError)
     return
  }
  
  ...
  removed = layerPath;
  req.url = protohost + req.url.slice(protohost.length + removed.length)
  ...
}

출력은 아래와 같다.(매칭된 경우만 가져옴) 정말로 path가 동적으로 변한다!

layerPath : /api/tasks, path : /api/tasks/3
layerPath : , path : /3

표로 정리하면 아래와 같다.

단계	Layer	layerPath	req.url	path (동적 매칭된 부분)
1️⃣	app.use('/api/tasks/')	/api/tasks/	/api/tasks/3	/api/tasks/
2️⃣	taskRouter.get('/:id')	/:id	/123	/123

✨ 그럼 왜 path 값을 그때마다 저장해둘까?

• 이 값이 있으면, 다음 Layer에게 요청을 넘길 때 기준점이 된다. (위 예시 참고)
• 중첩된 Router 구조에서는 현재 Layer에서 처리한 path를 제외한 남은 path만 다음 Router에 넘겨줘야 하는데, 이때 Layer.path가 필요하다. 따라서, 각 Layer마다 실제로 매칭된 path 값을 동적으로 계산해서 저장해둔다.

2️⃣ Application

• Express 애플리케이션을 의미하는 객체이다.

  const express = require('express');
  const app = express(); // Application 객체 생성

• 서버 Listen, 미들웨어 등록, 라우터 설정 등을 담당한다.
• 요청을 직접 처리하지는 않고, 요청이 오면 _router에 위임해서 처리하게 한다.
• Application 객체가 생성되는 로직은 아래와 같다.

  // express/lib/express.js
  
  function createApplication() {
    var app = function(req, res, next) {
      app.handle(req, res, next); // 요청 들어오면 app.handle로 처리
    };
  
    mixin(app, EventEmitter.prototype, false); // 이벤트 처리 mixin
    mixin(app, proto, false); // app.use, app.get, app.listen 등 mixin
  
  	// request, response 객체 구성
    // expose the prototype that will get set on requests
    app.request = Object.create(req, {
      app: { configurable: true, enumerable: true, writable: true, value: app }
    })
  
    // expose the prototype that will get set on responses
    app.response = Object.create(res, {
      app: { configurable: true, enumerable: true, writable: true, value: app }
    })
  
  	// 내부적으로 _router 생성 후 기본 미들웨어(query, expressInit) 미리 등록
  	// 왜? 미들웨어와 라우터를 저장할 공간이 필요하므로 !
  	// 우리가 미들웨어와 라우터를 등록할때 app._router가 없으면 등록이 안된다.
    app.init();
    return app;
  }

3️⃣ MiddleWare

• Express에서 Middleware는 클래스가 아니다. 요청-응답 흐름 중간에서 실행되는 함수이다. 이 함수들은 특정 경로에서 실행되도록 등록되며, 다음 작업으로 넘기기 위해 next()를 호출할 수 있다.
• 단순한 함수 (req, res, next) => {} 형태이다.
• 에러 핸들링 미들웨어는 (err, req, res, next) => {} 형태이다.

  app.use((req, res, next) => {
    console.log("나는 미들웨어!");
    next();
  });

• 이때, Layer로 감싸진 MiddleWare는 아래와 같다.

  {
    name: '<anonymous>',
    path: undefined,
    route: undefined, // 미들웨어이기 때문에 route는 없음
    handle: [Function (anonymous)], // <- (req, res, next) => {...}
    regexp: /^\/?(?=\/|$)/i { fast_star: false, fast_slash: true },
    handleType: 'function',
  }

4️⃣ Router

• 경로와 메소드에 따라 요청을 나누어서 처리하는 객체
• Router 자체도 하나의 미들웨어로 등록될 수 있다.
• 자체적으로 stack을 가진다. (router.stack)
• use로 MiddleWare를, get, post 등으로 Route를 등록한다.
• 요청이 들어오면 등록된 레이어들(router.stack)을 순회하면서 실행한다.
• 아래와 같은 형태이다.

  const taskRouter = express.Router();
  taskRouter.get('/:id', (req, res, next) => {
    console.log("나는 taskRouter!");
    next();
  });
  app.use('/api/tasks', taskRouter);

• 이때, Layer로 감싸진 Router는 아래와 같다.

  {
    name: 'router',
    handle: [Function: router], // 이게 express.Router()의 반환값
    stack: [ [Layer] ] // taskRouter 내부 라우트가 다시 Layer로 감싸짐
  }

5️⃣ Route

• HTTP 메소드(GET, POST 등)에 따라 각 핸들러를 관리
• 주요 메서드
  • dispatch() : 실제 라우트(Route)에 등록된 핸들러를 실행
• 아래와 같은 형태이다. 위의 Router 예제에서 Router의 stack안에 Layer형태로 들어있다.

  taskRouter.get('/:id', (req, res, next) => {
    console.log("나는 taskRouter!");
    next();
  });

• 이때, Layer로 감싸진 Route는 아래와 같다.

  {
    name: 'bound dispatch',
    route: { path: '/:id', methods: { get: true } },
    handle: [Function: bound dispatch], // 라우트에 등록한 핸들러
    regexp: /^\/(?:([^\/]+?))\/?$/i { fast_star: false, fast_slash: false },
    params: undefined,
  }

🔍 bound dispatch란?

• route.dispatch.bind(route)를 통해 만들어진 라우트 요청 처리 함수
  • dispatch 함수 내부에서 this.stack, this.methods 등을 참조해야 하므로, route 인스턴스를 context로 유지하기 위해 바인딩해야 한다.
  • Layer 객체의 handle 에 저장된다.
• JavaScript에서는 Function.prototype.bind(...)로 바인딩하면 함수 이름이 "bound originalName" 형태가 된다.

🏃🏻‍♀️ Express 동작 과정

아래 예시를 통해 동작 과정을 이해해보자.

// app.js
import express from "express";

const taskRouter = express.Router();
taskRouter.get("/", (req, res) => {
    console.log("GET");
});

taskRouter.get("/:id", (req, res) => {
    console.log("id get");
});

taskRouter.post("/", (req, res) => {
    console.log("post");
});

taskRouter.put("/:id", (req, res) => {
    console.log("put");
});

taskRouter.patch("/:id", (req, res) => {
    console.log("patch");
});

taskRouter.delete("/:id", (req, res) => {
    console.log("delete");
});

const app = express();
app.use('/api/tasks', taskRouter);

🪄 상황 : 클라이언트가 GET /api/tasks/3 요청

1. app._router.stack 순회 (최상위 Layer 탐색)

1. app.handle(req, res) 이 실행된다.
2. 내부적으로 app._router.handle(req, res) 호출 → Router.prototype.handle()을 호출한다.
3. 이 handle()에서 app._router.stack 배열을 순회하면서 각 Layer에 대해 layer.match(req.path)를 호출한다. 이 배열에는 아래와 같이 모든 미들웨어와 라우터가 Layer 형태로 들어가 있다. 배열의 마지막에 우리가 등록한 taskRouter가 있는 것을 볼 수 있다.
4. layer.match(req.path)가 True를 반환하여 매칭되면, 해당 Layer의 layer.handle_request(req, res, next) 를 호출한다.
   1. req.path는 /api/tasks/3이며, 우리가 app.use('/api/tasks', taskRouter)로 등록한 라우터 Layer는 정규식 /^\/api\/tasks\/?(?=\/|$)/i와 매칭된다.

📌 호출되는 layer.handle_request 내부

Layer.prototype.handle_request = function handle(req, res, next) {
  const fn = this.handle;

  // 일반 함수일 경우 실행 (middleware or router)
  try {
    fn(req, res, next);
  } catch (err) {
    next(err);
  }
};

1. 위의 fn 이 taskRouter이기 때문에 taskRouter.handle(req, res, next)가 실행된다!
2. 그 후, 라우터의 경로(/api/tasks)는 잘라지고, req.url은 /3으로 변경되어 하위 라우터에 전달된다.

✔️ 아래는 app._router.stack에 대한 이해를 위해 내부를 콘솔로 출력한 결과이다.

{
  name: 'query',
  path: undefined,
  route: undefined,
  handle: [Function: query],
  regexp: /^\/?(?=\/|$)/i { fast_star: false, fast_slash: true },
  handleType: 'function',
},
{
  name: 'expressInit',
  path: undefined,
  route: undefined,
  handle: [Function: expressInit],
  regexp: /^\/?(?=\/|$)/i { fast_star: false, fast_slash: true },
  handleType: 'function',
},
{
  name: 'router', // 우리가 등록한 taskRouter!
  path: undefined,
  route: undefined,
  handle: [Function: router] {
    params: {},
    _params: [],
    caseSensitive: undefined,
    mergeParams: undefined,
    strict: undefined,
    stack: [ [Layer], [Layer], [Layer], [Layer], [Layer], [Layer] ]
  },
  regexp: /^\/api\/tasks\/?(?=\/|$)/i { fast_star: false, fast_slash: false },
  handleType: 'function',
}

query와 expressInit 미들웨어는 왜 들어가있을까?

여기서 query와 expressInit 미들웨어는 Express가 자동으로 넣어주는 기본 미들웨어들이다.

• query 미들웨어 (express/lib/middleware/query.js)
  • 요청 URL에 붙은 QueryString을 파싱해서 req.query 객체로 만들어주는 미들웨어
• expressInit 미들웨어 (express/lib/middleware/init.js)
  • Express가 초기화될 때, req와 res 객체에 기본 프로퍼티(res, req, next)를 설정해주는 미들웨어

express/lib/application.js 를 보면 우리가 express()를 호출할 때 내부적으로 app._router 객체가 생성되고, 그 안에 query → expressInit 순서로 미들웨어가 push되는 것을 볼 수 있다!

app.lazyrouter = function lazyrouter() {
  if (!this._router) {
    this._router = new Router({
      caseSensitive: this.enabled('case sensitive routing'),
      strict: this.enabled('strict routing')
    });

    this._router.use(query(this.get('query parser fn')));
    this._router.use(middleware.init(this));
  }
};

2. taskRouter.stack 순회 (하위 라우터 탐색)

1. taskRouter.handle(req, res) 내부에서 다시 Router.prototype.handle() 호출된다.
2. taskRouter.stack에 있는 각 Layer에 대해 다시 layer.match(req.path)가 호출된다.
   1. req.path는 /3이기 때문에, /:id인 라우트가 매칭된다.
3. Layer의 layer.handle_request(req, res, next)가 호출된다.

📌 여기서 호출되는 handle_request

이 Layer는 라우터 레벨이 아닌 라우트에 해당하기 때문에, this.handle은 내부적으로 route.dispatch로 설정되어 있다. 따라서, layer.handle_request(req, res, next) 에 의해 route.dispatch(req, res, next) 실행된다.

layer.handle = route.dispatch.bind(route)

✔️ 아래는 taskRouter.stack에 대한 이해를 위해 내부를 콘솔로 출력한 결과이다.

{
  name: 'bound dispatch',
  route: { path: '/', methods: { get: true } },
  handle: [Function: bound dispatch],
  regexp: /^\/?$/i { fast_star: false, fast_slash: false },
  params: undefined,
  methods: { get: true }
},
{
  name: 'bound dispatch',
  route: { path: '/:id', methods: { get: true } },
  handle: [Function: bound dispatch],
  regexp: /^\/(?:([^\/]+?))\/?$/i { fast_star: false, fast_slash: false },
  params: undefined,
  methods: { get: true }
},
{
  name: 'bound dispatch',
  route: { path: '/', methods: { post: true } },
  handle: [Function: bound dispatch],
  regexp: /^\/?$/i { fast_star: false, fast_slash: false },
  params: undefined,
  methods: { post: true }
},
{
  name: 'bound dispatch',
  route: { path: '/:id', methods: { put: true } },
  handle: [Function: bound dispatch],
  regexp: /^\/(?:([^\/]+?))\/?$/i { fast_star: false, fast_slash: false },
  params: undefined,
  methods: { put: true }
},
{
  name: 'bound dispatch',
  route: { path: '/:id', methods: { patch: true } },
  handle: [Function: bound dispatch],
  regexp: /^\/(?:([^\/]+?))\/?$/i { fast_star: false, fast_slash: false },
  params: undefined,
  methods: { patch: true }
},
{
  name: 'bound dispatch',
  route: { path: '/:id', methods: { delete: true } },
  handle: [Function: bound dispatch],
  regexp: /^\/(?:([^\/]+?))\/?$/i { fast_star: false, fast_slash: false },
  params: undefined,
  methods: { delete: true }
}

3. Route.prototype.dispatch 실행

Route.prototype.dispatch = function dispatch(req, res, done) {
  const method = req.method.toLowerCase();
  const stack = this.stack;

  // GET, POST, 등 해당 메서드에 등록된 핸들러 실행
  for (let layer of stack) {
    if (layer.method === method) {
      layer.handle_request(req, res, next);
    }
  }
};

1. dispatch() 내부에서 등록된 ((req, res) => { console.log("id get"); })의 Layer의 handle_request() 를 호출한다.
2. "id get"이 출력된다.

전체 흐름 요약

위 동작 흐름을 요약하자면 아래와 같다.

클라이언트 → GET /api/tasks/3
↓
app.handle(req, res)
↓
app._router.handle(req, res)
↓
app._router.stack 순회
├─ Layer: query
│    └─ layer.handle_request → query(req, res, next)
├─ Layer: expressInit
│    └─ layer.handle_request → expressInit(req, res, next)
├─ Layer: router (/api/tasks)   // ✅ 매칭됨
│    └─ layer.handle_request → taskRouter.handle(req, res, next)
│         └─ req.url = '/3' 로 바뀜
↓
taskRouter.stack 순회
├─ Layer: '/:id'    // ✅ 매칭됨
│    └─ layer.handle_request → route.dispatch(req, res, next)
│         └─ method === 'get'인 Layer 찾음
│              └─ layer.handle_request → 실행됨 → console.log("id get") 출력

즉,

• app은 건물 전체 (건물 입구)
• router는 건물 내부의 층 (각 층마다 라우팅 담당)
• app._router.stack은 입구에서부터 복도까지 모든 경로
• router.stack은 그 층 내부에 어떤 방이 있는지 리스트

라고 할 수 있다.

🤓 마치며,

Express를 파보면서, 자바스크립트를 정말 잘 활용하는 프레임워크라는 생각이 들었다.

특히, Express는 Prototype을 아주 잘 활용하는데, 예시로 req, res 객체에 각종 메서드를 확장하는 방식이 있다. Express는 Node의 http.IncomingMessage와 http.ServerResponse를 기반으로 request와 response 객체를 확장하는데, 이를 Object.create()와 프로토타입 체인을 통해 구현한다.

app.request = Object.create(req, {
  app: { configurable: true, enumerable: true, writable: true, value: app }
});

app.response = Object.create(res, {
  app: { configurable: true, enumerable: true, writable: true, value: app }
});

이 구조 덕분에 req나 res 객체를 사용할 때 Express가 제공하는 다양한 유틸 메서드(req.params, res.json(), res.send() 등)를 마치 기본 기능처럼 사용할 수 있다. 그리고 각 요청마다 이 프로토타입 객체를 상속한 새로운 객체가 만들어지기 때문에, 공통 로직은 공유하고, 요청마다 독립적인 상태를 유지할 수 있다.

또다른 예시로 Layer 객체가 있다. Express는 MiddleWare, Router, Route 모두 Layer로 통일해서 처리하는 확장성 있는 구조를 가진다. Layer 로 감싸게 되면, 요청이 들어왔을때 단순히 Layer 배열을 순회하면서 처리하면 된다. 또한, 경로를 매칭하거나 실제로 요청을 처리할 핸들러 함수를 실행시키는 것도 Layer 에서 정의되어 있으니 Layer 로 감싸진 객체들은 단순히 Layer 의 메소드를 호출하면 된다.

Layer 객체는 다음과 같은 메서드를 갖는다.

Layer.prototype.handle_request = function handle(req, res, next) {
  var fn = this.handle;

  if (fn.length > 3) {
    // not a standard request handler
    return next();
  }

  try {
    fn(req, res, next);
  } catch (err) {
    next(err);
  }
};

이처럼 Express는 자바스크립트의 프로토타입 체인을 적극적으로 활용하여

1. 공통된 기능(메서드)을 재사용하고
   • Express에서는 각 요청마다 새로운 res 객체가 생성되지만, 이들은 모두 같은 response prototype을 공유하기 때문에 send, json 같은 메서드는 공통으로 재사용된다.
2. 객체별로 필요한 속성만 동적으로 부여하여
   • 요청마다 req.params, req.query, req.body 등이 다르다! 각 요청마다 새로운 req 객체가 생성되지만, 공통 기능은 프로토타입으로 공유하고 각 요청에 필요한 데이터만 따로 추가한다.

메모리 낭비를 막고 재사용성과 확장성을 높이는 구조를 만들었다.