생활코딩

Coding Everybody

코스 전체목록

닫기

Express-웹페이지를 표현하는 방법

여기서는 웹페이지를 정적으로 만드는 방법과 동적으로 만드는 방법의 장점과 단점을 살펴봅니다. 

app.js

var express = require('express');
var app = express();
app.use(express.static('public'));
app.get('/', function(req, res){
    res.send('Hello home page');;
});
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('/route', function(req, res){
    res.send('Hello Router, <img src="/route.png">')
})
app.get('/login', function(req, res){
    res.send('<h1>Login please</h1>');
});
app.listen(3000, function(){
    console.log('Conneted 3000 port!');
});

 

댓글

댓글 본문
  1. 굼벵이
    완료
  2. 이수하
    완료!
  3. 반사마
    180819완료!
  4. 이승우
    20180809 완료
  5. 0809 fin
  6. 김혜경
    6.06
  7. 라울
    감사합니다!
  8. HTML에서 script를 쓰는경우는 정적인건가요 동적인건가요?
  9. 박인호
    1-10
    수강완료.
    정적인 방법의 장점 - 수정후 바로 적용됨. (노드를 재실행 시킬 필요 없음)
    동적인 방법의 장점 - 프로그래밍적으로 제어가능
  10. 090922
    17.12.22완
    별것없었다.
  11. 내이름은이한샘
    잘봤습니다.!!!!
  12. 용녀
    터미널에서 실행시키면 ` 때문에 자꾸 오류나는데 무슨 이유죠??...ㅠㅠ
  13. 이성준
    정말잘봤습니다.
  14. 낄낄깔깔
    아 좋다 좋아!!! 감사합니다
  15. 오빠는다르다
    감사합니다~!!!!!!!
  16. 영재
    dynamic 부분은 새로고침을 해도 서버를 다시 켜야 업데이트 된다고 말씀하셨는데
    뒤에 Date Api를 쓰신 부분은 새로고침을 할때마다 즉각 최신화 되는 이유가 궁금합니다.

    시간이지나도 그저 time에들어가는 html코드가 바뀌었을 뿐이니까 리로드해도 그대로 여야 한다고 생각을 했는데...
  17. Seo Yun Seok Tudoistube
    오~ 마치 신문물을 첨 본 옛날 사람같은 기분이 들지만, 기분이 좋네요^^;;
    템플릿엔진이란, 정적인 것과 동적인 것의 장점을 합친걸 말하는거군요.
    감사합니다^_____^!!!
  18. hanorange
    정말 재밌네요! 좋은 강의 감사합니다.
  19. 1234
    mvc 강의가 생각난다!!!
    템플릿이 mvc기능을 하겠군!!
  20. 신입1
    감사합니다
  21. 헤르메스
    ${} 구문 문법은 영상 강의에서 이야기 된 ` ` 기호 내부에서 사용됩니다.

    최신 버전의 자바스크립트에 정의 된 표준 문법으로 문자열 내부에 변수를 포함하여
    처리할 수 있습니다. 저 기능은 이미 다른 언어에도 구현 되어 있어요.

    그리고 jQuery의 별칭(Alias, 줄여쓰는 기호)이 $이다 보니 jQuery와 같다고 생각하시는데...
    $는 변수이기에 어떤 값이든 임의로 복사 또는 참조할 수 있습니다. 실제 다른 라이브러리에서
    빈번하게 $를 많이 사용합니다.

    그런 이유로 $ 를 보고 '아 저건 jQuery네' 라고 생각하면 안되요.
    Angular 같은 프레임워크 모듈에서도 $http, $resource 등등
    $ 기호는 여기 저기에서 많이 사용 되거든요.

    결론은 ${} 구문과 jQuery $ 별칭 과는 충돌이 안 일어나요.
    ${} 구문은 $ 변수가 아닌 구문 자체라서 요.
  22. 김진영
    질문있습니다.
    아직 어떻게 사용하는지도 모르지만
    ${lis}, ${time} 여기서 사용된 $표시는 jquery랑 충돌이 없는건지요?
  23. 말씀넘나잘하시는것..★
  24. cicada
    개꿀잼..
  25. 오호
    웹서버에서 로그인 정보 입력창을 중앙으로 이동시키고 싶은데 어떻게하면 되나요?
  26. 웅쓰
    감사합니다!!
  27. 코코딩
    아주 그냥 찰찰찰!!
  28. ㅇㅅㅇ
    수업이 아주 그냥 찰지네요!
  29. sean
    express 소개하기전에도 이렇게 해주셨었는데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    jade 기대됩니당
  30. 원동인
    드라마 작가 같이 수업을 구성하시네요ㅋㅋㅋㅋㅋ정적인 것의 장단점, 동적인 것의 장단점 다 보고 이것을 버무린 환상적인 방법이 없을까? 바로 템플릿이라는것을 다음 수업에 다룹니다!ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 드라마 다음화를 찾게되는 시청자의 마음으로 다음 수업을 들으러 갑니다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
버전 관리
egoing@gmail.com
현재 버전
선택 버전
graphittie 자세히 보기