생활코딩

Coding Everybody

App - 동적인 웹페이지 만들기

토픽 생활코딩 > WEB > WEB2 - Node.js

수업소개

동적인 웹 페이지를 생성하는 방법을 살펴봅니다.

 

 

 

강의

 

 

 

소스코드

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. 비전공자
    오후 11:25 2024-04-20
  2. 감사합니다! 해결했습니다
    대화보기
    • Sansol Park
      $title이 undefined로 나오는 이유는 본래의 코드에서 쿼리 파라미터 'id'의 값을 title에 할당하는 로직이 루트 URL('/') 또는 '/favicon.ico'인 경우에만 존재하기 때문입니다. 다른 URL인 경우에는 이 값이 undefined로 남아있게 됩니다.

      즉, 클라이언트가 '/?id=HTML', '/?id=CSS', '/?id=JavaScript'와 같은 URL로 요청을 보냈을 때, 이 요청을 처리하는 로직이 없기 때문에 title은 정의되지 않은 상태가 됩니다.

      따라서 이 문제를 해결하기 위해서는, URL이 루트나 '/favicon.ico'가 아닌 다른 URL인 경우에도 쿼리 파라미터 'id'의 값을 title에 할당하는 로직을 추가해야 합니다. 이를 통해 클라이언트가 보낸 요청 URL에 따라 title 값을 동적으로 변경할 수 있게 됩니다.

      GPT-4의 답변입니다.
      대화보기
      • Sansol Park
        코드를 보니, 클라이언트에서 보낸 요청의 URL을 파싱하는 부분에서 문제가 있어보입니다. Node.js에서는 url 모듈의 URL 클래스를 사용하여 URL을 파싱할 수 있습니다.

        그러나, 이 경우에는 _url 변수가 루트 URL('/') 또는 '/favicon.ico'가 아닐 때 쿼리 파라미터 'id'의 값을 가져오는 로직이 없는 것으로 보입니다.

        이 문제를 해결하기 위해선, if문을 추가하여 URL이 루트나 '/favicon.ico'가 아닌 다른 URL인 경우에도 title 값을 정의하도록 수정해야 합니다.

        아래는 수정한 코드입니다:

        var app = http.createServer(function(request,response){
        var _url = request.url;
        var queryData = new URL('http://localhost:5000' + _url).searchParams;
        var title=queryData.get('id');

        if(_url == '/'){
        title='Welcome';
        } else if (_url == '/favicon.ico'){
        response.writeHead(404);
        response.end();
        return;
        } else {
        title = queryData.get('id');
        }
        response.writeHead(200);
        ...
        });

        이렇게 수정하면, URL이 루트나 '/favicon.ico'가 아닌 다른 URL인 경우에도 쿼리 파라미터 'id'의 값을 title로 설정합니다. 이렇게 하면 'HTML', 'CSS', 'JavaScript' 링크를 클했을 때 각각의 문자열이 title로 설정되어야 합니다.

        GPT-4의 답변입니다.
        대화보기
        • 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:5000' + _url).searchParams;
          var title=queryData.get('id');

          if(_url == '/'){
          title='Welcome';
          }
          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="/">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>
          `;
          //console.log(__dirname + url);
          response.end(template);

          });
          app.listen(5000); 이렇게 코드를 짰는데 html,css,javascript 텍스트를 눌렀을때 ${title}칸에 해당되는 부분이 undefined라고 뜨네요..
        • 김철흥
          2024.01.10
          천천히 곱씹으면서 이해완료!
        • 23/12/16
        • Hoon Ko
          20231016
        • carpediem
          23.09.03 완료!
        • 어흥
          23.06.28.
        • 고경록
          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 어려워보이긴 했는데 정말 어렵네요..
                  • 좋은 강의 너무너무 감사합니다!!