Node.js

App - 동적인 웹페이지 만들기

수업소개

동적인 웹 페이지를 생성하는 방법을 살펴봅니다.

 

 

 

강의

 

 

 

소스코드

main.js

변경사항 

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var title = queryData.id;
    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    var template = `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ul>
        <li><a href="/?id=HTML">HTML</a></li>
        <li><a href="/?id=CSS">CSS</a></li>
        <li><a href="/?id=JavaScript">JavaScript</a></li>
      </ul>
      <h2>${title}</h2>
      <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
      <img src="coding.jpg" width="100%">
      </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
      </p>
    </body>
    </html>
    `;
    response.end(template);

});
app.listen(3000);

 

댓글

댓글 본문
작성자
비밀번호
  1. 이성준
    ol 을 ul을 바꾸고 한번에 바뀔수 있다는것 알고나서
    "오~~~~~" 하면서 감탄했는데 곧바로 이고잉님이
    "감동하셔야 해요 감동하지 못했다는건 이해를 못했다는거고..."
    이렇게 말씀하시는데 왠지 뿌듯하네요 ㅎㅎ
  2. 최성흠
    감사합니당
  3. moon
    감사합니다.
  4. Seo Yun Seok Tudoistube
    var queryData = url.parse(_url, true).query; 에서 소스에서 사용한 변수를 가져올 수 있는거네요.

    감사합니다^^
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기