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. Hoon Ko
    20231016
  2. carpediem
    23.09.03 완료!!
  3. 어흥
    230702
  4. BF_Lee
    23.06.28
  5. Hojun Song
    22-04-14 12:27
  6. 감자
    22.12.02 완료
  7. average8294
    var queryData = new URL('http://localhost:3000' + _url).searchParams;
    var queryDataId = queryData.get('id') 를 사용하신분들은 null이 나올거고,

    var _queryData = url.parse(_url, true).query;
    var _queryDataId = _queryData.id 를 사용하신분들은 undefined가 나올겁니다

    null == undefined 는 true이기때문에 동등연산자(==)를 사용하시면 똑같이 나올겁니다.

    후자는 더이상 사용하지 않는다고하네요
  8. 당당
    2022.10.19
  9. 뿔고래
    indefined : 아무것도 없다는 뜻.
  10. MelonMusk
    08/16
  11. i_am_es
    2022-08-07
  12. 아캔두잇
    20220804 완료
  13. 코딩러버
    description 변수를 따로 지정해줘서 그렇습니다.
    var description = 'Hello, Node.js';
    이부분이요. Welcome 홈페이지이기 때문에 파일을 가져오는것이 아닌 고정되어있는
    정보이기 때문에 readFile은 필요가 없는것 같습니다 :)
    대화보기
    • 키다리아저씨
      220716 완
    • toonfac
      220714 오후 2시 12분 완료
    • 이성훈
      2022.06.28 App 홈페이지 구현 완료!
    • fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
      이것을 왜 빼도 괜찮은지 잘 모르겠어요.. ${description}을 사용하려면 있어야 하는거 아닌가요?
    • 농어
      저도 홈페이지의
      queryData.get(id'); 값이 null 이 나와서 undefine 대신 null 써서 해결했어요
      대화보기
      • 코지마 히데오 뺨 후릴 반바지
        와안료
      • ボロボロ
        해결하기는 했지만 저 처럼 타이틀이 undefined가 아니라 null로 나오시는 분 계신가요
      • 주재윤
        완료
      • 화려하게간다
        난 궁금한게 그냥 data폴더에 home이라고 파일을 하나 더 만들어서 다른 파일들이랑 같은 형식으로 연결시키면 코드 량이 더 줄 것 같은데 궂이 이렇게 하는 이유가 있는지?
      • 유니콘
        이 경우 홈에 들어간 정보가 파일에 저장되어 있는 것이 아니라서 그냥 file, querydata, template값만 설정하고 response했는데 혹시 홈에서 fs.readfile을 사용해야 하는 이유가 있나요?
      • 김관호
        21.11.23
      • Edis
        수강 완료후 복기하는데 시간을 3배로 썻네요 ㅋㅋ cmd에서 나오는 오류 원인 찾아보고 홈페이지에서 다른 키워드는 정상적으로 처리됬는데 web에 들어가면 튕겨져서 왜 그런가 했는데 대괄호 하나가 빠져있었네요 ㅋㅋ
        요즘 자기전에 2시간정도씩 들으면서 배우는 재미느끼고있습니다
      • 초딩 개발자
        2021/10/14
      • pdpd
        211004
      • 전해성
        21.09.13 완료
      • 졸작완성하자
        210907 완료
      • 고영히
        0823 완료
      • 코딩하는 배달이
        더 간단하게 해봤습니다!
        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);
      • 현철훈
        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;
        }
      • 승뇽뇽
        ㅇㄹ
      • 2봉
        이상하게저는 undefined 로 안뜨고 null표기되는데 이유가 따로 있을까요?..

        if(queryData.id === undefined) 이부분을
        if(queryData.id === null) 로 수정하니깐 되긴하는데..
      • 박사장
        21 07 28 완료!
      • labis98
        20210721 completed!
      • Duke
        2021.07.17
      • laqah
        정정해주시는 센스...
      • Xeros
        1분쯤에 반복문이 아니라 조건문을 말씀하신것같은데 흠칫했네요 ㅋㅋㅎ
      • warmpeace
        완료~
      • Jeong Il Haan
        20210415
      • kujern
        걍 skip해야할 듯.
      • byoonn
        완료
      • elph
        !queryData.id로 해도 되네요
      • thebluerat
        휴휴
      • chimhyangmoo
        21.02.18
      • jeisyoon
        2021.02.07 App - 홈 페이지 구현 완료
        점점 어려워 지내요 ~~~
      • 마아앙
        2021.01.31
      • hanel_
        21.2.1 2월달과 함께 시작 ~
      • 임찬혁
        완료
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기