Express 서버에서 클라이언트에게 HTML 파일을 전송하는 방법을 알아보자.
프로젝트 폴더 안에 public이라는 폴더를 만들고, 그 안에 main.html 파일을 작성한다.
main.html 파일의 내용은 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main page</title>
</head>
<body>
<h1>Main page</h1>
</body>
</html>
이제 index.js에서 이 파일을 클라이언트로 전송하도록 설정해보자.
기존의 index.js 코드는 다음과 같다:
import express from 'express';
const app = express();
// middleware
// main page GET
app.get('/', (req, res) => {
res.send('Main page GET request');
});
app.listen(3000, () => {
console.log('Server is running');
});
기존의 코드에서 get 이후에 내용을 지우고 res.sendFile 이라는 명령어를 사용해준다.
res.sendFile 에게 어떤 경로의 파일을 보내줄건지 그 위치를 나타내주어야 한다.
import express from 'express';
const app = express();
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/main.html');
});
app.listen(3000, () => {
console.log('Server is running');
});
여기서 app.get의 콜백 함수에서 res.sendFile() 메서드를 사용해 main.html 파일을 전송할 수 있다.
파일 경로를 지정할 때는 __dirname을 사용해 현재 디렉토리를 기준으로 경로를 설정한다.
그러나 ESM 모듈 환경에서는 __dirname이 기본적으로 제공되지 않으므로, path 모듈을 통해 __dirname을 설정해준다.
수정된 index.js는 다음과 같다.
import express from 'express';
import path from 'path';
const __dirname = path.resolve(); // ESM 환경에서 현재 디렉토리 설정
const app = express();
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/public/main.html')); // 파일 경로 설정
});
app.listen(3000, () => {
console.log('Server is running');
});
res.sendFile() 메서드는 파일을 클라이언트에게 직접 전송할 때 사용하며
HTML뿐 아니라 이미지, 텍스트, JSON 파일 등 다양한 파일 형식을 전송할 수 있다.
ESM 모듈 환경에서 __dirname이 없는 이유는 ESM이 CommonJS와 다르게 __dirname과 같은 전역 변수를 제공하지 않기 때문이다. path.resolve()를 활용하여 __dirname을 대체할 수 있다.
'Node.js' 카테고리의 다른 글
| [Node.js] Node.js Template Engine 템플릿 엔진 (0) | 2024.11.08 |
|---|---|
| [Node.js] Node.js 서버 유지하기 Nodemon (0) | 2024.11.08 |
| [Node.js] Node.js Express (1) | 2024.11.08 |
| [Node.js] Node.js ESM 사용하기 (1) | 2024.11.08 |
| [Node.js] Node.js CJS로 간단한 HTTP 서버 만들기 (0) | 2024.11.05 |