Express의 express.static 내장 메서드로 정적 파일 읽어오는 방법

Express에서 웹 애플리케이션을 개발할 때, HTML, CSS, JavaScript 파일 등과 같은 정적 파일을 제공해야 하는 경우가 많습니다. Express의 express.static 내장 메서드를 사용하면, 이러한 정적 파일을 효율적으로 관리하고 제공할 수 있습니다.

express.static 내장 메서드란?

express.static은 Express 애플리케이션에서 정적 파일을 제공하기 위한 내장 미들웨어 함수입니다. 이 메서드를 사용하면, 지정된 디렉토리의 파일들을 웹 서버에서 직접 접근할 수 있도록 설정할 수 있습니다. 즉, 클라이언트에서 서버의 특정 경로로 요청을 보냈을 때, 서버는 해당 파일을 응답으로 제공합니다.

express.static 사용 방법

다음은 express.static을 사용하여 ‘public’ 폴더 내의 파일들을 정적 파일로 제공하는 기본적인 예제 코드입니다.

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

// 'public' 폴더를 정적 파일을 제공하는 디렉토리로 설정합니다.
app.use(express.static('public'));

app.listen(port, () => {
    console.log(`Express app listening at http://localhost:${port}`);
});

위 코드에서 app.use(express.static('public')); 부분은 ‘public’ 디렉토리를 정적 파일을 제공하는 디렉토리로 설정합니다. 이 설정을 통해, ‘public’ 디렉토리 안에 있는 모든 파일들은 웹에서 직접 접근할 수 있게 됩니다.

정적 파일 사용 예시

예를 들어, ‘public’ 폴더 안에 다음과 같은 구조로 파일들이 있을 때:

public/
- css/
  - style.css
- images/
  - blueShareLogo.png
- js/
  - script.js
- html/
  - html_2.html

// html_2.html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>BlueShare사이트</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>BlueShare</h1>
    <img src="/img/blueShareLogo.png" alt="BlueShare Logo">
    <script src="/js/script.js"></script>
</body>
</html>

클라이언트는 http://localhost:3000/html/html_2.html 주소로 접근하여 ‘html_2.html’ 파일을 요청할 수 있습니다. 그리고 ‘html_2.html’ 파일은 해당 HTML 문서에서 참조하는 CSS 파일, 이미지 파일, JavaScript 파일을 함께 로드합니다.

express.static 내장 메서드로 정적 파일 사용 예제코드 실행 화면

결론

express.static 내장 메서드를 사용하면, Express 애플리케이션에서 정적 파일(웹 페이지, 스타일시트, 이미지, 스크립트 파일 등)을 손쉽게 관리하고 제공할 수 있습니다.

자세한 내용과 추가 옵션은 Express 공식 문서에서 확인할 수 있습니다.

Express의 express.static 내장 메서드로 정적 파일 읽어오는 방법

express.static 내장 메서드란?

express.static 사용 방법

정적 파일 사용 예시

결론

관련 이전 게시글

동일 카테고리 게시글