Apache와 Node.js: 웹서버 구조 및 React

---

최근 웹 개발에서는 전통적인 Apache 웹서버와 Node.js 기반 서버가 서로 다른 방식으로 웹 요청을 처리합니다. 이 글에서는 두 기술의 구조적 차이, Node.js의 서버 동작 방식, React와의 통합 구조까지 자세히 살펴봅니다.

Apache vs Node.js: 웹서버의 구조적 차이

항목	Apache	Node.js
역할	전통적인 웹서버 (정적 파일 제공, PHP 실행 등)	런타임 환경 + 웹서버 기능 내장
요청 처리 방식	멀티스레드 기반 (요청마다 새로운 스레드 생성)	이벤트 기반, 비동기 처리 (싱글 스레드)
확장성	고정된 리소스 기반, 설정으로 확장 가능	고성능 실시간 처리에 최적화
언어 지원	PHP, Python, Perl 등	JavaScript (Express.js 등으로 확장)
사용 예시	워드프레스, 정적 웹사이트, LAMP 스택	REST API 서버, 실시간 앱, SPA 백엔드

Node.js에서 웹서버가 어떻게 동작하는가

Node.js는 Express.js 같은 프레임워크를 통해 웹서버 기능을 직접 구현합니다. 아래는 가장 기본적인 서버 코드 예시입니다.

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

app.get('/', (req, res) => {
  res.send('Hello from Node.js!');
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

이 코드만으로도 Node.js는 Apache 없이도 웹 요청을 받고 응답하는 서버가 됩니다.

Node.js가 웹서버 역할을 할 수 있는 이유

• 비동기 I/O 모델 덕분에 수천 개의 요청을 동시에 처리할 수 있습니다.
• 모듈 기반 구조로 필요한 기능만 가져와서 경량화된 서버를 만들 수 있습니다.
• Express, Koa, Fastify 같은 프레임워크들이 Apache의 기능을 대체하거나 능가하는 수준으로 발전했습니다.

Apache처럼 Node.js에서 정적 파일 제공도 가능

Node.js에서도 정적 파일을 서빙할 수 있습니다. 예를 들어:

app.use(express.static('public'));

이렇게 하면 public 폴더 안의 HTML, CSS, JS 파일을 Apache처럼 제공할 수 있습니다.

Node.js: 백엔드 런타임 환경

핵심 개념

• Node.js는 브라우저 밖에서 JavaScript를 실행할 수 있게 해주는 런타임 환경입니다.
• Chrome의 V8 엔진을 기반으로 하며, 서버 사이드 로직을 JavaScript로 작성할 수 있습니다.

주요 구조

구성 요소	설명
Express.js	가장 많이 쓰이는 Node.js 웹 프레임워크. REST API, 라우팅, 미들웨어 처리에 특화됨
app.js 또는 server.js	서버 진입점 파일. 요청을 받고 응답을 처리하는 로직이 들어감
routes/	URL 경로별 요청 처리 로직을 분리해서 관리
controllers/	실제 비즈니스 로직을 담당하는 함수들
models/	데이터베이스와 연결되는 구조. ORM 또는 직접 쿼리 작성

기능

• RESTful API 서버 구축
• 실시간 데이터 처리 (예: WebSocket)
• 파일 업로드, 인증, 세션 관리
• 데이터베이스 연동 (MongoDB, MySQL 등)

React: 프론트엔드 UI 라이브러리

핵심 개념

• React는 Facebook이 만든 컴포넌트 기반 UI 라이브러리입니다.
• 사용자 인터페이스를 효율적으로 구성하고, 상태 변화에 따라 자동으로 렌더링을 최적화합니다.

주요 구조

구성 요소	설명
App.js	최상위 컴포넌트. 전체 UI의 뼈대 역할
components/	재사용 가능한 UI 단위들 (버튼, 폼, 리스트 등)
pages/	라우팅에 따라 보여지는 화면 단위 컴포넌트
hooks/	상태 관리 및 로직 재사용을 위한 커스텀 훅
public/	정적 파일 (favicon, index.html 등)
src/index.js	React 앱의 진입점. DOM에 컴포넌트를 렌더링함

기능

• 상태 기반 UI 렌더링 (useState, useEffect)
• 라우팅 (react-router-dom)
• API 통신 (axios, fetch)
• 전역 상태 관리 (Redux, Context API)
• 스타일링 (CSS, styled-components, Tailwind 등)

Node.js + React: 왜 기본 웹사이트 구조가 되는가

이 둘을 함께 쓰면 프론트엔드와 백엔드가 완전히 분리된 구조로 웹사이트를 구성할 수 있습니다.

통합 흐름

[React Frontend] → API 요청 → [Node.js Backend] → DB 처리 → 응답 → 화면 렌더링

• React는 사용자와 상호작용하는 UI를 담당합니다.
• Node.js는 데이터 처리, 인증, 비즈니스 로직을 담당합니다.
• 둘 다 JavaScript 기반이라 개발자 입장에서 언어 통일이 가능합니다.

기본 웹사이트 세팅 예시

Node.js 설치

npm init -y
npm install express

React 설치

npx create-react-app my-app
cd my-app
npm start

API 연동

React에서:

fetch('http://localhost:5000/api/data')

Node.js에서:

app.get('/api/data', (req, res) => res.json(...))

요약

기술	역할	구조	기능
Node.js	백엔드	서버, 라우터, 컨트롤러, 모델	API, DB, 인증, 실시간 처리
React	프론트엔드	컴포넌트, 페이지, 상태, 라우터	UI, 상태관리, API 호출, 라우팅

---