프로그래밍/Nodejs

생활코딩 - Server Side JavaScript 4

seungdols 2016. 5. 10. 00:42

생활 코딩 Server Side Language - NodeJS

4강

정적 페이지 vs 동적 페이지

정적 페이지

  • 한 번 만들면, 계속 같은 내용을 담고 있음.
  • 파일을 수정해도 서버를 재시작 할 필요 없이 바로 반영 된다.
  • 코딩적인 방법으로 HTML코드를 동적으로 활용 할 수 없다.

동적 페이지

  • 만들 때마다 내용이 변경 됨.
  • JavaScript 코드내에서 HTML코드를 작성하는 것은 지저분하다.

이미지, css파일을 로딩 시킬 때는 Express 기본 미들웨어 함수인 static 사용

//default middleware function - static
app.use(express.static('public'));

static.html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    Hello, Static
    <ul>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
      <li>coding</li>
    </ul>
  </body>
</html>

app.js file

var express = require('express');

var app = express();
//default middleware function - static
app.use(express.static('public'));

app.get('/',function(req, res){
  res.send('Hello Express Home');
});
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('/girl', function(req, res){
  res.send('Hello Img, <img src="/IMG.jpg">');
});
app.get('/login', (req, res) => {
  res.send('Login page');
});
app.listen(3000, function(){
  console.log('Connected App listen on 3000 port');
});

정적 페이지 방식과 동적 페이지 방식 차이는 위의 경우에는 시간 출력 빼고 없다.
다만, 정적 페이지는 코딩적인 방법 사용 불가능. 시간 출력등 …

그래서!!!

템플릿이 필요하다.

설치를 해야 한다. 우리는 Jade를 쓸거다.
npm install jade --save

jade에서 사용되는 html 코드를 이쁘게 표현하기 위해서는 Express에서 설정이 필요하다.

app.locals.pretty = true;
//setting jade in express
app.set('view engine','jade');
//setting directory of jade files
app.set('views','./views');

node server 파일 변경시마다 서버를 재시작해야 하는데 이 supervisor는
watching 기능으로 파일 변경을 추적하여, 변경시 node 서버를 재시작 한다.

npm install supervisor -g


반응형