이미지와 CSS를 나눠주기: 정적 파일 서빙
웹 서버는 기본적으로 해킹 방지를 위해 모든 폴더와 파일을 꽁꽁 숨겨둡니다. 클라이언트가 <img src="/logo.png">를 요청해도 서버가 허락하지 않으면 404 에러가 발생합니다. 이렇게 변하지 않는 파일(이미지, CSS, JS)을 누구나 접근할 수 있도록 특정 폴더를 개방(Public)하는 것이 바로 정적 파일 서빙(Static File Serving)입니다.
express.static 미들웨어
Express에서는 별도의 복잡한 코드 없이, 내장된 express.static 미들웨어 한 줄이면 특정 폴더를 즉시 외부에 공개할 수 있습니다.
// 'public' 이라는 이름의 폴더를 클라이언트에게 통째로 개방합니다.
app.use(express.static('public'));
| 서버 내 실제 파일 경로 |
브라우저 접속 주소 (URL) |
| public/logo.png |
http://localhost:3000/logo.png |
| public/css/style.css |
http://localhost:3000/css/style.css |
| public/js/main.js |
http://localhost:3000/js/main.js |
💡 핵심 팁: URL에 'public'은 생략됩니다!
가장 많이 하는 실수가 http://localhost:3000/public/logo.png 로 접속하는 것입니다. express.static으로 공개된 폴더는 그 폴더 자체가 루트 경로(/)가 되므로, public 이라는 폴더명은 URL에서 완전히 생략해야 합니다!
express.static 폴더 공개 설정 및 동작 결과
서버의 public 폴더를 외부에 공개하고, 브라우저에서 /logo.png 이미지에 직접 접속하는 과정입니다.
const express = require('express');
const path = require('path');
const app = express();
// 1. 모든 요청에 대해 로그를 남기는 커스텀 미들웨어
app.use((req, res, next) => {
console.log(`[서버 로그] 클라이언트가 ${req.url} 을(를) 요청했습니다.`);
next();
});
// 2. 정적 파일 폴더 개방 (Static File Serving)
// 클라이언트가 서버의 'public' 폴더 안에 있는 파일들에 자유롭게 접근할 수 있게 됩니다.
// 핵심: URL에 '/public'을 적지 않아도, Node.js가 자동으로 public 폴더 내부를 뒤져서 파일을 찾아줍니다!
app.use(express.static(path.join(__dirname, 'public')));
// 3. 만약 public 폴더에도 파일이 없고, 라우터에도 매칭되지 않는다면?
app.use((req, res) => {
res.status(404).send('404 Not Found: 파일을 찾을 수 없습니다.');
});
app.listen(3000, () => {
console.log('서버가 3000번 포트에서 대기 중입니다...');
});
🚀
Image successfully rendered!
Server Console
$ node app.js
서버가 3000번 포트에서 대기 중입니다...
[서버 로그] 클라이언트가 /logo.png 을(를) 요청했습니다.
> express.static 미들웨어가 public 폴더에서 logo.png 를 발견하여 전송 완료! ✅