HTTP 패킷 분석하기

net 모듈을 활용해 HTTP 요청 처리하기

1. net 모듈 기반 HTTP 서버 생성

 

우선 가장 먼저 HTTP 요청을 처리할 웹서버를 만들어야합니다.

net 모듈을 활용해 서버를 생성하고 server.listen 으로 지정된 PORT 에 들어오는 요청을 listen 하며

socket.on 으로 데이터를 수신할 수 있습니다. 

import net from 'net';

// 기본 HTTP 서버 설정
const PORT = 80;
const HOST = '0.0.0.0';

/**
 * net 모듈 기반 HTTP 서버
 * Express 등 외부 프레임워크 없이 순수 net 모듈로 HTTP 서버 구현
 */
const server = net.createServer((socket) => {
  console.log('클라이언트 연결됨:', socket.remoteAddress + ':' + socket.remotePort);

  // HTTP 요청 데이터 수신
  socket.on('data', (data) => {
    const request = data.toString();
    console.log('수신된 요청:');
    console.log(request);

    // 기본 HTTP 응답 (임시)
    const response = [
      'HTTP/1.1 200 OK',
      'Content-Type: text/html; charset=utf-8',
      'Connection: close',
      '',
      '<h1>Codestargram Web Server</h1>',
      '<p>net 모듈 기반 HTTP 서버가 정상 동작 중입니다.</p>'
    ].join('\r\n');

    socket.write(response);
    socket.end();
  });

  // 연결 종료 처리
  socket.on('close', () => {
    console.log('클라이언트 연결 종료');
  });

  // 에러 처리
  socket.on('error', (err) => {
    console.error('소켓 에러:', err);
  });
});

// 서버 시작
server.listen(PORT, HOST, () => {
  console.log(`🚀 Codestargram Web Server running on http://${HOST}:${PORT}`);
});

// 서버 에러 처리
server.on('error', (err) => {
  console.error('서버 에러:', err);
});

// 프로세스 종료 시 서버 정리
process.on('SIGINT', () => {
  console.log('\n서버를 종료합니다...');
  server.close(() => {
    console.log('서버 종료 완료');
    process.exit(0);
  });
});

 

 

그리고 node server.js 를 통해 위 파일을 실행합니다.

 

그러면 80번 포트에서 HTTP 서버가 작동하게 됩니다.

이 상태에서 한번 http://localhost 에 접속해보겠습니다.

 

그럼 다음과 같이 탭에 접속한 브라우저의 프로세스 주소와 PORT 정보가 찍히고,

socket.on 에서 들어온 HTTP 요청 데이터를 확인해볼 수 있습니다. 

 

브라우저에 URL 로 접속했을 뿐인데, 어떻게 HTTP GET 요청이 수신되는지 묻는다면,

