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. 김나다
    정말 재밌어요 ㅠㅠㅠ 역시 이고잉님!
  2. 초보자
    부끄럽네요. 강의중에 말씀하셨는데 제가 못들었네요... 죄송합니다. ㅠㅠ
    대화보기
    • 초보자
      아 차이를 알아냈습니다. 혹시나 저 html코드가 저처럼 안되는 분들은 작은 따옴표가 아니라
      키보드 1옆의 ` 문자를 쳐보세요. 이 문자는 억음 부호라고 한답니다. 프랑스어나 포르투갈어에 쓰인다네요!
      이걸 쓰니까 html코드가 문제 없이 들어갑니다. 작은따옴표('')로 쓰시면 안되요!
    • 초보자
      저만 저 변수에다가 1.html코드 넣는게 오류나나요? 계속 안되는데......
    • 고스트프리
      여기까지 성공했네요... 여러번보니까 이해가네요... 감사합니다.
    • 삼고잉
      잘 읽었습니다
    • metallsk
      Wow~!!
      항상 재미있고 유익한 강의 잘 듣고 있습니다.
    • 이성준
      ol 을 ul을 바꾸고 한번에 바뀔수 있다는것 알고나서
      "오~~~~~" 하면서 감탄했는데 곧바로 이고잉님이
      "감동하셔야 해요 감동하지 못했다는건 이해를 못했다는거고..."
      이렇게 말씀하시는데 왠지 뿌듯하네요 ㅎㅎ
    • 최성흠
      감사합니당
    • 감사합니다.
    • Seo Yun Seok Tudoistube
      var queryData = url.parse(_url, true).query; 에서 소스에서 사용한 변수를 가져올 수 있는거네요.

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