마카로닉스

1934 No

WEB2 - Node.js (생활코딩) -3 App & Node.js

2022-09-20 16:03:58 By 라이트 0 123 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	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

인프런 : https://www.inflearn.com/course/web2-node-js#

생활 코딩 : https://opentutorials.org/module/3549

소스 : https://github.com/braverokmc79/WEB2-Nodejs

App & Node.js

53.템플릿 기능 정리정돈하기

const http = require('http');
const fs = require('fs');
const url = require("url");
const qs = require("querystring");

const template = {


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

  list: function (filelist) {
    let menuList = "";
    filelist.forEach(item => {
      menuList += `<li><a href="/?id=${item}">${item}</a></li>`;
    })
    return menuList;
  },


  page: function commonPage(queryData, response, head, body) {
    const _this = this;

    fs.readFile(`../data/${queryData.id}`, 'utf-8', function (err, description) {
      let title = queryData.id;
      if (head === "main") {
        if (queryData.id === undefined) {
          title = "Welcome";
          description = "Hello, Node.js";
          body = `<a href="/create">create</a><h2>${title}</h2>${description}`;
        } else {
          body = `<a href="/create">create</a>&nbsp;&nbsp;&nbsp;
              <a href="/update?id=${title}">update</a>&nbsp;&nbsp;&nbsp;              
              <form method="post" action="/delete_proecess">
                <input type="hidden" name="id" value='${title}' >
                <input type="submit" value="delete" style="">
              </form>
              <h2>${title}</h2>${description}`;
        }

      } else if (head === "create") {
        title = "CREATE";

      } else if (head === "update") {
        body = `<form action="/update_process" method="post">
        <p><input type="hidden" name="id" value='${title}' ></p>
        <p><input type="text" name="title" value='${title}'></p>
        <p><textarea name="description" style="width:200px; height:150px" >${description}</textarea></p>
        <p><input type="submit" value="수정하기"></p>
      </form>`;

      }

      const menuList = _this.list(fs.readdirSync('../data'));
      const endTemp = _this.HTML(title, menuList, body);

      response.writeHead(200);
      response.end(endTemp);
    });
  }

}



const app = http.createServer(function (request, response) {
  const _url = request.url;
  const queryData = url.parse(_url, true).query;
  const pathname = url.parse(_url, true).pathname;


  if (pathname === '/') {
    template.page(queryData, response, "main", "");


  } else if (pathname === '/create') {
    template.page(queryData, response, "create", `<form action="/create_process" method="post">
        <p><input type="text" name="title" placeholder=""></p>
        <p><textarea name="description" style="width:200px; height:150px" ></textarea></p>
        <p><input type="submit"></p>
      </form>`);
  } else if (pathname === '/create_process') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      let title = post.title;
      let description = post.description;

      fs.writeFile(`../data/${title}`, description, 'utf8', function (err) {
        response.writeHead(302, { Location: `/?id=${title}` });
        response.end("success");
      })

    });

  } else if (pathname === '/update') {
    template.page(queryData, response, "update", null);

  } else if (pathname === '/update_process') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      const id = post.id;
      const title = post.title;
      const description = post.description;

      fs.rename(`../data/${id}`, `../data/${title}`, function (err) {
        fs.writeFile(`../data/${title}`, description, 'utf8', function (err) {
          response.writeHead(302, { Location: `/?id=${title}` });
          response.end("success");
        })
      })

    });

  } else if (pathname === '/delete_proecess') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      const id = post.id;
      fs.unlink(`../data/${id}`, function (error) {
        response.writeHead(302, { Location: `/` });
        response.end("success");
      });
    });


  } else {
    response.writeHead(400);
    response.end("Not found");
  }

});
app.listen(3000);

54.Node.js 모듈의형식

mpart.js

var M = {
    v: 'V',
    f: function () {
        console.log(this.v);
    }
}

module.exports = M;

muse.js

var part = require('./mpart.js');
part.f();

55.모듈의 활용

lib/template.js

const fs = require('fs');


