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 pathname = url.parse(_url, true).pathname;
    if(pathname === '/'){
      if(queryData.id === undefined){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          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>${description}</p>
          </body>
          </html>
          `;
          response.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          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>${description}</p>
          </body>
          </html>
          `;
          response.writeHead(200);
          response.end(template);
        });
      }
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
  1. 전해성
    21.09.13 완료
  2. 졸작완성하자
    210907 완료
  3. 고영히
    0823 완료
  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 = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;
    var title = queryData.id;

    if(pathname === '/'){
    fs.readFile(`data/${title}`, 'utf8', function(err, description){

    if(title === undefined){

    title = 'Welcome';
    description = 'Hello, Node.js';

    }

    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>${description}</p>
    </body>
    </html>
    `;
    response.writeHead(200);
    response.end(template);
    });

    } else {
    response.writeHead(404);
    response.end('Not found');
    }
    });
    app.listen(3000);
  5. 현철훈
    var fs = require('fs');
    var url = require('url');
    var express = require('express');
    var app = express();

    app.use(express.static('.'));
    app.get('/', function (request, response) {
    var _url = request.url;
    var pathname = url.parse(_url,true).pathname;

    if(pathname === '/'){
    if(request.query.id === undefined){
    var title = 'Welcome'
    var description = 'Hello, node.js'
    var template = makeTemplate(title, description);
    response.writeHead(200);
    response.end(template);
    } else {
    fs.readFile(`data/${request.query.id}`, 'utf8', function(err, description){
    var title = request.query.id;
    var template = makeTemplate(title, description);
    response.writeHead(200);
    response.end(template);
    });
    }
    } else {
    response.writeHead(404);
    response.end('PAGE NOT FOUND !');
    }
    });

    app.listen(3000);

    function makeTemplate(title, description){
    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>${description}</p>
    </body>
    </html>
    `;
    return template;
    }
  6. 승뇽뇽
    ㅇㄹ
  7. 이상하게저는 undefined 로 안뜨고 null표기되는데 이유가 따로 있을까요?..

    if(queryData.id === undefined) 이부분을
    if(queryData.id === null) 로 수정하니깐 되긴하는데..
  8. 박사장
    21 07 28 완료!
  9. labis98
    20210721 completed!
  10. 2021.07.17
  11. 정정해주시는 센스...
  12. 1분쯤에 반복문이 아니라 조건문을 말씀하신것같은데 흠칫했네요 ㅋㅋㅎ
  13. warmpeace
    완료~
  14. Jeong Il Haan
    20210415
  15. kujern
    걍 skip해야할 듯.
  16. byoonn
    완료
  17. !queryData.id로 해도 되네요
  18. thebluerat
    휴휴
  19. chimhyangmoo
    21.02.18
  20. jeisyoon
    2021.02.07 App - 홈 페이지 구현 완료
    점점 어려워 지내요 ~~~
  21. 마아앙
    2021.01.31
  22. hanel_
    21.2.1 2월달과 함께 시작 ~
  23. 임찬혁
    완료
  24. 뭄수
    완료
  25. ohhigo
    21/1/22
  26. wnstjd9701
    2021-01-18
  27. 2021.01.04 완료!
  28. 손민철
    20/12/29 완료
  29. 생활둘기
    2020 12 25
  30. kkn1125
    20.12.21 완료~!
  31. 이윤재
    20201123완료
  32. 2020.11.03.TUE.
  33. ㅇㄹ
  34. 콜라
    20201014 완료
  35. Yong Hyun Lee
    완료 201001
  36. 윤병록
    20.09.24
  37. CH Yim
    2020.09.13
  38. vampa
    2020.09.09
  39. OQ the YOUNG
    2020.09.08
  40. CodingChan
    2020. 09. 06
  41. 코딩조아
    20.08.05
  42. 뚜따띠또따
    20/07/31 완료!
  43. 누누
    2020.07.31 완료
  44. 코딩하는렌즈쟁이
    2020-07-25 (토)
    완료!
  45. Jenny Song
    24th.JULY.2020 완료
  46. 리다
    20200713
  47. 불스택
    20.07.10 완료
    감사합니다 !
  48. 영호팍
    오늘도! 출석!
  49. Amousk
    좋은강의 감사합니다.
  50. hoya
    2020.06.15
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기