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. Sukjoon Lee
    2022-08-11
  2. i_am_es
    2022-08-05
  3. 아캔두잇
    20220804 완료
  4. 키다리아저씨
    220714 완
  5. toonfac
    220714 오후 1시 52분 완료
  6. 신기하네요. dynamic URL 훅으로만 써봤는데 이렇게 보니까 재밌네요. 좋은 강의 감사드립니다.
  7. 시행인
    1:45 에서 ${quertData.id} 를 ${queryData.get('id')} 로 바꾸니 잘 뜨네요 :)
  8. 화려하게간다
    ㅎㅇㅌ
    대화보기
    • 송기훈
      이걸 답을...! 감사합니다~
      대화보기
      • ボロボロ
        cho 님이 올려주신 코드에서

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

        이 부분을

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

        이렇게 바꿔주어야합니다

        그래야 if문이 실행되는 조건에 부합하게되는 것 같아요
        대화보기
        • 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 수강 완료
          • chimhyangmoo
            2021.02.18
          • jeisyoon
            2021.02.06 ~~ 재미 있네요 ~~ 완료
          • 마아앙
            2021.01.31
          • 임찬혁
            오늘도 오타와 대,소문자와 허우적 대다가 완료 !!
          • 뭄수
            완료
          • ohhigo
            21/1/22 ★★★★★
            재밌고 쉽게 이해됩니다. 감사합니다.
          • mano
            2021-01-19
          • Noah
            2020.12.29 완료!
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기