Node.js - 홈페이지 구현

홈페이지 구현

조건문을 활용해서 홈페이지를 표현하는 방법이 존재한다.

위의 웹의 본문의 WEB의 링크에는 아직 쿼리 스트링의 값이 정의가 되지 않아서 WEB 링크를 클릭하면 정의되지 않았다는 undefined가 변환되어버린다.

그래서 만약 쿼리 스트링 값이 정의되지 않으면 발동되는 조건문을 추가한다면 undefined 표시를 안뜨게 변환 할 수 있다.

↓

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 조건문으로 쿼리 데이터 값이 정의되어 있지않아 undefined라는 것이 실행되면
//true로서 조건문이 발동되게 하였다.
      if(queryData.id === undefined){
// true로서 if조건문이 발동되면 파일 읽기 코드를 이용하여 정의되지 않은 쿼리 데이터를
//description이라는 인자의 매개변수로 선언하여 undefined가 되었던 값을 ${}로 치환해주어 
//undrfined 뜨지 않도록 해주었다.
          var title = 'Hi';
          var description = 'jin seok!';
          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);
        
//만약 정의되어 있는 쿼리 데이터를 가지고 있으면 if 조건문은 false 이므로 아래의
//else 문이 발동되어 정상적인 쿼리 데이터 흐름을 가져간다.
      } 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);

이제 undefined는 뜨지 않고 if 조건문으로 설정해준 값이 등장한다.

'프로그래밍 개발 > NodeJs' 카테고리의 다른 글

Node.js - Node.js에서 동기와 비동기 (0)	2020.12.12
Node.js - 파일 목록 알아내기 (0)	2020.12.12
Node.js - 콘솔에서의 입력값 (0)	2020.12.05
Node.js - 파일 읽기 (0)	2020.12.05
Node.js - URL와 query string (0)	2020.12.05