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. 2019.12.6 완료
  2. 파이어뱃
    2019_12_05 complete
  3. 푸른그대와휴
    아직 개념이 덜 잡혀서 그런 걸까요.
    Ajax 공부 뒤에 봐서 그런지, 같은 거구나~ 하고 생각했었는데,
    검색해보니 node js에서 Ajax를 이용하는 법 같은 것들이 나오니
    조금 혼란스럽네요. 물론 수업은 최고입니다. ㅎㅎ
  4. 잔디심자기기
    23일 완료쓰
  5. 송영범
    왜 저는 똑같이 해도 뜨지 않는걸까요
  6. 접대탁구
    이미지 엑박이 뜹니다.
    서버에 올린다는게 무엇인가요?

    node 하면 서버가 올라간거 아닌가요?
    엑박이 떠서 질문드렸습니다.
    감사합니다.
    대화보기
    • 박창신
      수강완료
    • 부족하지만
      1.html를 불러오는게 아니라 template 변수에 작성하신 html에 title만 쿼리스트링값으로 들어가면서
      화면이 다르게 보이는거죠~
      대화보기
      • 쑤우
        수강완료. 감사합니다~
      • ㄱㅇㅇ
        완료!
      • 굼벵이
        완료
      • 따옴표가 아닌 ~ 과 같은 위치의 ` 로 하시면 되실거에요
        대화보기
        • var template = ' ';
          따옴표 안에 넣었는데 왜 오류가 나는걸까요...
        • 호잇
          저기 혹시 ?id= 여기 뒤에 HTML이라고 쓰시면 1.html 페이지가 불러와지는데 저기 id= 뒤에 어떤걸 보고 1.html파일이라는 것을 인식하고 1.html파일을 어떻게 불러오는건가요? id=뒤에 HTML이라고 쓰면 1.html이 불러와지는게 이해가 안가서 ㅠㅠ
        • CronEB
          재밌어요
        • 별강
          감동못받으면 화낼꺼야!! 같았어요 ㅎㅎ
        • YesterdayKite
          완료. 감사합니다.
        • Kwanghyun Lee
          감동 안 받으면 이해 못한 거라는 말에 빵터졌네요 ㅋㅋㅋㅋㅋㅋ
        • 코딩을시작
          완료 강의 잘듣고 있습니다~
        • 오셔
          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
              완료
            • karen
              카렌 에델 웅 완료
            • jo_onc
              와 정말 배우고 싶던 node.js를 이렇게 이해하기 쉽게 강의해주시네요!
              감사합니다!
              응원합니다!
            • 줍줍
              접속주소는 아래와 같이 할 수 도있습니다/
              http://127.0.0.1:3000/
            • 이창현
              오!!! 감사합니다. 여태 왜그런가했는데
              대화보기
              • 김나다
                정말 재밌어요 ㅠㅠㅠ 역시 이고잉님!
              • 초보자
                부끄럽네요. 강의중에 말씀하셨는데 제가 못들었네요... 죄송합니다. ㅠㅠ
                대화보기
                • 초보자
                  아 차이를 알아냈습니다. 혹시나 저 html코드가 저처럼 안되는 분들은 작은 따옴표가 아니라
                  키보드 1옆의 ` 문자를 쳐보세요. 이 문자는 억음 부호라고 한답니다. 프랑스어나 포르투갈어에 쓰인다네요!
                  이걸 쓰니까 html코드가 문제 없이 들어갑니다. 작은따옴표('')로 쓰시면 안되요!
                • 초보자
                  저만 저 변수에다가 1.html코드 넣는게 오류나나요? 계속 안되는데......
                • 고스트프리
                  여기까지 성공했네요... 여러번보니까 이해가네요... 감사합니다.
                • 삼고잉
                  잘 읽었습니다
                • metallsk
                  Wow~!!
                  항상 재미있고 유익한 강의 잘 듣고 있습니다.
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기