익명의 개발노트

3. express와 템플릿 엔진 본문

프로그래밍/NodeJS

3. express와 템플릿 엔진

캡틴.JS 2019. 3. 24. 16:10
반응형

1. express : npm 모듈중에 하나이며, Node Js 에서 서버 프로그래밍에 필요한 기능을 훨씬더 편하게 해주는 기능이 있다.


 

  1) 일반적인 nodeJS 에서 서버 여는 방법.


const http = require('http');

const hostName = '127.0.0.1';
const port = 80;

http.createServer((req, res) => {
res.writeHead(200,{'Content-Type' : 'text/plain'});
res.end('Welcome');
}).listen(port, hostName,()=>{
console.log(`Server running at http://${hostName}:${port}/`);
});


2) Express에서 서버를 여는 방법


var express = require('express');

var app = express();
//정적파일을 위치시킬곳.
app.use(express.static('public'));//public 디렉토리에 정적파일을 제공.

app.get('/',function(req, res){ //매개변수의 값은 API에 써있음,
res.send('Welcome to homeP');
}); // url 직접치고 들어오면 get방식, post방식으로도 접속할수 있음

app.get('/route', function(req, res){
res.send('hello Router, <img src="/route.jpg">');
});

app.get('/login',function(req,res){ //get을 라우터라고 부르고, 이기능을 라우팅이라고함. "길을찾는다의 의미"
res.send('로그인 먼저 하세요');
});

app.listen(3000, function(){
console.log('연결완료 3000포트!');
}); //포트지정


2. 설치방법이나 기본적인 부분들은 : http://expressjs.com/ko/starter/installing.html 에서 참고 할 수 있다.


3. 정적인 파일(그림, text 등등 ) 제공하려면, 


app.use(express.static('public'));//public 디렉토리에 정적파일을 제공.


app.use를 사용해서 express.static안에 폴더명을 넣어주고, 그 안에다가 파일을 넣어주면 된다.


1) 웹페이지를 넣을 수도 있다. 장점은 app.use를 통해 HTML코드 등을 넣고 수정하면, 서버를 재실행 시키지 않아도 수정된 내용이 반영되는 장점이 있다. 


2) 하지만, <li>등 같은 것을 엄청 많이 넣어야할 때는 일일히 다 넣기가 힘들다, 수작업으로 노가다 뛰어야한다;


4. app.use를 제외한 나머지는 dynamic으로 보면 된다. dynamic의 단점은 수정될 때 마다 서버를 재실행시켜야한다.


   이걸로하면 html문서에서도 3-2)번 같은 사항을 for문을 써서 보완해도 된다.


    그런데, 지져분 해보이겠지. 이런 것을 보완하기 위해서 나온 것이 Express 템플릿이다.



app.get('/route', function(req, res){
res.send('hello Router, <img src="/route.jpg">');
});

app.get('/dynamic', function(req, res){
//이런식으로 지져분 해보임.
var output = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="main.js"></script>
</head>
<body>
hello. fucking guys.
</body>
</html>`
res.send(output);
});

app.get('/login',function(req,res){ //get을 라우터라고 부르고, 이기능을 라우팅이라고함. "길을찾는다의 의미"
res.send('로그인 먼저 하세요');
});

app.listen(3000, function(){
console.log('연결완료 3000포트!');
}); //포트지정



템플릿 엔진


왜쓰냐?? Express에서 html파일하나하나 컨트롤하기가 쉽지가 않아서 씀.


종류가 많다. jade, pug, Ejs, handlebars 등등...


jade는 pug로 바뀌었다.


템플릿 엔진은 그럼 어떻게 사용하냐??


마찬가지로 환경설정을 먼저 해줘야한다.


app.set('view engine', 'pug'); //템플릿 엔진 쓰기 위한 설정
app.set('views', './views'); //기본값이 이걸로 설정되어있음.
//디렉토리 만들어 줘야함. 디렉토리 이름을 다른 것으로 변경하고 싶으면
// ./views를 생성된 디렉토리 이름으로 변경해주면 됨.


공식 api에도 있으니 참고하시면 된다.


디렉토리를 만들어줘야함. 나는 views 폴더를 만들고 그안에 temp.pug파일을 만들었음.


템플릿은 들여쓰기가 중요하다. 들여쓰기로 html코드의 위치를 식별한다.


html
head
body
h1 hello pug!
ul
-for(var i=0; i<5;i++) //자바스크립트 제어하기 위한 문법은 앞에 - 를 붙여주면 된다.
li nice
div= time // = 이거는 변수표시이다. div에 시간을 넣고 싶다. 그러면 div= time(변수)를 지정 후
Express에서 time이라는 변수의 값을 랜더링하게끔 해주면 된다.


디렉토리 만든 후에. get방식으로 /template 주소를 입력하면 html을 불러오게 함.(렌더링)


app.get('/template', function(req, res){
res.render('temp',{time:Date()}); // html파일을 랜더링 시키는 것임.
//render부분에 {}객체를 만들고 아까 time에 시간이 나오게 끔하려면, {time : date()}를 해주면 시간이 나온다.
//추가로 변수 넣고 싶으면 {time:date(), title = "Pug"} 이런식으로 작성해주면 된다.
});



반응형

'프로그래밍 > NodeJS' 카테고리의 다른 글

7.[Routing] 처리하기.  (0) 2019.06.09
6. [MYSQL 연동]하기.  (0) 2019.06.09
4. Node.js 프레임워크 종류별 장단점.  (0) 2019.04.29
2. NPM이란?  (0) 2019.03.24
1. Node JS 시작 및 서버의 원리  (0) 2019.03.21
'프로그래밍/NodeJS' Related Articles more
Comments