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. ohhigo
    21/1/22 ★★★★★
    재밌고 쉽게 이해됩니다. 감사합니다.
  2. mano
    2021-01-19
  3. Noah
    2020.12.29 완료!
  4. 이상운
    20/12/29완료
  5. 손민철
    20/12/29 완료
  6. 풀스택개발자
    2020 12 28
  7. 생활둘기
    2020 12 24
  8. kkn1125
    20.12.21 완료~!
  9. 옹옹
    재미있습니다
  10. 이윤재
    20201122완료
  11. 2020.11.03.TUE.
  12. 콜라
    20201014 완료
  13. 20201012
  14. Yong Hyun Lee
    완료 200930
  15. 윤병록
    20.09.23
  16. helloworld
    20.9.7
  17. CodingChan
    2020. 09. 05
  18. 커넥티드 허트
    완료
  19. 마준
    완료
  20. クレヨンしんちゃん
  21. 김혜린
    8월 5일 완료
  22. 코딩조아
    20.08.3
  23. 누누
    완료
  24. 뚜따띠또따
    20/07/30 완료!
  25. 코딩하는렌즈쟁이
    2020-07-23 (목)
    완료!
  26. Jenny Song
    23th.JULY.2020 완료
  27. 불스택
    20.07.09 완료
    감사합니다 !
  28. 리다
    20200629 완료!
  29. Amousk
    좋은 영상 감사합니다.
  30. 이소담
    6월14일 17시 3분... 갈길이 멉니다 좋은강의감사해요~!
  31. 2020.06.11
  32. 사아
    완료!!

    그런데 HTML, CSS, JavaScript 처럼 index.html 본문도 불러오고 싶은데
    if문에 _url = '/' 된것을 '/?id=index' 로 바꾸지 않고 불러오는 방법이 있나요?
    →'App - 홈페이지 구현' 현' 강의에서 알려주시네요!
  33. 김보미
    2020.06.03 완료
  34. 김진수
    완료
  35. 바다의왕자
    완료
  36. 김재익
    완료
  37. Katherine Roh
    완료 :)
  38. 완료
  39. Eunsung Shin
    완료
  40. 알로
    완료
  41. 알콜러버
    2020/03/25 ~여기까지 완료
  42. 준바이
    재미있습니다 ~ ㅎㅎ
  43. CarryKim
    감사합니다^^ 오예~
  44. 오세광
    완료!
  45. 20.03.08 완료
  46. eddylee123456
    복습
  47. eddylee123456
    완료
  48. Gritter
    첫 강의에는 모든 걸 다 이해하려 하지 않고,
    코드를 따라 적으면서 서버와 브라우저 간에 통신에 감탄하며 수업 듣겠습니다.
  49. ㅇㅁ
    변경 사항에 response.end(queryData.id); 이거 빼야되네요.
    이거 땜에 html이 출력이 안되네요.
  50. 스티븐잡숴
    완료
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기