콘텐츠
Express 이용 클라이언트에게 웹 페이지 보여주기
이전 포스팅 Node.js 로 웹 개발 시작 하기: Express.js 프레임워크 에서 Express 를 이용해 app.js 를 실행하여 서버를 시작하였습니다. 그리고 ‘Hello World!’ 라는 가벼운 텍스트를 접속한 클라이언트에 표시 하였었죠.
그런데 실제 웹 페이지는 HTML 로 제작됩니다. 그럼 접속한 클라이언트에게 HTML 파일은 어떻게 보여줄 수 있을까요? 오늘은 이 내용에 대해 정리해 보겠습니다.
index.html 생성
먼저 저는 app.js 가 있는 Project 최상단 경로에 index.html 을 생성 했습니다.
꼭 index.html 일 필요는 없지만 보편적으로 웹 페이지의 첫 화면으로 보여줄 페이지를 index.html 파일로 생성 합니다.
index.html 내용 작성
index.html 내용을 자유롭게 작성해 줍시다. 저는 다음과 같이 작성 했습니다.
<!DOCTYPE html>
<html>
<head>
<title>첫 화면</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>이 화면은 첫 화면 입니다.</p>
</body>
</html>app.js 코드 작성
app.js 는 Express 프레임워크에서 메인 진입점이 되어주는 역할로 애플리케이션을 초기화, 설정하는 내용의 코드를 담게 됩니다. 저는 이전 포스트에서 작성 했던 app.js 를 이용하겠습니다. (없다면 만들어 주세요.)
그럼 이제 app.js 에서 HTML 파일을 불러와 표시하는 코드를 작성해 보겠습니다. 작성 된 코드는 다음과 같습니다.
// app.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});코드가 이전 포스트와 크게 다를바가 없죠? 여기서 중요하게 볼 부분은 sendfile 메소드 입니다.
res.sendFile()
res 객체에 sendFile() 메소드는 파일을 클라이언트에게 보내기 위해 사용 됩니다. 이전 포스트에선 send() 메소드를 통해 ‘Hello World’ 텍스트를 보냈었습니다.
해당 메소드의 기본 사용법은 다음과 같습니다.
res.sendFile(path [, options] [, callback])위의 __dirname 은 Node.js 가 기본적으로 제공하는 변수로 이 스크립트가 실행되는 위치를 표현 합니다. 그래서 현재 같은 디렉토리 내의 index.html 을 찾아서 클라이언트에게 제공하는 코드가 됩니다.
options
이 코드는 단순하게 index.html 만을 가져와 복잡한 설정 값이 없지만 객체(Object) 형태의 옵션을 제공할 수 있습니다. 주요 옵션은 다음과 같습니다.
- root: 파일을 찾기 위한 루트 디렉토리를 지정합니다. 이 옵션을 사용하면 파일을 보내기 전에 지정된 루트 디렉토리에서 파일을 찾게 됩니다.
- headers: 전송할 파일에 대한 추가적인 HTTP 헤더를 지정합니다. 예를 들어, 캐시 제어를 위한 헤더를 설정할 수 있습니다.
- dotfiles: 숨겨진 파일(예: .gitignore와 같은 파일)을 포함할지 여부를 지정합니다.
- acceptRanges: 클라이언트의 범위 요청을 허용할지 여부를 지정합니다.
- cacheControl: 캐시 제어를 위한 헤더 값을 지정합니다.
- immutable: 파일이 변경되지 않음을 나타내는 헤더 값을 설정합니다.
- lastModified: 파일의 마지막 수정 시간을 나타내는 헤더 값을 설정합니다.
callback
callback 부분엔 파일을 보내고 난 이후 부분의 코드를 작성하게 됩니다. 주로 err 부분을 작성하게 되며 html 전달이 실패 했을 경우 처리할 코드, 그리고 성공 했을 경우 콘솔에 정보를 표시하는 등의 코드를 작성할 수 있습니다.
다음 코드는 에러와 성공 여부를 표시하는 예시 코드 입니다.
res.sendFile('index.html', (err) => {
if (err) {
// 파일 전송 중에 에러가 발생했을 때의 처리
console.error('파일 전송 중 에러 발생:', err);
res.status(err.status).send('파일 전송 중 에러 발생');
} else {
// 파일이 성공적으로 전송되었을 때의 처리
console.log('파일이 성공적으로 전송되었습니다.');
}
});
코드 실행 결과
위의 예시 코드가 정상적으로 실행 되면 localhost:3000 접속 시 다음과 같은 화면이 출력 됩니다.
