[node.js] static 파일과 static 미들웨어

미들웨어

미들웨어는 클라이언트 측의 요청과 서버의 응답 사이에서 문지기 역할을 하는 중간 계층입니다. 예를 들어 클라이언트 측에서 서버 측에 로그인 요청을 한다고 가정 할 때 중간 계층인 미들웨어는 요청으로 받은 정보가 서버 측에 전달해도 괜찮은지 그 여부를 판단하는 역할을 할 수 있습니다.

---

static 파일 과 static 미들웨어

Node.js에서 static 파일은 클라이언트 측에서 서버에 요청을 보내면 서버에서 응답으로 전송하는 파일 중 변경되지 않는 파일을 의미합니다. 예를 들어, 이미지, CSS 파일, JavaScript 파일 등이 이에 해당합니다. 

Static 파일은 클라이언트 측에서 요청한 URL 경로에 대한 파일을 찾아서 응답으로 전송하는 방식으로 작동합니다.

이 때, Node.js에서는 "express" 라이브러리를 사용하여 정적 파일을 서비스(전달)할 수 있습니다.

express를 사용하여 정적 파일을 서비스(전달)하려면 먼저 해당 파일들이 위치한 경로를 알아야 합니다. 이를 위해 express의 static 메소드를 사용할 수 있습니다. 예를 들어, 다음과 같은 코드를 사용하여 "public" 디렉토리에 있는 모든 정적 파일을 서비스(전달)할 수 있습니다.

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

// 브라우저에서 '/' 경로 즉, 루트경로(locall:3000)로 들어오는 모든 요청은
// 현재 서버가 열린 경로(__dirname)에서 public 폴더에 접근할 수 있습니다.
app.use('/',express.static(path.join(__dirname,'public')));

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

 

위 코드에서 express.static() 메소드는 "public" 디렉토리에 있는 모든 정적 파일을 서비스할 수 있도록 설정합니다. app.use() 메소드를 사용하여 express.static() 미들웨어를 등록합니다. 이제 클라이언트가 "/image.png"와 같은 경로로 요청을 보내면 Node.js 서버는 "public/image.png" 파일을 찾아서 전송합니다.

 

다시 정리하자면  static 미들웨어를 등록할 때 각각의 인자는 다음으로 요약할 수 있습니다.

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

즉, 요청경로로 설정한 경로에 클라이언트 측의 요청이 들어오면,  실제 경로에 위치한 정적 폴더(파일)에 접근할 수 있게 됩니다.

 

** 흔히 css 파일을 사용하려고 하면, 기존 자바스크립트, html 방식으로는 브라우저에서 css 파일을 인식하지 못 하는 문제를

볼 수 있는데,  static 미들웨어를 통해 브라우저에 해당 css 파일이 위치한 경로를 알려줌으로써 html 파일에 연결된 css 파

일을 사용할 수 있게 됩니다.

 

참고로) 요청경로에 해당하는 부분을 생략하고, 다음과 같이 입력해도 루트경로로 인식합니다. 

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