node.js으로 crud 만들기 -2

piper ·2024년 4월 14일
node.js
0

Nodejs

목록 보기
1/9

쿼리와 관련해서 쿼리 아이디가 없을 때 (queryData.id === undefined) 이 경우는 루트페이지가 된다.
그리고 그 전에 pathname이 없을 때는 404 에러를 주는 페이지를 만드는 것을 실습해보았다. 

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) {
      var passage = "";

      fs.readFile(`data/${queryData.id}`, "utf8", function (err, data) {
        var title = "welcome";

        if (err) {
          passage = "hello node.js";
        } else {
          passage = "hello node.js";
        }
        var templete = `<!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>${passage}</p>
        </body>
        </html>
        `;
        response.writeHead(200);
        response.end(templete);
      });
    } else {
      var passage = "";
      var title = queryData.id;
      fs.readFile(`data/${queryData.id}`, "utf8", function (err, data) {
        if (err) {
          passage = "file read failed";
        } else {
          passage = data;
        }
        var templete = `<!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>${passage}</p>
        </body>
        </html>
        `;
        response.writeHead(200);
        response.end(templete);
      });
    }
  } else {
    response.writeHead(404);
    response.end("not found");
  }
});
app.listen(3000);

그리고 위의 코드에서는 data의 문서 파일이 늘어나면 

<li><a href="/?id=HTML">HTML</a></li>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>

이 부분의 주소를 만들어주고 수동으로 추가해주어야 했다.
따라서 파일목록을 알아내고 글목록을 출력해주는 법을 실습해보겠다.
일단 파일 목록을 읽어오는 코드이다. 콘솔에 찍어보면 배열형태로 저장되어 있는 것을 알 수 있다. 

var testFolder = "./data";
var fs = require("fs");

fs.readdir(testFolder, function (error, filelist) {
  console.log(filelist);
});

저 함수 안에 list를 list의 길이만큼 반복문을 돌려서
만들 수 있다. 

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.readdir("./data", function (err, filelist) {
        console.log(filelist);

        var passage = "hello node.js";
        var title = "welcome";
        var list = "<ul>";
        var i = 0;
        while (i < filelist.length) {
          list =
            list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
          i = i + 1;
        }
        list = list + "</ul>";

        var templete = `<!doctype html>
        <html>
        <head>
          <title>WEB1 - ${title}</title>
          <meta charset="utf-8">
        </head>
        <body>
          <h1><a href="/">WEB</a></h1>
         ${list}
          <h2>${title}</h2>
         <p>${passage}</p>
        </body>
        </html>
        `;
        response.writeHead(200);
        response.end(templete);
      });
    } else {
      fs.readdir("./data", function (error, filelist) {
        var passage = "";
        var title = queryData.id;
        var list = "<ul>";
        var i = 0;
        while (i < filelist.length) {
          list =
            list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
          i = i + 1;
        }
        list = list + "</ul>";
        fs.readFile(`data/${queryData.id}`, "utf8", function (err, data) {
          if (err) {
            passage = "file read failed";
          } else {
            passage = data;
          }
          var templete = `<!doctype html>
        <html>
        <head>
          <title>WEB1 - ${title}</title>
          <meta charset="utf-8">
        </head>
        <body>
          <h1><a href="/">WEB</a></h1>
          ${list}
          <h2>${title}</h2>
         <p>${passage}</p>
        </body>
        </html>
        `;
          response.writeHead(200);
          response.end(templete);
        });
      });
    }
  } else {
    response.writeHead(404);
    response.end("not found");
  }
});
app.listen(3000);

그런데 위의 코드를 보면 중복되는 부분이 너무 많아서 읽기가 힘들다. 중복되는 코드는
꼭 함수로 따로 빼서 만든다. 이 때 유의 할 점은 매개변수로 넣어주는 부분이다.
위의 코드에서 중복되는 부분은 templete을 만드는 부분과 dataList를 읽어드리는 부분이다.
각자 코드 위에 함수로 만들어주었다. 코드의 양이 줄어들고 가독성도 좋아졌다. 

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

function templeteHTML(title, list, body) {
  return `
    <!doctype html>
        <html>
        <head>
          <title>WEB1 - ${title}</title>
          <meta charset="utf-8">
        </head>
        <body>
          <h1><a href="/">WEB</a></h1>
         ${list}
         ${body}
        </body>
        </html>
    
    `;
}

function templateList(filelist) {
  var list = "<ul>";
  var i = 0;
  while (i < filelist.length) {
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i = i + 1;
  }
  list = list + "</ul>";
  return list;
}

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.readdir("./data", function (err, filelist) {
        console.log(filelist);

        var passage = "hello node.js";
        var title = "welcome";
        var list = templateList(filelist);

        var templete = templeteHTML(
          title,
          list,
          `<h2>${title}</h2> ${passage}`
        );
        response.writeHead(200);
        response.end(templete);
      });
    } else {
      fs.readdir("./data", function (error, filelist) {
        var passage = "";
        var title = queryData.id;
        var list = templateList(filelist);
        fs.readFile(`data/${queryData.id}`, "utf8", function (err, data) {
          if (err) {
            passage = "file read failed";
          } else {
            passage = data;
          }
          var templete = templeteHTML(
            title,
            list,
            `<h2>${title}</h2>${passage}`
          );
          response.writeHead(200);
          response.end(templete);
        });
      });
    }
  } else {
    response.writeHead(404);
    response.end("not found");
  }
});
app.listen(3000);

파일 읽어오기 동기와 비동기 

var fs = require('fs');

fs.readFileSync
console.log('A');
var result = fs.readFileSync('syntax/sample.txt', 'utf8');
console.log(result);
console.log('C');

//동기로 작동한다. (한줄 기다렸다가 한줄)
//A
//result
//C
console.log('A');
fs.readFile('syntax/sample.txt', 'utf8', function(err, result){
    console.log(result);
});
console.log('C');

//비동기로 작동한다. (한줄 , 시간걸리면 다음 줄, 완료되면 반환) 
//A
//C
//result
profile
piper
연습일지
다음 포스트

node.js으로 crud 만들기 -3

0개의 댓글