Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

SYDev

[Node.js] 6. Not found, 홈페이지 구현 본문

대딩코딩/웹개발 스터디

[Node.js] 6. Not found, 홈페이지 구현

시데브 2023. 11. 16. 20:33
해당 게시물은 유튜브 생활코딩 "Node.js" 강의 영상을 참고했습니다.
(https://www.youtube.com/watch?v=3RS_A87IAPA&list=PLuHgQVnccGMA9QQX5wqj6ThK7t2tsGxjm&index=1)

 

 

Not found 구현

 이전 게시물에서의 main.js에 

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

 

해당 문장을 입력하고 http://localhost:3000/?id=CSS에 접속하면 아래와 같이 출력

 

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

 

여기서 pathname(query string을 제외한 path)을 가져오려면

var pathname = url.parse(_url, true).pathname;

 

이후 pathname과 if문을 이용하여 잘못 접속한 경우에 not found를 표시하도록 다음과 같이 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
    var title = queryData.id;

    if(pathname === '/') {
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description) {
          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.writeHead(200);
          response.end(template);
        });
    } else {
      response.writeHead(404);
      response.end('Not found')
    }
});
app.listen(3000);

 

 

 

홈페이지 구현

현재 http://localhost:3000/로 접속하면 구현이 덜 되어있다. 

 

 

queryData.id가 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(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>  
              <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.writeHead(200);
            response.end(template);
          });
        } else {
          var title = queryData.id;
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description) {
            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.writeHead(200);
            response.end(template);
          });
        }
    } else {
      response.writeHead(404);
      response.end('Not found')
    }
});
app.listen(3000);

 

'대딩코딩 > 웹개발 스터디' 카테고리의 다른 글

[Node.js] 8. 글목록 출력  (0) 2023.11.16
[Node.js] 7. 배열과 반복  (0) 2023.11.16
[Node.js] 5. boolean -> 콘솔에서의 입력값  (1) 2023.11.11
[Node.js] 4. 파일을 이용해 본문 구현  (0) 2023.11.11
[Node.js] 3. 동적인 웹페이지 만들기  (0) 2023.11.10
'대딩코딩/웹개발 스터디' Related Articles more