node.js Express를 이용하여 간단한 Home Page만들기
const express = require('express');
const app = express();
// 홈페이지 코드 작성
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server Started on PORT : ${PORT}`));
일단 간단한 코드를 위와 같이 작성하고 index.js파일로 저장을 합니다.
// 홈페이지 코드 작성
app.get('/', (req, res) => {
// HTML코드를 작성하여 Client에 응답한다.
res.send('<h1>Hello World</h1>').end();
})
GET요청을 client에서 받으면 '<h1>Hello World</h1>'을 전달해 줍니다. 참고로 '<h1>'은 tag로서 HTML 코드 입니다.
이후 서버를 동작시키면 위와 같이 Hello World가 출력되는것을 알수 있습니다. 하지만 이것은 매우 간단한 코드이고 이제 조금더 HomePage처럼 만들어 보겠습니다.
<!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>My HomePage</title>
</head>
<body>
<h1>My HomePage</h1>
<p>테스트 홈페이지.</p>
<p>테스트 홈페이지.</p>
</body>
</html>
위 사진에 나와있는 경로('./public/index.html')로 index.html파일을 저장하고 'My HomePage' HTML코드를 작성합니다.
const express = require('express');
const path = require('path'); // 파일 경로 추가를 위한 path모듈 추가
const app = express();
// homepage의 경로를 문자열 변수로 저장
const home = path.join(__dirname, '/public', '/index.html');
console.log(home);
// 홈페이지 코드 작성
app.get('/', (req, res) => {
// HTML코드를 작성하여 Client에 응답한다.
// 파일을 보내는 것이기 때문에 send -> sendFile로 변경
res.sendFile(home);
})
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server Started on PORT : ${PORT}`));
하지만 위의 코드처럼 작성하게 되면 새로운 페이지마다 코드를 작성해야해서 효율이 낮습니다. 따라서 위 코드는 간단하게 참고해 주시기 바랍니다.
// 홈페이지 코드 작성(편한 방법) middleware사용
app.use(express.static(path.join(__dirname, '/public')));
전의 코드와 달리 1줄로 끝난것을 알수 있습니다. middleware(app.use)를 사용하였습니다. 이때 express.static에 출력할 홈페이지의 경로를 입력하면 똑같이 출력되는 것을 알수 있습니다.
이제 이전에 작성한 코드처럼 페이지가 추가될때마다 코드를 작성하기 보다는 경로에 있는 파일을 기준으로 client에 웹페이지에 대한 요청을 보낼수 있습니다.
index.html과 마찬가지로 동일한 경로에 page1.html를 작성해 줍니다. 그리고 위 사진처럼 코드를 작성해 줍니다.
서버를 동작시키고 url에 'http://localhost:5000/page1.html'을 입력하면 위와 같이 페이지가 출력이 됩니다. 다시 'http://localhost:5000'을 입력하면 초기 상태의 홈페이지가 출력이 됩니다.
이처럼 파일의 경로에 따라 client에게 다른 페이지를 보여줄수 있습니다.
gitHub address : https://github.com/Alex-Choi0/My-HomePage.git
댓글
댓글 쓰기