1️⃣ 서론
이번 시간에는 express의 정적 파일을 제공하는 방법에 대하여 알아보도록 하겠습니다.
그럼 시작해보도록 하겠습니다.
2️⃣ Express에서 정적파일 제공
Express 에선 기본 제공 미들웨어 함수 static을 이용하면 정적파일을 제공할 수 있습니다.
1
app.use(express.static("public"));
다음과 같은 코드를 삽입하고 public폴더를 만든 후 그 안에 파일을 넣습니다.
image.png 라는 파일을 넣었다고 가정해봅시다.
그렇다면 우리는 http://localhost:3000/image.png의 경로로 파일을 제공할 수 있습니다.
하지만 보통은 가상경로로 접속을 원하기때문에 우리는 다음과 같이 써주는 것이 일반적인 방식입니다.
1
app.use("/static", express.static("public"));
마지막으로 node 프로세스가 실행되는 디렉토리가 항상 같지 않으므로 절대경로를 사용해줍니다.
1
2
3
4
5
6
7
8
// commonJS에서는 다음과 같은 문법을 씁니다.
app.use("/static", express.static(__dirname + "/public"));
// es-module에서는 __dirname 지원을 안하므로 다음과 같은 문법을 씁니다.
import { dirname } from "path";
import { fileURLToPath } from "url";
const __dirname = dirname(fileURLToPath(import.meta.url));
3️⃣ 간단한 예제
위의 메소드를 활용하여 다음과 같은 예로 파일을 볼 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//es6 문법 기준 코드
import express from "express";
import { dirname } from "path";
import { fileURLToPath } from "url";
const __dirname = dirname(fileURLToPath(import.meta.url));
const app = express();
const port = 3000;
app.use("/static", express.static(__dirname + "/public")); //public에 저장해놓은 폴더를 불러올 수 있도록함.
app.get("/", (req, res) => {
res.send("Hello World!");
});
app.listen(port, () => {
console.log(`현재 앱이 http://localhost:${port}에서 구동중입니다.`);
});
예를들어 파일을 public 폴더에 image.png로 저장을 해놨다고 하면
http://localhost:3000/static/image.png 로 파일을 불러올 수 있습니다.
간단한 정적파일을 로드하는 방법에 대해 알아보았습니다.
다음 시간에는 Express에서 자주 쓰이는 라이브러리에 대해 알아보도록 하겠습니다.
읽어주셔서 감사합니다.
4️⃣ 마치며..
질문과 지적은 환영합니다. 이 문제는 최적의 정답일 수도 아닐수도 있습니다.
궁금한게 있으시면 아래 댓글 남겨주세요.🙏
댓글은 저에게 큰 힘이 됩니다!
감사합니다. ❤️
