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. Hoon Ko
    20231016
  2. carpediem
    23.09.03 완료!
  3. 어흥
    23.06.28.
  4. 고경록
    1.html 로 연결 되는게 아니라. 제목만 바뀌는 거에요.

    맨 처음에 Template 변수에 넣은 1.html 복사본이 화면에 뿌려진 상태에서 그 안에 있는 링크를 클릭하면 a href 에 적혀있는 값(ex, '/?id=html")을 불러와서 http://localhost......TML 로 이동하게 되고, 그러면 queryData.id 값이 "HTML" 되고, 이 값을 title 변수에 넣었으니 title = "HTML" 이 됩니다.

    최종적으로 Template Literal(달러 기호) 부분이 title 에 들어있는 값인 "HTML" 로 바뀌며
    제목 부분만 바뀌는 겁니다.
    대화보기
    • 리브
      26~28번 라인에서
      ?id=HTML 인데
      어떻게 저 코드만으로 1.html 로 연결이 되는건지 프로세스가 궁금합니다
      쿼리스트링을 따로 연결을 안했는데 어떻게 연결이 되는거죠?
    • 드가자
      main.js에 1.html을 복붙한다

      var template =`이곳에 1.html의 태그를 넣는다`;

      (queryData.id)가 페이지의 타이틀을 의미하므로

      var title=queryData.id;를 변수값에 넣어 페이지마다 타이틀을 변경할 수 있다

      본문에서 타이틀이 필요한 곳에 ${title}을 넣어준다

      마지막줄에서

      response.end(template);을 입력하여 var template 을 출력한다
    • 당당
      2022.10.15
    • 뿔고래
      쿼리 스트링을 사용해서 값을 받아들이고 쿼리스트링의 입력에 따라 nodejs는 문자열을 바꿔서 출력한다.
      이때 출력하는 문자열이 html코드라면 웹페이지는 html코드를 읽어서 그에 해당하는 웹페이지를 만들 것이다.
      신기하다.
    • Sukjoon Lee
      2022-08-11
    • i_am_es
      2022-08-05
    • 아캔두잇
      20220804 완료
    • 키다리아저씨
      220714 완
    • toonfac
      220714 오후 1시 52분 완료
    • LLLEE
      신기하네요. dynamic URL 훅으로만 써봤는데 이렇게 보니까 재밌네요. 좋은 강의 감사드립니다.
    • 시행인
      1:45 에서 ${quertData.id} 를 ${queryData.get('id')} 로 바꾸니 잘 뜨네요 :)
    • 화려하게간다
      ㅎㅇㅌ
      대화보기
      • 송기훈
        이걸 답을...! 감사합니다~
        대화보기
        • ボロボロ
          cho 님이 올려주신 코드에서

          <h1><a href="index.html">WEB</a></h1>

          이 부분을

          <h1><a href="/">WEB</a></h1>

          이렇게 바꿔주어야합니다

          그래야 if문이 실행되는 조건에 부합하게되는 것 같아요
          대화보기
          • chio
            20220302
          • 화려하게간다
            3회독 가즈아~
          • 송바래
            참신해서 URLsearch를 인터넷에 검색해 보니, 이해가 안가네요 ㅠㅠ
            눈에 보이는 차이가 있다면 이고잉님 코드는 /adas 이렇게 치면 undefined라고 뜨고
            초님이 대로 하면 null로 뜨는데 그 둘의 차이가 궁금합니다.
            대화보기
            • chohjender
              전 강의와 마찬가지로 url parse deprecated 가 반영되지 않아 강의대로하면 페이지 제목이 undifined로 표시됩니다
              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 = new URL('http://localhost:3000' + _url).searchParams;
              var title = queryData.get('id');
              console.log(queryData.get('id'));
              if(_url == '/'){
              url = '/index.html';
              }
              if(_url == '/favicon.ico'){
              response.writeHead(404);
              response.end();
              return;
              }
              response.writeHead(200);
              //웹페이지에 뭔가 띄우기
              var template = `<!doctype html>
              <html>
              <head>
              <title>WEB1 - ${title} </title>
              <meta charset="utf-8">
              </head>
              <body>
              <h1><a href="index.html">WEB</a></h1>
              <ol>
              <li><a href="/?id=HTML">HTML</a></li>
              <li><a href="/?id=CSS">CSS</a></li>
              <li><a href="/?id=JavaScript">JavaScript</a></li>
              </ol>
              <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>
              `;
              //console.log(__dirname + url);
              response.end(template);

              });
              app.listen(3000);
              이 코드로 실행하면 될겁니다!
            • 밍기
              2022-01-12 완료
            • 소설가
              2021-1-3 완료
              고맙습니다.
            • 김관호
              21.11.23
            • 일억개
              하나하나 성취하는 이 순간이 정말 너무 즐겁다.
            • 행달
              웹 1도 모르고 생활코딩 시작했는데 들을수록 너무 재밌습니다.!!감사!
            • 칸타타
              내용이 어렵다
            • 야옹스
              20211009 완료
            • 전해성
              21.09.12 완료
            • 초딩 개발자
              2021/09/11
            • 햄쮸맨
              잼따!
            • 고영히
              0823 완료 !
            • Kangmin Kim
              2021.8.21 완료
              소름이 돋네요 ㅎㅎ
            • 승뇽뇽
              클리어
            • 박사장
              21 07 28 시청 완료!
            • SeoulBoy0827
              url.parse 가 이제는 deprecated 되었다고 하네용... 찾아봤더니 new url(_url)로 바뀐거 같던데, 그래도 안돼서 최근에는 어떻게 바뀐건지 궁금합니다.. 혹시 아시는 분들 계실까요?(소스코드 올려주신 것도 구동은 됩니다. 다만 에디터에서 취소선이 쓰여있는게...)
            • labis98
              20210720 completed!
            • Duke
              2021.07.17
            • 지금 쓰는 기술들이 어떻게, 왜 나왔는지 천천히 음미하면서 생각해볼 수 있게 해주는 강의 최고네요 ㅋㅋ
              학부 전혀 관련없는 곳 나와서 나중에 관심생겨서 듣고 있는데 다른 곳에서 중구난방으로 듣다가, 완전 쌩 기초부터 차근차근 직접 코드 작성하면서 오류 튀어나오는거 줄여나가는 재미가 있네요.
            • warmpeace
              속이..시원헙니다!! ㅎㅎㅎ
            • 별거
              2021.05.12 와.. node.js 어려워보이긴 했는데 정말 어렵네요..
            • 좋은 강의 너무너무 감사합니다!!
            • Jeong Il Haan
              20210413
            • 자유를얻은도비
              정말 좋은 강의 감사합니다.. 이 강의가 없었더라면 저는 개발자의 꿈을 생각지지 못했을거에요. 다른 좋은 강의들도 많지만 생활코딩은 특히 정말 기초를 잡기에 최고의 강의라고 생각합니다!! 이렇게 좋은 강의 올려주셔서 너무나 감사합니다.!!!
            • kujern
              따라하기 힘듦. 재미없음.이해 안 됨.
            • koabc0999
              아따 재밌다
            • 허태민
              21.03.13
            • byoonn
              완료
            • 밀키
              2021.02.22 수강 완료
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기