제작-홈페이지 구현

NodeJS/생활코딩

제작-홈페이지 구현

kyeongjun-dev 2020. 9. 9. 11:16

메인 페이지(루트)

HTML, CSS, JavaScript는 잘 동작하지만, WEB을 눌렀을 때(localhost/)는 아래와 같이 내용이 없다

path로 구분

이전까지는 pathname으로 HTML, CSS, JavaScrip를 구분하였는데, 루트 디렉토리는 pathname으로 구분할 수 없다.(뒤에 query string이 붙지 않기 때문)

HTML로 접속 시 url 정보

Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: '?id=HTML',
  query: [Object: null prototype] { id: 'HTML' },
  pathname: '/',
  path: '/?id=HTML',
  href: '/?id=HTML'
}

/로 접속 시 url 정보

Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: null,
  query: [Object: null prototype] {},
  pathname: '/',
  path: '/',
  href: '/'
}

pathname이 '/'로 동일한 것을 확인할 수 있다. 다른점이라면, HTML로 접속 시에 query안에 { id : 'HTML' }이 있는데, /로 접속했을 시에는 비어있다는 것이다.

console.log(url.parse(_url, true).query);

위의 코드의 결과(맨 위가 메인 페이지 접속)

[Object: null prototype] {}
[Object: null prototype] { id: 'HTML' }
[Object: null prototype] { id: 'HTML' }
[Object: null prototype] { id: 'CSS' }
[Object: null prototype] { id: 'JavaScript' }

비어있는걸 확인할 수 있다.

console.log(url.parse(_url, true).query.id); // url 값 확인
if (url.parse(_url, true).query.id === undefined) {
  console.log('성공!');
}

위의 소스코드로 비어있는 query의 id를 출력해보면 아래와 같이 undefined라고 출력된다.

undefined
성공!
CSS
HTML
JavaScript
JavaScript

조건문도 true가 되어 '성공!' 메시지가 출력되었다.

queryData가 'url.parse(_url, true).query'였으므로 queryData.id 값을 이용하여 조건문을 분기하도록 한다.

main.js

var http = require('http');
var fs = require('fs');
var url = require('url') // url 모듈을 사용한다

var app = http.createServer(function (request, response) {
  var _url = request.url;
  var queryData = url.parse(request.url, true).query;
  var pathname = url.parse(_url, true).pathname;
  
  //console.log(queryData.id); // 쿼리 스트링 값 확인
  console.log(url.parse(_url, true).query.id); // url 값 확인
  // if (_url == '/') {
  //   //_url = '\\index.html';
  //   title = 'Welcome';
  // }
  // if (_url == '/favicon.ico') {
  //   response.writeHead(404);
  //   response.end();
  //   return;
  // }


  //response.writeHead(200);

  // 루트 디렉토리 (/)로부터 존재하는 페이지를 요청하면 페이지 표시
  if (pathname === '/') {

      
      fs.readFile('data/' + queryData.id, 'utf8', function (err, description) {
        var title = queryData.id;
        if (queryData.id == undefined) { // 없는 값을 호출하려고 하면 javascript는 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>
          <ol>
            <li><a href="/?id=HTML">HTML</a></li>
            <li><a href="/?id=CSS">CSS</a></li>
            <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ol>
          <h2>${title}</h2>
          <p>
            ${description}
          </p>
        </body>
        </html>    
        `;

        //response.end(fs.readFileSync(__dirname + url));
        response.writeHead(200); // 200을 전송하면, 파일을 잘 전송했다고 하는 약속
        response.end(template);
      });
    

  } else { // 없는 페이지를 요청하면 404 에러
    response.writeHead(404);
    response.end('Not found');
  }
});
app.listen(80);

queryData.id가 undefined면 따로 페이지를 구성하여 클라이언트로 전송하도록 변경되었다. 접속 화면은 아래와 같다.

저작자표시 (새창열림)