module.exports = {

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

    list: function (filelist) {
        let menuList = "";
        filelist.forEach(item => {
            menuList += `<li><a href="/?id=${item}">${item}</a></li>`;
        })
        return menuList;
    },


    page: function commonPage(queryData, response, head, body) {
        const _this = this;

        fs.readFile(`../data/${queryData.id}`, 'utf-8', function (err, description) {
            let title = queryData.id;
            if (head === "main") {
                if (queryData.id === undefined) {
                    title = "Welcome";
                    description = "Hello, Node.js";
                    body = `<a href="/create">create</a><h2>${title}</h2>${description}`;
                } else {
                    body = `<a href="/create">create</a>&nbsp;&nbsp;&nbsp;
              <a href="/update?id=${title}">update</a>&nbsp;&nbsp;&nbsp;              
              <form method="post" action="/delete_proecess">
                <input type="hidden" name="id" value='${title}' >
                <input type="submit" value="delete" style="">
              </form>
              <h2>${title}</h2>${description}`;
                }

            } else if (head === "create") {
                title = "CREATE";

            } else if (head === "update") {
                body = `<form action="/update_process" method="post">
        <p><input type="hidden" name="id" value='${title}' ></p>
        <p><input type="text" name="title" value='${title}'></p>
        <p><textarea name="description" style="width:200px; height:150px" >${description}</textarea></p>
        <p><input type="submit" value="수정하기"></p>
      </form>`;

            }

            const menuList = _this.list(fs.readdirSync('../data'));
            const endTemp = _this.HTML(title, menuList, body);

            response.writeHead(200);
            response.end(endTemp);
        });
    }

}

app.js

const http = require('http');
const fs = require('fs');
const url = require("url");
const qs = require("querystring");
const template = require("../lib/template");



const app = http.createServer(function (request, response) {
  const _url = request.url;
  const queryData = url.parse(_url, true).query;
  const pathname = url.parse(_url, true).pathname;


  if (pathname === '/') {
    template.page(queryData, response, "main", "");


  } else if (pathname === '/create') {
    template.page(queryData, response, "create", `<form action="/create_process" method="post">
        <p><input type="text" name="title" placeholder=""></p>
        <p><textarea name="description" style="width:200px; height:150px" ></textarea></p>
        <p><input type="submit"></p>
      </form>`);
  } else if (pathname === '/create_process') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      let title = post.title;
      let description = post.description;

      fs.writeFile(`../data/${title}`, description, 'utf8', function (err) {
        response.writeHead(302, { Location: `/?id=${title}` });
        response.end("success");
      })

    });

  } else if (pathname === '/update') {
    template.page(queryData, response, "update", null);

  } else if (pathname === '/update_process') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      const id = post.id;
      const title = post.title;
      const description = post.description;

      fs.rename(`../data/${id}`, `../data/${title}`, function (err) {
        fs.writeFile(`../data/${title}`, description, 'utf8', function (err) {
          response.writeHead(302, { Location: `/?id=${title}` });
          response.end("success");
        })
      })

    });

  } else if (pathname === '/delete_proecess') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      const id = post.id;
      fs.unlink(`../data/${id}`, function (error) {
        response.writeHead(302, { Location: `/` });
        response.end("success");
      });
    });


  } else {
    response.writeHead(400);
    response.end("Not found");
  }

});

app.listen(3000);

56.입력정보에 대한 보안

template.js

const fs = require('fs');
const path = require("path");

