Node.js 템플릿 엔진은 무엇인가??


템플릿 엔진을 통해 짧은 코드로 HTML을 만들어 낼 수 있다.


템플릿 엔진을 사용하기위해서는 설치해서 Express와 연력해서 사용해야한다.



jade 템플릿 엔진 사용

npm install jade --save
var express = require('express');
var app = express();

// 템플릿 엔진 세팅하기
app.set('view engine', 'jade');
//  템플릿 엔진 디렉토리 설정하기 (템플릿을 ./views에 넣는다. )(생략해도 가능하다)
app.set('views','./views');
// 라우트 설정하기, 템플릿 경로를 통해 들어온사람에게 temp라는 템플릿파일(jade)(./views)를 랜더링(응답) 해서 보여준다.
app.get('/template', function(req,res){
res.render('temp'):
});

app.use(express.static('public'));  
app.get('/', function(req, res){
res.send('Hello homepage');
});

app.get('/dynamic', function(req,res){
var lis = ' ' ;
for (var i=0; i<5; i++){
 lis = lis + '<li>coding</li>;
}
var time = Date();
var output = `
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      Hello, Dynamic!
<ul>
      ${lis}     
          </ul>
     ${time}   
      </body>
      </html>`
res.send('output')
});

app get('/login', function(req,res){
res.send('Login');
});
app.listen(4170, function(){
console.log('Connected 4170 prot!');
});

cf.) 동적인 node의 소스 내용이 바뀌었을때 자동으로 재실행하게 해준다. 

npm에서 supervisor를 검색 --> npm install supervisor -g를 사용해 전역적으로 설치한다. 

supervisor 명령어를 통해 node 를 실행하면 자동으로 재실행한다. 



jade 사용할때 들여쓰기 하기 

+ jade에 변수로 넣어서 사용하기 

html
head
body

↑위와같이 들여쓰기로도 가능하지만...

-------------------------------------

소스코드 express(); 부분 다음으로
app.locals.pretty = true;
추가하면 잘 구분해준다. 

html
head
body
h1 Hello Jade
ul
-for(var i=0; i<5; i++)  // (-)사용하기
li coding
div= time                       // 오류난다. 변수의 값을 바깥에서 전해주어야한다. 
=========================================================
: app.get('/template', function(req,res){
res.render('temp', {time:Date()}    //render에 time을 새로 정의해서 사용한다.
});

--------------------------------------------------------------------------------------------------


'WEB (Feat.FOO) > WEB 제작(Node.js)' 카테고리의 다른 글

12. Node.js. Express-POST방식을 통한 정보 전달  (0) 2017.01.07
11. Node.js Express-URL을 통한 정보 전달 <query string>  (0) 2017.01.07
9. Node.js Express 적용하기(1)  (0) 2017.01.07
8. Node.js Express 적용해보기  (0) 2017.01.07
7. Node.js에서의 동기와 비동기  (1) 2017.01.07

Node.js 에서 정적인 파일을 Express 를 통해 적용해보기


기존에 사용했던 코드에 추가시킨다.

doc : http://expressjs.com/ko/starter/static-files.html

var express = require('express');
var app = express();

// 추가 : 정적인 파일을 위치시키고 싶은 디렉토리를 지정
app.use(express.static('public'));  

app.get('/', function(req, res){
res.send('Hello homepage');
});
app get('/login', function(req,res){
res.send('Login');
});
app.listen(4170, function(){
console.log('Connected 4170 prot!');
});


Express 를 통해 웹페이지를 정적과 동적으로 표현하기

정적이다 : 한번만 만들면 언제나 똑같은 모습인 HTML을 만들겠다. 

public 디렉토리에 HTML파일을 넣는 것이다. -> 사용자가 접근했을때 위에서 추가한 코드에 의해서 pubilc 디렉토리에서 파일을 찾는다. 


public 디렉토리에서 static.html이라는 HTML문서를 만들고 주소/static이라는 것을 하면

정적인 파일은 내용을 수정하면 바로 적용시킬 수 있다. 

var express = require('express');
var app = express();

app.use(express.static('public'));  
app.get('/', function(req, res){
res.send('Hello homepage');
});

// 추가 get으로 것은 정적인 것과 다르게 서버를 껐다가 다시 켜야지 적용된다.
app.get('/dynamic', function(req,res){
var output = `<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      Hello, Dynamic!
  </body>
</html>`
res.send('output')
});

app get('/login', function(req,res){
res.send('Login');
});
app.listen(4170, function(){
console.log('Connected 4170 prot!');
});


그럼 정적인 것이 좋은데 왜 동적인 것을 사용하나??

정적인 HTML과 다르게 프로그래밍적(동적)으로 코드를 짤 수 있다. 

(순수 HTML은 현재 시간을 표시하는 능력 이미 화면에 표시된 것을 동적으로 바꾸는 것이 어럽다.)

var express = require('express');
var app = express();

app.use(express.static('public'));  
app.get('/', function(req, res){
res.send('Hello homepage');
});

app.get('/dynamic', function(req,res){
// 동적으로 프로그래밍 구현 할 수 있다. 
var lis = ' ' ;
for (var i=0; i<5; i++){
 lis = lis + '<li>coding</li>;
}
// 시간 표현해보기 
var time = Date();
var output = `
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      Hello, Dynamic!
<ul>
      ${lis}     // 반복 추가 ${}를 통해 변수 사용가능 
          </ul>
     ${time}   // 현재시간추가
      </body>
      </html>`
res.send('output')
});

app get('/login', function(req,res){
res.send('Login');
});
app.listen(4170, function(){
console.log('Connected 4170 prot!');
});



'WEB (Feat.FOO) > WEB 제작(Node.js)' 카테고리의 다른 글

11. Node.js Express-URL을 통한 정보 전달 <query string>  (0) 2017.01.07
10. Node.js Express 적용하기 : 템플릿 엔진 (jade)  (0) 2017.01.07
8. Node.js Express 적용해보기  (0) 2017.01.07
7. Node.js에서의 동기와 비동기  (1) 2017.01.07
6. callback 함수, 콜백함수  (0) 2017.01.07

왜 Node.js에 Express라는 것을 적용해서 사용해야하나??


Node.js가 그 나름대로 엄청나게 편리하고 효율적이지만 

Node.js를 조금 더 효율적으로 더 좋게 사용하기 위해 만들어진 Framework를 사용해서 만들자.


Express : exprssjs.com


express 적용하는 과정 ↓

// 패키지 만들 경로 들어가서
npm init // json패키지 만들기
npm install express --save // express 패키지 다운

프로젝트 폴더에 파일(app.js)을 만들어서  웹페이지 서버 만들어 보기

var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('Hello homepage');
});
app get('/login', function(req,res){
res.send('Login');
});
app.listen(4170, function(){
console.log('Connected 4170 prot!');
});



'WEB (Feat.FOO) > WEB 제작(Node.js)' 카테고리의 다른 글

10. Node.js Express 적용하기 : 템플릿 엔진 (jade)  (0) 2017.01.07
9. Node.js Express 적용하기(1)  (0) 2017.01.07
7. Node.js에서의 동기와 비동기  (1) 2017.01.07
6. callback 함수, 콜백함수  (0) 2017.01.07
5. Node.js 모듈 사용하기, NPM 사용하기 + 에러  (0) 2017.01.06

+ Recent posts

티스토리툴바