그것이 브라우저의 기본 동작이기 때문입니다. URL 에 접속하면 해당 서버의 80번 포트로 HTTP GET 요청을 보내도록 되어있습니다. 

 

 

  // HTTP 요청 데이터 수신
  socket.on('data', (data) => {
    const request = data.toString();

    console.log(request);
    }

 

 

 

 

가장 첫줄은 Request line 으로서 method urI 프로토콜 버전이 명시됩니다.

 

 

그리고 그 하위 HTTP 헤더에는 보낸이의 신원, 자신의 환경, 요청에 대한 정보가 들어가 있는 것을 확인해볼 수 있습니다.

 

여기서 요청을 처리하기 위해 눈여겨봐야 할 필드는 URI 와 Accept 입니다.

 

여기서 잠깐, URL 과 URI 의 차이를 이해하고 넘어갈 필요가 있습니다. 

 

📌 URI (Uniform Resource Identifier, 통합 자원 식별자)

• 정의: 인터넷 상의 어떤 “자원(Resource)”을 식별(identify) 하기 위한 문자열.
• 즉, 이 자원이 무엇인지 알려주는 식별자.
• URI는 두 가지 하위 개념으로 나눌 수 있음:
  1. URL (Locator) → 자원의 위치를 알려줌 (어디에 있는지)
  2. URN (Name) → 자원의 이름을 알려줌 (어떤 이름을 갖는지)

---

📌 URL (Uniform Resource Locator, 통합 자원 위치자)

• 정의: URI의 한 종류로, 자원의 위치(location) 를 구체적으로 표현한 것.
• 즉, “자원이 어디에 있는지, 어떻게 접근하는지” 알려줌.
• 보통 우리가 웹에서 쓰는 주소(http://, https://, ftp://)는 전부 URL.

 

 

URL

https://www.example.com:443/path/page.html?query=abc#section2

• https → 스킴(프로토콜)
• www.example.com:443 → 호스트 + 포트
• /path/page.html → 경로
• ?query=abc → 쿼리 스트링
• #section2 → 프래그먼트(문서 내부 위치)

 

즉, URL 은 어떤 Host 의 어떤 Port 인지 등  어떤 경로(Path) 에 자원이 위치하는지와 관련한 정보이고,

 

URI 는 거기서 더 나아가서 경로에 접근했을 때 그 중 어떤 정확히 자원을 원하는지 식별하기 위한 쿼리 스트링 등의 정보를 포함하고 있다고 볼 수 있습니다. 

 

 

따라서 Url 으로는 정확히 어떤 자원을 요구하는지, Accept 에서는 어떤 파일 형식을 원하는지  파악해야 합니다.

 

 

Index.html 반환하기

 

웹서버는 HTML, CSS, JS 같은 정적 자원들을 서빙하는 역할을 합니다.

SPA 는 보통 index.html + bundle.js 로 구성되어 있는데,

 

http://localhost/index.html 에 접속하면 브라우저 -> 서버로 index.html 요청이 날아가고, 

우리는 적절한 경로에 있는 파일을 응답해주면 됩니다.

 

저 같은 경우 내부 frontend/dist 경로에 최종 빌드된 프론트엔드 번들 파일을 위치하였으므로 여기를 기준점으로 index.html 을 읽고 응답에 반환해줍니다. 

// frontend/dist 경로 설정
const FRONTEND_DIST_PATH = path.join(process.cwd(), '../frontend/dist');

/**
 * net 모듈 기반 HTTP 서버
 * Express 등 외부 프레임워크 없이 순수 net 모듈로 HTTP 서버 구현
 */
const server = net.createServer((socket) => {
  const startTime = Date.now();
  const clientAddress = socket.remoteAddress + ':' + socket.remotePort;

  console.log('클라이언트 연결됨:', clientAddress);

  // HTTP 요청 데이터 수신
  socket.on('data', async (data) => {
    try {
      const request = data.toString();

      // HTTP 요청 파싱
      const lines = request.split('\r\n');
      const requestLine = lines[0];
      const [method, url] = requestLine ? requestLine.split(' ') : ['', ''];

      // User-Agent 헤더 추출
      const userAgentLine = lines.find((line) =>
        line.toLowerCase().startsWith('user-agent:')
      );
      const userAgent = userAgentLine
        ? userAgentLine.split(': ')[1]
        : 'Unknown';

      // 요청 로그 기록
      logRequest(method, url, userAgent, socket.remoteAddress);

      // URI, MIME TYPE 에 따라 HTTP 요청을 처리하는 함수

      let responseBody;
      let statusCode = 200;
      let contentType = 'text/html; charset=utf-8';

      // GET /index.html 또는 GET / 요청 처리
      if (method === 'GET' && (url === '/' || url === '/index.html')) {
        try {
          const indexPath = path.join(FRONTEND_DIST_PATH, 'index.html');
          responseBody = await fs.readFile(indexPath, 'utf8');
        } catch (error) {
          logError(error, 'Failed to read index.html');
          statusCode = 404;
          responseBody =
            '<h1>404 Not Found</h1><p>index.html 파일을 찾을 수 없습니다.</p>';
        }
      }
 

      const statusText = statusCode === 200 ? 'OK' : 'Not Found';
      const response = [
        `HTTP/1.1 ${statusCode} ${statusText}`,
        `Content-Type: ${contentType}`,
        'Connection: close',
        `Content-Length: ${Buffer.byteLength(responseBody, 'utf8')}`,
        '',
        responseBody,
      ].join('\r\n');

      // 응답 로그 기록
      const responseTime = Date.now() - startTime;
      logResponse(statusCode, contentType, responseTime);

      socket.write(response);
      socket.end();
    } catch (error) {
      logError(error, 'Request processing error');

      const errorResponse = [
        'HTTP/1.1 500 Internal Server Error',
        'Content-Type: text/html; charset=utf-8',
        'Connection: close',
        '',
        '<h1>500 Internal Server Error</h1><p>서버 오류가 발생했습니다.</p>',
      ].join('\r\n');

      socket.write(errorResponse);
      socket.end();
    }
  });

 

그런데 index.html 만 응답했다고 웹페이지가 그려지지 않습니다.

index.html 을 해독하면서 브라우저가 다시한번 bundle.js 파일을 요청할텐데 이를 처리하는 코드를 작성하지 않았기 때문입니다.

 

따라서 다음 대목을 추가해주어 브라우저가 bundle.js 를 제대로 로드할 수 있도록 합니다.

     // GET /bundle.js 요청 처리
      else if (method === 'GET' && url === '/bundle.js') {
        try {
          const bundlePath = path.join(FRONTEND_DIST_PATH, 'bundle.js');
          responseBody = await fs.readFile(bundlePath, 'utf8');
          contentType = 'application/javascript; charset=utf-8';
        } catch (error) {
          logError(error, 'Failed to read bundle.js');
          statusCode = 404;
          responseBody = 'console.error("bundle.js not found");';
          contentType = 'application/javascript; charset=utf-8';
        }
      }

 

그러면 다음과 같이 index.html 에 bundle.js 코드를 실행하면서 화면이 제대로 그려지는 것을 확인할 수 있습니다.

 

 

 

네크워크 탭을 확인해보면 두개의 요청+응답을 주고 받은 사실을 알 수 있습니다.

 

그리고 한가지 신기한 사실은 브라우저는 기본적으로 /favicon.ico 를 요청한다는 점입니다.

즉, http://example.com/ 접속 → http://example.com/favicon.ico 자동 요청합니다.

 

따라서 이를 처리해줄 수 있도록 정적 배포 dist 폴더에 favicon.ico을 위치시켜줄 필요가 있습니다.

 

 

이를 위해서 Webpack에 CopyWebpackPlugin 추가하여public 폴더의 정적 파일들(favicon.ico 등)을 dist 폴더로 자동 복사하고

웹서버는 dist 폴더 하나만 서빙하면 되도록 통합하였습니다.

 

CopyWebpackPlugin이란?

---

 

대용량 트래픽을 견디는 고성능 웹서버 구현하기

여태까지는 싱글 스레드에서 처리되는 HTTP 웹 서버를 다루었습니다. 그런데 만약 요청의 수가 급증한다면,

멀티 코어 CPU 환경에서 하나의 스레드만 사용해서 요청을 처리하는 것이 다소 아쉽게 느껴질 수 있습니다. 

 

만약 멀티 스레드를 활용해서 커버할 수 있는 영역이라면 굳이 인스턴스를 수평 확장할 필요도 없기에 있는 자원을 최대한 효율적으로 활용하는 것이 중요합니다. 

 

따라서 웹 서버를 각각 멀티 프로세스/ 멀티 스레드 방식으로 처리해보고 각 방식을 비교 분석하고자 하였습니다. 

 

1. cluster 모듈을 활용해 CPU 코어 수만큼 워커 프로세스를 생성

2. Worker Threads 기반 서버 구현

 

 

이 때, 성능 개선 후와 전의 성능 차이를 확인해보기 위해서  웹 성능 부하를 테스트 하기 위해 Apache Bench 를 활용하고자 했습니다. 

 

Apache Bench (ab)

• 아파치 HTTP 서버와 함께 제공되는 간단한 벤치마크 도구
• 기본 기능: 동시 접속 수, 요청 수를 지정해서 서버에 부하 걸기
• 예:
  • -n 1000 → 총 1000번 요청
  • -c 100 → 동시에 100개 요청
• ab -n 1000 -c 100 http://localhost/

 

💥 성능 테스트 실패: Apache Bench failed with code 60: Completed 5000 requests
apr_socket_recv: Operation timed out (60)

(base) kimseoyeon@gimseoyeons-MacBook-Air-2 webserver % npm run test:performance

> codestargram-webserver@1.0.0 test:performance
> node test/performanceTest.js

🚀 웹서버 성능 테스트 시작
📡 대상 서버: http://127.0.0.1:80
============================================================

📊 기본 페이지 로드 성능 테스트
🚀 실행 중: ab -n 1000 -c 10 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: HTML 페이지 로드 (index.html)

📊 JavaScript 파일 로드 성능 테스트
🚀 실행 중: ab -n 500 -c 10 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/bundle.js
📝 테스트: JavaScript 파일 로드 (bundle.js)

📊 파비콘 로드 성능 테스트
🚀 실행 중: ab -n 500 -c 10 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/favicon.ico
📝 테스트: 파비콘 로드 (favicon.ico)

📊 동시 연결 수 스트레스 테스트

🔥 동시 연결 수: 1
🚀 실행 중: ab -n 200 -c 1 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: 동시 연결 1개

🔥 동시 연결 수: 5
🚀 실행 중: ab -n 200 -c 5 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: 동시 연결 5개

🔥 동시 연결 수: 10
🚀 실행 중: ab -n 200 -c 10 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: 동시 연결 10개

🔥 동시 연결 수: 20
🚀 실행 중: ab -n 200 -c 20 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: 동시 연결 20개

🔥 동시 연결 수: 50
🚀 실행 중: ab -n 200 -c 50 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: 동시 연결 50개

📊 Keep-Alive 성능 비교 테스트
🚀 실행 중: ab -n 500 -c 10 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: Keep-Alive 비활성화
🚀 실행 중: ab -n 500 -c 10 -s 60 -g gnuplot.dat -e results.csv -k http://127.0.0.1:80/
📝 테스트: Keep-Alive 활성화

📊 지속 부하 테스트 (20초)
🚀 실행 중: ab -t 20 -c 10 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: 20초간 지속 부하 테스트

============================================================
📊 성능 테스트 결과 요약
============================================================

🎯 HTML 페이지 로드 (index.html)
   ✅ 완료된 요청: 1000
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 7008.74 req/sec
   ⏱️  평균 응답 시간: 1.43 ms
   📈 전송 속도: 3114.24 KB/sec
   ⏰ 총 소요 시간: 0.143 초

🎯 JavaScript 파일 로드 (bundle.js)
   ✅ 완료된 요청: 500
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 4468.08 req/sec
   ⏱️  평균 응답 시간: 2.24 ms
   📈 전송 속도: 163857.07 KB/sec
   ⏰ 총 소요 시간: 0.112 초

🎯 파비콘 로드 (favicon.ico)
   ✅ 완료된 요청: 500
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 5574.26 req/sec
   ⏱️  평균 응답 시간: 1.79 ms
   📈 전송 속도: 947.19 KB/sec
   ⏰ 총 소요 시간: 0.09 초

🎯 동시 연결 1개
   ✅ 완료된 요청: 200
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 1048.29 req/sec
   ⏱️  평균 응답 시간: 0.95 ms
   📈 전송 속도: 465.79 KB/sec
   ⏰ 총 소요 시간: 0.191 초

🎯 동시 연결 5개
   ✅ 완료된 요청: 200
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 6928.81 req/sec
   ⏱️  평균 응답 시간: 0.72 ms
   📈 전송 속도: 3078.72 KB/sec
   ⏰ 총 소요 시간: 0.029 초

🎯 동시 연결 10개
   ✅ 완료된 요청: 200
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 8215.24 req/sec
   ⏱️  평균 응답 시간: 1.22 ms
   📈 전송 속도: 3650.33 KB/sec
   ⏰ 총 소요 시간: 0.024 초

🎯 동시 연결 20개
   ✅ 완료된 요청: 200
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 9794.80 req/sec
   ⏱️  평균 응답 시간: 2.04 ms
   📈 전송 속도: 4352.18 KB/sec
   ⏰ 총 소요 시간: 0.02 초

🎯 동시 연결 50개
   ✅ 완료된 요청: 200
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 8990.38 req/sec
   ⏱️  평균 응답 시간: 5.56 ms
   📈 전송 속도: 3994.75 KB/sec
   ⏰ 총 소요 시간: 0.022 초

🎯 Keep-Alive 비활성화
   ✅ 완료된 요청: 500
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 8943.58 req/sec
   ⏱️  평균 응답 시간: 1.12 ms
   📈 전송 속도: 3973.96 KB/sec
   ⏰ 총 소요 시간: 0.056 초

🎯 Keep-Alive 활성화
   ✅ 완료된 요청: 500
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 7413.89 req/sec
   ⏱️  평균 응답 시간: 1.35 ms
   📈 전송 속도: 3294.26 KB/sec
   ⏰ 총 소요 시간: 0.067 초

🎯 20초간 지속 부하 테스트
   ✅ 완료된 요청: 12342
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 559.31 req/sec
   ⏱️  평균 응답 시간: 17.88 ms
   📈 전송 속도: 248.52 KB/sec
   ⏰ 총 소요 시간: 22.067 초

🎉 성능 테스트 완료!

 

Cluster 모듈 기반 멀티 스레드 서버 구현

 

(base) kimseoyeon@gimseoyeons-MacBook-Air-2 webserver % node test/clusterTest.js
🚀 클러스터 모드 성능 비교 테스트 시작
📡 대상 서버: ClusterPerformanceTester
============================================================

📊 단일 vs 멀티 프로세스 성능 비교 테스트

🔹 단일 프로세스 모드 테스트
🚀 실행 중: ab -n 2000 -c 50 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: 단일 프로세스 모드

⏳ 클러스터 모드 전환을 위해 서버 재시작 필요
💡 다음 명령어로 클러스터 모드 서버를 시작하세요:
   USE_CLUSTER=true node webserver/server.js
   또는
   node webserver/server.js --cluster

⏸️  클러스터 모드 서버 시작 후 아무 키나 누르세요...

🔹 클러스터 모드 테스트
🚀 실행 중: ab -n 2000 -c 50 -s 60 -g gnuplot.dat -e results.csv http://127.0.0.1:80/
📝 테스트: 클러스터 모드

============================================================
📈 클러스터 성능 비교 분석
============================================================

🔹 단일 프로세스:
   ⚡ RPS: 6191.91 req/sec
   ⏱️  응답시간: 8.07 ms
   📈 전송속도: 2751.29 KB/sec

🔹 클러스터 모드:
   ⚡ RPS: 5421.27 req/sec
   ⏱️  응답시간: 9.22 ms
   📈 전송속도: 2408.87 KB/sec

📊 성능 개선도:
   ⚡ RPS 향상: -12.45%
   ⏱️  응답시간 개선: -14.22%
   📈 전송속도 향상: -12.45%

⚠️  클러스터 모드에서 예상보다 성능 향상이 적습니다.
    높은 동시성 부하에서 더 큰 차이를 보일 수 있습니다.

============================================================
📊 성능 테스트 결과 요약
============================================================

🎯 단일 프로세스 모드
   ✅ 완료된 요청: 2000
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 6191.91 req/sec
   ⏱️  평균 응답 시간: 8.07 ms
   📈 전송 속도: 2751.29 KB/sec

🎯 클러스터 모드
   ✅ 완료된 요청: 2000
   ❌ 실패한 요청: 0
   ⚡ 초당 요청 수: 5421.27 req/sec
   ⏱️  평균 응답 시간: 9.22 ms
   📈 전송 속도: 2408.87 KB/sec

🎉 성능 테스트 완료!

💾 클러스터 비교 결과 저장됨: cluster-performance-test-2025-09-17T13-26-31-597Z.json
(base) kimseoyeon@gimseoyeons-MacBook-Air-2 webserver %