이제 정적인 홈페이지를 만들 차례다
정적인 홈페이지라는 것은, 그 어떤 데이터의 변화에도 같은 화면이 도출되는 것이다
따라서 다소 의미 없어 보이기도 하지만, 전반적인 이해를 위해 참고하도록 한다
우선 구조부터 설명하자면, '/'즉 최상위 디렉토리에 접속했을경우 index.html파일을 출력하고자 하는것이 목적이다.
우선 index파일부터 하나 만들자.
프로젝트 폴더 안에 static이라는 폴더 하나를 만들고
그 안에 index.html파일을 만듭니다
안에 내용은 자유롭게 하셔도 됩니다.
예시)
<html>
<title>TITLE FOR NODEJS</title>
<body>
<h3>HELLO WORLD</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
그리고 이제 app.js파일에서 정적인 html파일들을 불러오기 위한 작업을 하면
var express= require('express');
var app = express();
app.set('views', __dirname + '/public');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
var _port = 3000;
app.use(express.static('public'));
app.listen(_port, function(){
console.log("PORT : " + _port);
});을 통해 app이 static한 파일들이있는 public이라는 폴더를 쓰게된다
또한 ejs라는 엔진을 통해 렌더링 할것이므로 npm install --save ejs를 콘솔에서 실행하여 설치하자
그리고 이제 2강에서 app.get과 같이 라우팅을 하는 함수들을 모아 따로 js파일을 만들어 관리하자
따라서 router라는 폴더를 만들고 그 안에 main.js라는 파일을 만들어
다음과 같이 써준다
module.exports = function(app){
app.get('/',function(req,res){
res.render('index.html');
})
}
이제 app.js파일에서 main.js파일을 불러오는 작업을 하면,
var express= require('express');
var app = express();
var router = require('./router/main.js')(app);
app.set('views', __dirname + '/public');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
var _port = 3000;
app.use(express.static('public'));
app.listen(_port, function(){
console.log("PORT : " + _port);
});
자 이제 여기까지 하면 정적인 파일을 불러오는 방법까지 완료하였다.
댓글 없음:
댓글 쓰기