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. 리다
    20200629 완료!
  2. Amousk
    좋은 영상 감사합니다.
  3. 이소담
    6월14일 17시 3분... 갈길이 멉니다 좋은강의감사해요~!
  4. hoya
    2020.06.11
  5. 사아
    완료!!

    그런데 HTML, CSS, JavaScript 처럼 index.html 본문도 불러오고 싶은데
    if문에 _url = '/' 된것을 '/?id=index' 로 바꾸지 않고 불러오는 방법이 있나요?
    →'App - 홈페이지 구현' 현' 강의에서 알려주시네요!
  6. 김보미
    2020.06.03 완료
  7. 김진수
    완료
  8. 바다의왕자
    완료
  9. 김재익
    완료
  10. Katherine Roh
    완료 :)
  11. 완료
  12. Eunsung Shin
    완료
  13. 알로
    완료
  14. 알콜러버
    2020/03/25 ~여기까지 완료
  15. 준바이
    재미있습니다 ~ ㅎㅎ
  16. CarryKim
    감사합니다^^ 오예~
  17. 오세광
    완료!
  18. 20.03.08 완료
  19. eddylee123456
    복습
  20. eddylee123456
    완료
  21. Gritter
    첫 강의에는 모든 걸 다 이해하려 하지 않고,
    코드를 따라 적으면서 서버와 브라우저 간에 통신에 감탄하며 수업 듣겠습니다.
  22. ㅇㅁ
    변경 사항에 response.end(queryData.id); 이거 빼야되네요.
    이거 땜에 html이 출력이 안되네요.
  23. 스티븐잡숴
    완료
  24. ㅇㅇ
    감사합니다ㅋㅋ 배우고나서 까먹고 왜안돼지 하고 있었네요
    대화보기
    • anseofod
      완료
    • 임은정
      완료오오오옹
    • JT_brand
      완료
    • 아이랑디어
      개인적으로 너무 소름돋는 강의였어요 머리속에서 구현만하던것이 이렇게 node.js로 가능하다니 정말 대박입니다!!! 약간 신대륙을 발견한 기분이네요
    • 2019.12.6 완료
    • 파이어뱃
      2019_12_05 complete
    • 푸른그대와휴
      아직 개념이 덜 잡혀서 그런 걸까요.
      Ajax 공부 뒤에 봐서 그런지, 같은 거구나~ 하고 생각했었는데,
      검색해보니 node js에서 Ajax를 이용하는 법 같은 것들이 나오니
      조금 혼란스럽네요. 물론 수업은 최고입니다. ㅎㅎ
    • 잔디심자기기
      23일 완료쓰
    • 송영범
      왜 저는 똑같이 해도 뜨지 않는걸까요
    • 접대탁구
      이미지 엑박이 뜹니다.
      서버에 올린다는게 무엇인가요?

      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 넣으니 잘 보이네요.
              대화보기
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기