생활코딩

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 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. 조건문(url)에 따라 홈페이지를 다양하게 구현.
  2. 비전공자
    오전 12:16 2024-04-21
  3. Sansol Park
    맞아요. 강의 그대로 따라해도 오류가 날 때도 있는데, 강의대로 코드를 똑같이 쓰는 게 아닐 때는 더 어렵죠. ㅠㅠ

    그 심정 넘넘 공감합니다.
    대화보기
    • 와..항상 감사합니다 ㅜㅜ 이게 강의대로 코드를 똑같이 쓰는게 아니다보니 계속 에러가 나네요
      대화보기
      • Sansol Park
        Welcome과 Hello, Node.js가 null, undefined로 나오는 것은 fs.readFile 함수를 호출하는 조건문의 로직에서 발생하는 문제 같습니다. 코드를 살펴보면, queryData.get('id') 가 undefined일 때, 즉 쿼리 파라미터 id가 없을 때 환영 메시지를 보여주어야 하는데, 실제로는 파일을 읽으려 시도하고 있습니다.

        fs.readFile 함수는 파일 시스템에서 파일을 비동기적으로 읽을 때 사용하는데, 여기서 data/${queryData.get('id')} 경로를 사용하면 id값이 undefined일 때 data/undefined 경로를 읽으려 시도하게 됩니다. 이 경로에 파일이 없으니, null 또는 undefined가 반환되는 것입니다.

        아래 코드는 해당 부분을 수정한 예시입니다:

        var http = require('http');
        var fs = require('fs');

        var app = http.createServer(function(request,response){
        var _url = request.url;
        var urlObj = new URL('http://localhost:5000' + _url);
        var pathname = urlObj.pathname;

        if(pathname === '/'){
        if(!urlObj.searchParams.has('id')){
        // id 쿼리 파라미터가 없을 때
        var title = 'Welcome';
        var description = 'Hello, Node.js';
        // 생략된 템플릿 코드...
        response.writeHead(200);
        response.end(template);
        } else {
        // id 쿼리 파라미터가 있을 때 파일 읽기
        fs.readFile(`data/${urlObj.searchParams.get('id')}`, 'utf8', function(err, description){
        if(err){
        // 파일을 읽는 중 에러가 발생했을 때 처리
        response.writeHead(404);
        response.end('Not found');
        return;
        }
        var title = urlObj.searchParams.get('id');
        // 생략된 템플릿 코드...
        response.writeHead(200);
        response.end(template);
        });
        }
        } else {
        response.writeHead(404);
        response.end('Not found');
        }
        });

        app.listen(5000);

        위 코드에서는 id 쿼리 파라미터의 존재 여부를 체크하여, 없으면 환영 메시지를 보여주고, 있으면 해당 id에 해당하는 파일을 읽습니다. 파일 읽기에 실패했을 경우에는 404 에러를 반환하도록 처리하였습니다.
        대화보기
        • 답변 감사합니다. 그런데 홈페이지에서 Welcome과 Hello, Node.js가 아니라 null, undefined로 나오는건 어떤 이유일까요?
          대화보기
          • Sansol Park
            홈페이지에서 "Not found" 메시지가 계속 나타나는 이유는 pathname을 가져오는 방식에 문제가 있어 보입니다. new URL 객체를 만들 때 pathname을 별도의 search parameter로 가져오려 하셨는데, 이는 URL 객체의 구조와 맞지 않습니다. pathname은 URL 객체의 속성으로 직접 접근해야 합니다.

            아래는 수정된 코드 조각입니다:

            var http = require('http');
            var fs = require('fs');
            var url = require('url');

            var app = http.createServer(function(request,response){
            var _url = request.url;
            var urlObj = new URL('http://localhost:5000' + _url);
            var queryData = urlObj.searchParams;
            var pathname = urlObj.pathname; // 여기를 수정했습니다.

            if(pathname === '/'){ // 이 부분이 실행될 것입니다.
            // ... 나머지 코드 ...
            } else {
            response.writeHead(404);
            response.end('Not found');
            }
            });

            app.listen(5000);

            이제 pathname은 올바르게 처리되어 / 경로로 요청이 들어왔을 때 기대하는 대로 작동할 것입니다. 또한, queryData.get('id') 부분도 정상적으로 작동할 것입니다. 그러나 fs.readFile 내부에서 var title = queryData.id; 라고 사용하신 부분은 var title = queryData.get('id');로 수정해야 합니다. queryData는 URLSearchParams 객체이며, id 속성을 직접 접근할 수 없기 때문입니다.

            위 코드를 참고하여 수정하시면 홈페이지가 "Not found" 대신에 기대하는 페이지를 보여줄 것입니다.

            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 pathname= queryData.get('pathname');
              var title=queryData.get('id');


              if(pathname ==='/'){
              if(queryData.get('id')=== undefined){
              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.get('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');
              }

              //console.log(__dirname + url);


              });
              app.listen(5000); 홈페이지에서 계속 not found만 나오는데 왜그럴까요
            • 김철흥
              2024.01.10
              완료!
            • Hoon Ko
              20231016
            • carpediem
              23.09.03 완료!!
            • 어흥
              230702
            • BF_Lee
              23.06.28
            • Hojun Song
              22-04-14 12:27
            • 감자
              22.12.02 완료
            • 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이기때문에 동등연산자(==)를 사용하시면 똑같이 나올겁니다.

              후자는 더이상 사용하지 않는다고하네요
            • 당당
              2022.10.19
            • 뿔고래
              indefined : 아무것도 없다는 뜻.
            • MelonMusk
              08/16
            • i_am_es
              2022-08-07
            • 아캔두잇
              20220804 완료
            • 코딩러버
              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