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. 오셔
    var template 시작과 끝에 ` 로 되어있는지 확인해보세요
    대화보기
    • 원보이
      질문사항이 있어서 글 올려봅니다.
      변수 template로 지정한 부분에 ${title} 부분에
      대한 동작이 전혀 이루어 지지 않고,
      웹페이지에서 정적인 값으로 '${title}'
      이대로 노출되고 있습니다.

      해당 강좌의 내용 시청하고 동일하게 진행한 것 같은데,
      혹, 저와 같은 경험 있으신 분들 도움 좀 구하겠습니다.
    • 허공
      저도 이미지 액박 떠서 이미지 파일을 제 서버에 올려놓고 URL 넣으니 잘 보이네요.
      대화보기
      • 허공
        190510 감사합니다.
      • LEMILE
        저기서 coding.jpg파일 어떻게 보이게 하는지 아시는 분 있나요?
        coding.jpg파일을 data폴더에 옮겨 넣어도 안보이네요.
      • 이루
        완료
      • jennypark
        check!
      • 민찬아빠
        감사합니다~
      • 통신 MDP 좋아 ^_^
        완료 ^__________________________________^
      • 자유로움
        완료
      • supernet
        완료
      • 도토리묵
        완료
      • 호두
        고맙습니다.
      • 시작이반
        html 삽입하는 템플릿에 css를 불러 오고 싶은데, 어떻게 검색을 해서 공부하면 될까요?? <link~~/ 템플릿 변수 안에는 html만 인식하네요~

        이렇게 좋은 강의를 해 주셔서 항상 감사합니다.~~~
      • 권문수
        감사합니다^^ 어느정도 이해가 되었습니다.
        C나 자바만 배웠다가 자바스크립트와 node.js를 배우니 뭔가 새롭네요.
      • 나마코엘
        내용도 동적으로 만들러 갑시다.
      • LuiGee
        HTML,CSS,JavaScript에서 배운걸로 만든 페이지에서 고생했던 일들이 지금 여기서 배우는 지식으로 해결될 실마리가 눈에 보이니까 굳이 강조안하셔도 절로 감탄이 나오고 감동을 받게 되는 것 같습니다
      • 소금돌
        어려워요. ㅜㅜ
      • waitingjesus@snu.ac.kr
        감동받았습니다. ㅎㅎㅎㅎㅎㅎㅎㅎ
      • Yeabbi
        완료
      • 카렌 에델 웅 완료
      • jo_onc
        와 정말 배우고 싶던 node.js를 이렇게 이해하기 쉽게 강의해주시네요!
        감사합니다!
        응원합니다!
      • 줍줍
        접속주소는 아래와 같이 할 수 도있습니다/
        http://127.0.0.1:3000/
      • 이창현
        오!!! 감사합니다. 여태 왜그런가했는데
        대화보기
        • 김나다
          정말 재밌어요 ㅠㅠㅠ 역시 이고잉님!
        • 초보자
          부끄럽네요. 강의중에 말씀하셨는데 제가 못들었네요... 죄송합니다. ㅠㅠ
          대화보기
          • 초보자
            아 차이를 알아냈습니다. 혹시나 저 html코드가 저처럼 안되는 분들은 작은 따옴표가 아니라
            키보드 1옆의 ` 문자를 쳐보세요. 이 문자는 억음 부호라고 한답니다. 프랑스어나 포르투갈어에 쓰인다네요!
            이걸 쓰니까 html코드가 문제 없이 들어갑니다. 작은따옴표('')로 쓰시면 안되요!
          • 초보자
            저만 저 변수에다가 1.html코드 넣는게 오류나나요? 계속 안되는데......
          • 고스트프리
            여기까지 성공했네요... 여러번보니까 이해가네요... 감사합니다.
          • 삼고잉
            잘 읽었습니다
          • metallsk
            Wow~!!
            항상 재미있고 유익한 강의 잘 듣고 있습니다.
          • 이성준
            ol 을 ul을 바꾸고 한번에 바뀔수 있다는것 알고나서
            "오~~~~~" 하면서 감탄했는데 곧바로 이고잉님이
            "감동하셔야 해요 감동하지 못했다는건 이해를 못했다는거고..."
            이렇게 말씀하시는데 왠지 뿌듯하네요 ㅎㅎ
          • 최성흠
            감사합니당
          • moon
            감사합니다.
          • Seo Yun Seok Tudoistube
            var queryData = url.parse(_url, true).query; 에서 소스에서 사용한 변수를 가져올 수 있는거네요.

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