Static

Express에 내장된 미들웨어이며, 정적 파일(Image, CSS, JS)을 제공한다.

app.use('요청 경로', express.static('실제 경로'));

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

이렇게 불러온다면

public 디렉토리 아래에 있는 다음과 같은 폴더와 파일들을

Express/public/index.html
Express/public/css/style.css
Express/public/js/main.js
Express/public/css/style.css
// ->
<http://localhost:3000/index.html>
<http://localhost:3000/css/style.css>
<http://localhost:3000/js/main.js>
<http://localhost:3000/css/style.css>

이렇게 불러온다.

서버의 폴더 경로와 요청 경로가 다르므로 외부인이 서버의 구조를 쉽게 파악할 수 없으며, 이는 보안에 큰 도움이 된다.

하지만 public은 워낙에 유명하니, public-3030 같이 써서 서버 구조에 대한 보안에 신경을 써준다.

만약 요청 경로에 해당하는 파일이 없으면 알아서 내부적으로 next를 호출하나, 파일을 하나라도 발견했다면 다음 미들웨어는 실행되지 않는다.

Static 미들웨어 확장법

예시를 보자

app.use(morgan('dev');
app.use(cookieParser(process.env.COOKIE_SECRET);
app.use(session({
    resave: false, 
    saveUninitialized: false, 
    secret: process.env.COOKIE_SECRET, 
    cookie: { 
        httpOnly: true, 
        secure: false,
    },
    name: 'session-cookie',
}));
// 일부러 아래 둔다.
app.use('/', (req, res, next) => {
	// 미들웨어 안에다 둔다.
    if (req.session.id) // 세션 아이디가 있다면 (로그인 상태라면)
		express.static(path.join(__dirname, 'public'))(req, res, next); // public에서 에셋을 보여준다
	else // 세션 아이디가 없다면
    	next(); // 다음 미들웨어 실행
}
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use 안에서 넣는 콜백함수는 블록 내에서, 익스프레스가 알아서 (req, res, next)를 붙여 호출한다.

그런데 미들웨어 안에 두는 express.static은 누가 따로 (req, res, next)를 붙이는 게 없으므로 직접 (req, res, next)를 붙여 호해야 한다.