[Node.js] Express.static 메서드 사용해보기

1. Express.static이 뭐하는 메서드임?

Node.js Express에서 express.static은 정적 파일(Static Files)을 제공하기 위해 사용하는 Express.js의 기본 미들웨어입니다.
여기서 정적 파일이란 서버에서 특별한 처리 없이 클라이언트에게 제공되는 파일로, 예를 들어 HTML, CSS, JavaScript, 이미지, 글꼴 등이 포함됩니다.

또한, 미들웨어는 Express.js에서 요청(Request)과 응답(Response) 사이에 실행되는 중간 처리 함수입니다. 미들웨어는 요청 객체(req), 응답 객체(res), 그리고 다음 미들웨어로 전달할 수 있는 next() 함수를 사용할 수 있습니다.

---

예시와 함께 살펴봅쉬다.

project/
├── public/
│   ├── static-page.html
│   ├── styles.css
│   └── images/
│       └── logo.png
└── server.js

프로젝트 파일 경로들은 다음과 같습니다.

 

가장 먼저 server.js 파일을 다음과 같이 만들어줍시다.

const express = require("express");
const path = require("path");

const app = express();

// 'public' 폴더에 있는 정적 파일 제공
app.use(express.static(path.join(__dirname, "public")));

// 기본 라우트
app.get("/", (req, res) => {
  res.send("Hello, visit /static-page.html or /images/logo.png");
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`서버가 실행 중입니다: http://localhost:${PORT}`);
});

이렇게 만들어놓으면,

1)클라이언트가 http://localhost:3000/static-page.html을 요청할 경우 : 

→ 서버는 public/static-page.html 파일을 찾아 제공

 

2)클라이언트가 http://localhost:3000/images/logo.png를 요청할 경우 : 

→ 서버는 public/images/logo.png 파일을 찾아 제공

해주게 됩니다.

 

즉, app.use(express.static("public"))은 클라이언트 쪽에서의 요청 URL을 public/ 디렉토리 내부의 파일로 매핑해준다고 할 수 있죠.

 

 

특정 URL 경로로만 노출하려면 메서드를 다음과 같이 수정할 수 있습니다.

app.use("/static", express.static(path.join(__dirname, "public")));

 

이 경우 클라이언트가 http://localhost:3000/static/static-page.html  경로로 요청하게 되면 public/static-page.html 파일을 제공해주게 되겠죠?

 

2. 그래서 어따 씀?

이 메서드는 위에 예시에서처럼 CSS, Javascript, 이미지 같은 리소스를 제공하거나, React나 Vue 등을 통해 만든 SPA(Single Page Application)에서 빌드된 정적 파일 제공해줍니다.

예시 하나 더 살펴보죠.

폴더 구조는 다음과 같습니다.

project/
├── build/
│   ├── index.html
│   ├── static/
│   │   ├── css/
│   │   │   └── main.css
│   │   └── js/
│   │       └── main.js
├── server.js

 

 

 

server.js 코드는 다음과 같습니다.

const express = require("express");
const path = require("path");

const app = express();

// React 빌드 폴더를 정적 파일로 제공
app.use(express.static(path.join(__dirname, "build")));

// React SPA를 위한 기본 경로 처리
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`React 빌드 파일 제공 중: http://localhost:${PORT}`);
});

 

위 코드에 대해서 설명해보자면, 

 

1)사용자가 URL: http://localhost:3000/로 접속하게 되면

→ 우리의 서버는 build/index.html 파일을 반환해줍니다. (React 앱의 최초 로딩 페이지로, 그 안에 필요한 CSS와 JS 파일을 포함). 참고로, React 앱을 빌드한 정적 파일을 단순히 제공(CSR 방식)하는 경우이기 떄문에 Hydration 과정이 필요하지 않습니다. Hydration은 나중에 따로 다뤄보겠습니다.

→  index.html은 React 앱이 렌더링할 첫 번째 HTML 파일이기 때문에, 그 이후의 라우팅은 React가 처리

 

2)사용자가 URL: http://localhost:3000/about로 접속하게 되면

→ Express 서버는 app.get("*") 라우트에서 모든 요청을 처리하므로, index.html 파일을 다시 반환합니다.

→ React 앱은 클라이언트 사이드 라우팅을 통해 about 페이지를 렌더링합니다. React 쪽에서 about 컴퍼넌트를 만들어놔야겠죠?

 

3)사용자가 URL: http://localhost:3000/static/css/main.css로 접속하게 되면

→ Express는 build/static/css/main.css 파일을 반환(React 앱에서 사용되는 스타일 포함)

→ 모든 경로(*)에 대해서 index.html을 요청한다고 했지만, 이 요청은 정적 파일 요청이므로 정적 파일 요청이므로 index.html을 렌더링하지 않고, CSS 파일 자체를 반환해주게 됩니다.

body {
  background-color: #f0f0f0;
}

h1 {
  color: #333;
}

 

요런 파일요. 이건 근데 별 의미 없겠죠?

---

이상입니다.

읽어주셔서 감사합니다.