본문 바로가기
STUDY/ExpressJS

[4-2] Express에서 정적 파일들을 제공하기 위한 미들웨어 - static

by Y.Choi 2023. 5. 24.
728x90
반응형

 

express.static은 Express.js에서 정적 파일을 제공하기 위한 빌트인 미들웨어입니다. 이 미들웨어를 사용하면 서버에서 특정 디렉토리에 있는 정적 파일(이미지, CSS, JavaScript 파일 등)을 클라이언트에게 직접 제공할 수 있습니다.

 

기본적으로, express.static은 정적 파일들이 위치하는 폴더의 경로를 인자로 받습니다. 해당 폴더는 웹 서버에서 접근 가능한 위치에 있어야 하며, 클라이언트 측에서 해당 폴더의 파일들에 접근할 수 있습니다.

 

클라이언트 측에서 /styles.css와 같은 경로를 통해 서버에 정적 파일을 요청하면, Express.js는 해당 파일이 위치하는 폴더를 찾아서 파일을 클라이언트에게 전송해 줍니다.

 

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

// 정적 파일을 제공하는 미들웨어 등록
app.use(express.static('public'));

// 라우트 등록
app.get('/', (req, res) => {
  res.send('Hello World!');
});

// 서버 실행
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

 

 

express.static('public') 코드는 public 폴더에 있는 정적 파일들을 서비스하기 위한 미들웨어를 등록하는 코드입니다. 

이를 통해 브라우저에서 http://localhost:3000/css/style.css 와 같은 경로로 css 파일에 접근할 수 있습니다. 

public 폴더에는 css 파일 이외에도 js, 이미지 등의 파일들도 위치할 수 있습니다.

 

 

옵션을 추가하여 더 세밀하게 설정할 수 있습니다. 예를 들어, 특정 경로에서만 정적 파일을 서비스하거나 캐싱 옵션을 조절할 수 있습니다.

// /static 경로에서만 정적 파일을 서비스
app.use('/static', express.static('public'));

// 캐싱 옵션 설정 (예: 1시간)
app.use(express.static('public', { maxAge: 3600000 }));

 

 

자세한 사항은 express.js 공식문서에서 확인할 수 있습니다.

728x90
반응형