Server Side JavaScript

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. hanorange
    정말 재밌네요! 좋은 강의 감사합니다.
  2. mvc 강의가 생각난다!!!
    템플릿이 mvc기능을 하겠군!!
  3. 신입1
    감사합니다
  4. 헤르메스
    ${} 구문 문법은 영상 강의에서 이야기 된 ` ` 기호 내부에서 사용됩니다.

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

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

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

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