[Node.js]객체이용, 템플릿 기능 정리정돈하기

밍풀 2023. 1. 17. 22:19

객체 ; 서로 연관된 데이터와, 그 데이터를 처리하는 방법인 함수를 그룹핑해서 코드의 복잡성을 낮추는 수납상자

property(속성) ; 객체에 있는 값 하나하나

아래와 같이 html과 list라는 이름의 함수를 가지고 있는 하나의 객체를 만듦 template이라는 이름으로

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

var template={
  HTML : function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  }, list : function(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;
  }
}
Colored by Color Scripter

cs

 

객체 만든 후 위와 같이 코드를 수정함

이전에 함수 이름으로만 정리정돈 했다면 이젠 객체를 통해서 정리정돈 할 수 있게 됨

마치 파일만 있었는데 폴더가 생긴것과 같음

이렇게 동작방법은 똑같이 유지하면서 내부의 코드를 효율적으로 바꾸는 것 ; 리펙토링

(기존의 html코드 들어간 template 변수는 객체의 이름이 됐으니 변수이름 수정 필요함 주의, html로 수정함)

아래는 객체활용해 리펙토링 한 코드

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
 
var template={
  HTML : function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  }, list : function(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;//사용자가 요청한 값 /?id=CSS 이런식의 쿼리스
    var queryData = url.parse(_url, true).query;//{id : 'css'}같은 객체
    var pathname=url.parse(_url, true).pathname;
    if(pathname==='/'){
      if(queryData.id===undefined){
        fs.readdir('./data', function(error,filelist){
          var title ='Welcome';
          var description='Hello Node.js';
          var list = template.list(filelist);
          var html = template.HTML(title, list, `<h2>${title}</h2><p>${description}</p>`,'<a href="/create">create</a>');//주소창에 쿼리스트링 부분에 /?id=min 입력시 title이 min으로 치환되어 화면나옴
          response.writeHead(200);
          response.end(html);
        })
      }else{
       fs.readdir('./data', function(error,filelist){
       fs.readFile(`data/${queryData.id}`,'utf8',function(err,description){
        var title = queryData.id;// css 같은 딱 id부분 즉 /?id= 요자리가 title
        var list = template.list(filelist);
        var html =template.HTML(title, list,
           `<h2>${title}</h2><p>${description}</p>`,
          `<a href="/create">create</a>
          <a href="/update?id=${title}">update</a>
 
          <form action="/delete_process" method="post">
          <input type="hidden" name="id" value="${title}">
          <input type="submit" value="delete">
          </form>`);
 
          response.writeHead(200);
          response.end(html);
        });
    })
  }
}
else if(pathname==="/create"){
  fs.readdir('./data', function(error,filelist){
    var title ='WEB';
    var list = template.list(filelist);
    var html = template.HTML(title, list,
       `<form action="/create_process" method="post">
       <p><input type="text" name="title" placeholder="title"></p>
       <p>
       <textarea name="description" placeholder="description"></textarea>
       </p>
       <p>
       <input type="submit">
       </p>
       </form>`,'');
    response.writeHead(200);
    response.end(html);
  });
 
}else if(pathname==="/create_process"){
  var body='';
  request.on('data', function(data){//post로 받은 정보가져옴;
    body=body+data;
  });
  request.on('end', function(end){
    var post = qs.parse(body);//post로 받은 정보를 객체화시켜 전환;
    var title = post.title;
    var description=post.description;
    fs.writeFile(`data/${title}`,description,'utf8',function(err){
      response.writeHead(302, {location : `/?id=${title}`});
      response.end();
    })
 
  });
 
}else if(pathname==="/update"){
  fs.readdir('./data', function(error,filelist){
  fs.readFile(`data/${queryData.id}`,'utf8',function(err,description){
  var title = queryData.id;// css 같은 딱 id부분 즉 /?id= 요자리가 title
  var list = template.list(filelist);
  var html = template.HTML(title, list,
    `<form action="update_process" method="post">
    <input type="hidden" name="id" value="${title}">
   <p><input type="text" name="title" placeholder="title" value="${title}"></p>
   <p>
   <textarea name="description" placeholder="description">${description}</textarea>
   </p>
   <p>
   <input type="submit">
   </p>
   </form>`
   ,`<a href="/create">create</a> <a href="/update?id=${title}">update</a>`);
    response.writeHead(200);
    response.end(html);
  });
  })
  }
 
  else if(pathname==="/update_process"){
    var body='';
    request.on('data', function(data){//post로 받은 정보가져옴;
      body=body+data;
    });
    request.on('end', function(end){
      var post = qs.parse(body);//post로 받은 정보를 객체화시켜 전환;
      console.log(post);
      var id = post.id;
      var title = post.title;
      var 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();
        })
      });
    })
  }else if(pathname==="/delete_process"){
    var body='';
    request.on('data', function(data){//post로 받은 정보가져옴;
      body=body+data;
    });
    request.on('end', function(end){
      var post = qs.parse(body);//post로 받은 정보를 객체화시켜 전환;
      var id = post.id;
      fs.unlink(`data/${id}`, function(err){
        response.writeHead(302, {Location : `/`});
        response.end();
      })
 
    })
 
  }
  else{
  response.writeHead(404);
  response.end('Not Found');
}
});
app.listen(3000);
 
Colored by Color Scripter

cs