정적 파일 제공하기 (CSS, JavaScript, 이미지) 🖼️
웹 페이지는 HTML만으로 구성되지 않습니다. 페이지의 디자인을 담당하는 CSS 파일, 사용자와의 상호작용을 담당하는 클라이언트 측 JavaScript 파일, 로고나 배너 같은 이미지 파일 등 다양한 정적 파일(Static Files) 들이 필요합니다. 정적 파일이란, 서버에서 별도의 처리 없이 내용이 고정된 채로 클라이언트에게 전달되는 파일들을 의미합니다.
Express는 기본적으로 우리가 정의한 라우트(예: app.get('/', ...) )에 대해서만 응답합니다. 따라서 사용자가 /css/style.css 같은 파일을 요청했을 때, 해당 파일을 어떻게 찾아 제공할지 별도로 알려주어야 합니다.
이 역할을 하는 것이 바로 Express의 내장 미들웨어인 express.static 입니다.
1. express.static 미들웨어 사용법
express.static은 특정 폴더를 정적 파일들을 위한 루트 디렉토리로 지정하는 미들웨어 함수입니다.
사용법:
app.use(express.static('폴더이름'));
- 폴더이름: 정적 파일들이 들어있는 디렉토리의 이름입니다. 일반적으로 public이라는 이름을 많이 사용합니다.
작동 방식:
- HTTP 요청이 들어오면(예: GET /css/style.css), express.static 미들웨어가 먼저 요청을 확인합니다.
- public 폴더 안에 요청된 경로와 일치하는 파일(public/css/style.css)이 있는지 찾아봅니다.
- 파일이 있으면: Express는 해당 파일을 클라이언트에게 직접 전송하고 요청-응답 주기를 종료합니다. 이 요청은 뒤따르는 다른 라우트 핸들러에게 전달되지 않습니다.
- 파일이 없으면: 미들웨어는 아무 일도 하지 않고 next()를 호출하여 다음 미들웨어나 라우트 핸들러에게 제어를 넘깁니다.
중요한 점: URL 경로는 express.static에 지정한 폴더 이름(public)을 포함하지 않습니다. URL은 해당 폴더를 기준으로 한 상대 경로가 됩니다.
- public/css/style.css → http://localhost:3000/css/style.css
- public/images/logo.png → http://localhost:3000/images/logo.png
- public/js/main.js → http://localhost:3000/js/main.js
2. 가상 경로 접두사(Virtual Path Prefix) 사용하기
정적 파일들의 URL에 특정 접두사를 붙여서 관리하고 싶을 수도 있습니다. 예를 들어 모든 정적 파일 요청을 /static/...으로 시작하게 만들 수 있습니다.
사용법:
app.use('/static', express.static('public'));
이렇게 설정하면, URL 경로는 다음과 같이 변경됩니다.
- public/css/style.css → http://localhost:3000/static/css/style.css
- public/images/logo.png → http://localhost:3000/static/images/logo.png
Java 개발자를 위한 비유: express.static('public') 설정은 Spring Boot 프로젝트에서 src/main/resources/static 폴더에 파일을 두는 것과 거의 동일한 효과를 가집니다. Spring Boot는 기본적으로 /static, /public, /resources 등의 경로에 있는 정적 리소스를 자동으로 제공하도록 설정되어 있는데, express.static은 이와 같이 특정 폴더를 정적 리소스의 루트로 지정하는 역할을 합니다.
3. 전체 예시
템플릿 엔진과 정적 파일 제공을 함께 사용하는 전체 예시를 보겠습니다.
프로젝트 구조:
my-express-app/
├── node_modules/
├── public/ <-- 정적 파일을 담을 폴더
│ ├── css/
│ │ └── main.css
│ └── images/
│ └── logo.png
├── views/
│ └── index.ejs
├── app.js
└── package.json
public/css/main.css
body {
font-family: sans-serif;
background-color: #f0f8ff;
color: #333;
}
views/index.ejs
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>My Static File App</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This page is styled by an external CSS file.</p>
</body>
</html>
app.js
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
// 템플릿 엔진 설정
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// 'public' 폴더를 정적 파일 제공을 위한 폴더로 지정합니다.
// 이 코드는 보통 라우팅 코드보다 위에 위치시키는 것이 좋습니다.
app.use(express.static(path.join(__dirname, 'public')));
// 루트 경로에 대한 라우트 핸들러
app.get('/', (req, res) => {
res.render('index');
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
이제 서버를 실행하고 http://localhost:3000에 접속하면, index.ejs 파일이 렌더링되면서 main.css 파일이 함께 로드되어 배경색이 바뀌는 등 스타일이 적용된 페이지를 볼 수 있습니다.
정적 파일 제공은 서버사이드 렌더링을 사용하는 웹 애플리케이션의 필수적인 부분입니다. express.static 미들웨어를 사용하면 이 과정을 매우 간단하게 처리할 수 있습니다.
'프로그래밍 > NODEJS 강좌 BY GEMINI' 카테고리의 다른 글
| 6️⃣ 데이터베이스 연동: 정보의 저장과 관리 💾 (0) | 2025.07.03 |
|---|---|
| RESTful API 설계 및 구현 🏗️ (1) | 2025.07.02 |
| 템플릿 엔진 사용하기 (선택 사항) 🎨 (1) | 2025.06.18 |
| 미들웨어 (Middleware) 활용하기 🔗 (1) | 2025.06.16 |
| 라우팅 (Routing) 정의하기 🚦 (1) | 2025.06.12 |