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. 이성훈
    2022.06.28 App 홈페이지 구현 완료!
  2. fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
    이것을 왜 빼도 괜찮은지 잘 모르겠어요.. ${description}을 사용하려면 있어야 하는거 아닌가요?
  3. 농어
    저도 홈페이지의
    queryData.get(id'); 값이 null 이 나와서 undefine 대신 null 써서 해결했어요
    대화보기
    • 코지마 히데오 뺨 후릴 반바지
      와안료
    • ボロボロ
      해결하기는 했지만 저 처럼 타이틀이 undefined가 아니라 null로 나오시는 분 계신가요
    • 주재윤
      완료
    • 화려하게간다
      난 궁금한게 그냥 data폴더에 home이라고 파일을 하나 더 만들어서 다른 파일들이랑 같은 형식으로 연결시키면 코드 량이 더 줄 것 같은데 궂이 이렇게 하는 이유가 있는지?
    • 유니콘
      이 경우 홈에 들어간 정보가 파일에 저장되어 있는 것이 아니라서 그냥 file, querydata, template값만 설정하고 response했는데 혹시 홈에서 fs.readfile을 사용해야 하는 이유가 있나요?
    • 김관호
      21.11.23
    • 수강 완료후 복기하는데 시간을 3배로 썻네요 ㅋㅋ cmd에서 나오는 오류 원인 찾아보고 홈페이지에서 다른 키워드는 정상적으로 처리됬는데 web에 들어가면 튕겨져서 왜 그런가 했는데 대괄호 하나가 빠져있었네요 ㅋㅋ
      요즘 자기전에 2시간정도씩 들으면서 배우는 재미느끼고있습니다
    • 초딩 개발자
      2021/10/14
    • 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;
      }
    • 승뇽뇽
      ㅇㄹ
    • 이상하게저는 undefined 로 안뜨고 null표기되는데 이유가 따로 있을까요?..

      if(queryData.id === undefined) 이부분을
      if(queryData.id === null) 로 수정하니깐 되긴하는데..
    • 박사장
      21 07 28 완료!
    • labis98
      20210721 completed!
    • 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월달과 함께 시작 ~
    • 임찬혁
      완료
    • 뭄수
      완료
    • ohhigo
      21/1/22
    • wnstjd9701
      2021-01-18
    • Noah
      2021.01.04 완료!
    • 손민철
      20/12/29 완료
    • 생활둘기
      2020 12 25
    • kkn1125
      20.12.21 완료~!
    • 이윤재
      20201123완료
    • Sunny
      2020.11.03.TUE.
    • ㅇㄹ
    • 콜라
      20201014 완료
    • Yong Hyun Lee
      완료 201001
    • 윤병록
      20.09.24
    • CH Yim
      2020.09.13
    • vampa
      2020.09.09
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기