본 포스팅은 node.js와 express 패키지가 설치되어있다는 가정하에 진행합니다.
기본 구성
- express로 웹 서버 구축
/* index.js */
// express 프레임워크 객체 생성
const express = require('express');
// express의 새 인스턴스 할당
const app = express();
// path 사용
const path = require('path');
app.get('/', function (req, res) {
// code
});
// 해당 포트로 서버를 시작하고 들어오는 요청 수신
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
- 보여줄 html 페이지
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<body>
<h2> Hello World! </h2>
</body>
</html>경로 설정
- 'path'와 '__dirname'변수를 사용하여 경로와 연결할 html 페이지 지정
- path를 사용하는 이유?
- 개발자가 경로 지정 시 잘못된 경로를 지정하는 실수를 예방하기 위함
// path.resolve() : 경로 설정, 경로를 조합하여 올바른 경로로 만들어줌
// __dirname : 현재 경로 반환
const htmlPath = path.resolve(__dirname + '/index.html'));
// C:\Users\luvri\바탕 화면\nodejs\index.html
- path 모듈에 대한 설명이 필요하신 분은 아래의 포스팅을 참고해주세요
2023.04.18 - [Web Programming/Node.js] - Node.js Path - Path 모듈 설치 및 사용 방법, 메서드 설명
특정 URL에서 웹 페이지(html) 보여주기
- 기본 경로 접속시 index.html 보여주기
- res.sendFile(경로)
- 특정 파일을 전송해주는 함수
- 절대 경로만 입력 가능
app.get('/', function (req, res) {
// 절대경로만 가능
//res.sendFile('/Users/luvri/바탕 화면/nodejs/index.html');
res.sendFile(htmlPath);
});
- 웹 브라우저로 해당 경로를 접속한 화면
- html 파일로 페이지를 보여줌
전체 코드
/* index.js */
// express 프레임워크 객체 생성
const express = require('express');
// express의 새 인스턴스 할당
const app = express();
// path 사용
const path = require('path');
app.get('/', function (req, res) {
// html 파일 경로 설정
const htmlPath = path.resolve(__dirname + '/index.html'));
// html 파일 보여주기
res.sendFile(htmlPath);
});
// 해당 포트로 서버를 시작하고 들어오는 요청 수신
app.listen(3000, () => {
console.log('Server listening on port 3000');
});