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
- css/
// 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 애플리케이션에서 정적 파일(웹 페이지, 스타일시트, 이미지, 스크립트 파일 등)을 손쉽게 관리하고 제공할 수 있습니다.
자세한 내용과 추가 옵션은 Express 공식 문서에서 확인할 수 있습니다.
관련 이전 게시글
- Express.js 소개 및 윈도우에서의 노드 기반 설치 방법
- Node.js 기반에서 Express를 활용한 기본 웹 서버 구축하는 방법
- Express 기본 라우팅: GET과 POST 요청 처리하는 방법
- Express 미들웨어 사용하는 방법과 자주 사용되는 미들웨어 소개
- Express 요청 데이터 파싱: 내장 메서드와 body-parser 미들웨어
이 글이 도움이 되셨다면 공유 부탁 드립니다.