module.exports = {

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

    list: function (filelist) {
        let menuList = "";
        filelist.forEach(item => {
            menuList += `<li><a href="/?id=${item}">${item}</a></li>`;
        })
        return menuList;
    },


    page: function commonPage(queryData, response, head, body) {
        const _this = this;
        const filteredId = path.parse(queryData.id + "").base;


        fs.readFile(`../data/${filteredId}`, 'utf-8', function (err, description) {
            let title = queryData.id;
            if (head === "main") {
                if (queryData.id === undefined) {
                    title = "Welcome";
                    description = "Hello, Node.js";
                    body = `<a href="/create">create</a><h2>${title}</h2>${description}`;
                } else {
                    body = `<a href="/create">create</a>&nbsp;&nbsp;&nbsp;
              <a href="/update?id=${title}">update</a>&nbsp;&nbsp;&nbsp;              
              <form method="post" action="/delete_proecess">
                <input type="hidden" name="id" value='${title}' >
                <input type="submit" value="delete" style="">
              </form>
              <h2>${title}</h2>${description}`;
                }

            } else if (head === "create") {
                title = "CREATE";

            } else if (head === "update") {
                body = `<form action="/update_process" method="post">
        <p><input type="hidden" name="id" value='${title}' ></p>
        <p><input type="text" name="title" value='${title}'></p>
        <p><textarea name="description" style="width:200px; height:150px" >${description}</textarea></p>
        <p><input type="submit" value="수정하기"></p>
      </form>`;

            }

            const menuList = _this.list(fs.readdirSync('../data'));
            const endTemp = _this.HTML(title, menuList, body);

            response.writeHead(200);
            response.end(endTemp);
        });
    }

}

app.js

const http = require('http');
const fs = require('fs');
const url = require("url");
const qs = require("querystring");
const template = require("../lib/template");
const path = require("path");



const app = http.createServer(function (request, response) {
  const _url = request.url;
  const queryData = url.parse(_url, true).query;
  const pathname = url.parse(_url, true).pathname;



  if (pathname === '/') {
    template.page(queryData, response, "main", "");


  } else if (pathname === '/create') {
    template.page(queryData, response, "create", `<form action="/create_process" method="post">
        <p><input type="text" name="title" placeholder=""></p>
        <p><textarea name="description" style="width:200px; height:150px" ></textarea></p>
        <p><input type="submit"></p>
      </form>`);
  } else if (pathname === '/create_process') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      let title = post.title;
      let description = post.description;
      title = path.parse(title).base;

      fs.writeFile(`../data/${title}`, description, 'utf8', function (err) {
        response.writeHead(302, { Location: `/?id=${title}` });
        response.end("success");
      })

    });

  } else if (pathname === '/update') {
    template.page(queryData, response, "update", null);

  } else if (pathname === '/update_process') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      let id = post.id;
      let title = post.title;
      const description = post.description;

      id = path.parse(id + "").base;
      title = path.parse(title).base;

      fs.rename(`../data/${id}`, `../data/${title}`, function (err) {
        fs.writeFile(`../data/${title}`, description, 'utf8', function (err) {
          response.writeHead(302, { Location: `/?id=${title}` });
          response.end("success");
        })
      })

    });

  } else if (pathname === '/delete_proecess') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      let id = post.id;
      id = path.parse(id + "").base;

      fs.unlink(`../data/${id}`, function (error) {
        response.writeHead(302, { Location: `/` });
        response.end("success");
      });
    });


  } else {
    response.writeHead(400);
    response.end("Not found");
  }

});

app.listen(3000);

57.출력정보에 대한 보안(1/3)

58.출력정보에 대한 보안(2/3)

$ npm init -y

$ npm i sanitize-html

59.출력정보에 대한 보안(3/3)

app.js

~

  } else if (pathname === '/create_process') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      let title = sanitizeHtml(post.title);
      let description = sanitizeHtml(post.description);
      title = path.parse(title).base;

      fs.writeFile(`../data/${title}`, description, 'utf8', function (err) {
        response.writeHead(302, { Location: `/?id=${title}` });
        response.end("success");
      })

    });

  } else if (pathname === '/update') {
    template.page(queryData, response, "update", null);

  } else if (pathname === '/update_process') {
    let body = "";
    request.on("data", function (data) {
      body = body + data;
    });

    request.on("end", function (data) {
      const post = qs.parse(body);
      let id = post.id;
      let title = sanitizeHtml(post.title);
      let description = sanitizeHtml(post.description);


      id = path.parse(id + "").base;
      title = path.parse(title).base;

      fs.rename(`../data/${id}`, `../data/${title}`, function (err) {
        fs.writeFile(`../data/${title}`, description, 'utf8', function (err) {
          response.writeHead(302, { Location: `/?id=${title}` });
          response.end("success");
        })
      })

    });

  } else if (pathname === '/delete_proecess') {

~

60.API와 CreateServer