Express로 서버 구성하기 - 3

Posted by Kyun2da on December 25, 2020

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️⃣ 마치며..

질문과 지적은 환영합니다. 이 문제는 최적의 정답일 수도 아닐수도 있습니다.
궁금한게 있으시면 아래 댓글 남겨주세요.🙏
댓글은 저에게 큰 힘이 됩니다!
감사합니다. ❤️