템플릿 기능 정리정돈하기

 

객체를 이용해서 정리정돈을 해보기로 했다

 

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;
  }
}

html과 list를 객체화 해서 넣어주었다

 

이렇게 넣어주면 아래부분을 수정해줘야한다

 

          var list = template.list(filelist);
          var html = template.Html(title, list, `<h2>${title}</h2>${description}`, `<a href="/create">create</a>`);
          response.writeHead(200);
          response.end(html);

함수들을 다 객체로 불러오는걸로 바꿔주었다

template가 위에 있으므로 이름을 html로 바꾸어주었다 

 

아래도 동일하게 바꾸어준다

 

코드를 이렇게 간결하게 하는 것(중복을 최대한 줄이기) 즉 리펙토링은 중요하다

'휴지통 > Node.Js' 카테고리의 다른 글

공부(23)  (0) 2021.08.27
공부(22)  (0) 2021.08.26
공부(20)  (0) 2021.08.26
공부(19)  (0) 2021.08.26
공부(18)  (0) 2021.08.26

Object, Array 모두 정보를 정리정돈하는 도구

Object(순서가 없는 정보를 저장하기에 최적 이름으로 식별자를 줄 수 있음)

Array(각각의 정보는 각각의 식별자가 있고 그 식별자는 숫자 0 1 2 순서에 따라 정리정돈)

 

var members = ['A', 'B', 'C']
console.log(members[2]); //C

var roles = {
  'programmer':'A',
  'designer' : 'B',
  'manager' : 'C'
}

console.log(roles.designer); //B

 

이제 반복문을 이용한 예제를 보자

 

var members = ['A', 'B', 'C'];
console.log(members[1]);
var i = 0;
while(i < members.length){
  console.log('array loop', members[i]);
  i = i + 1;
}

var roles = {
  'programmer':'A',
  'designer' : 'B',
  'manager' : 'C'
}

console.log(roles.designer);

for(var name in roles){
  console.log('object', name);
}

배열은 array loop와 함께 A B C 호출되고

 

객체는 object와 함께 programmer designer manager 가 호출된다(key값)

 

value 값을 얻고싶다면

for(var name in roles){
console.log(roles[name]);
}

을 하면 된다

 

또 roles.designer 와 roles['designer'] 은 같은 것을 호출한다

 

var f = function(){
  console.log(1+1);
  console.log(1+2);
}
var a = [f];
a[0]();

var o = {
  func:f
}
o.func();

 

 

a의 첫번째 자리는 f가 되고 f()는 함수이다 즉 2 3 이 나오고

 

객체 o.func는 f 이므로 f(); 즉 f함수를 호출하므로 2 3이 나온다

 

값으로써 함수를 배열에 담는 경우는 거의 없다

객체는 이름이 있기 때문에 많이 담는다 

 

 

var p = {
  v1:'v1',
  v2:'v2',
  f1:function(){
    console.log(this.v1);
  },
  f2:function(){
    console.log(this.v2);
  }
}

p.f1();
p.f2();

함수를 값으로 가질 수 있고 그것을 객체 내에 집어넣었다

 

this는 함수이름이 무엇이던간에 본인이 속해있는 곳을 지칭한다

'휴지통 > Node.Js' 카테고리의 다른 글

공부(22)  (0) 2021.08.26
공부(21)  (0) 2021.08.26
공부(19)  (0) 2021.08.26
공부(18)  (0) 2021.08.26
공부(17)  (0) 2021.08.26

글삭제-삭제버튼 구현

 

삭제버튼을 만들기위해

else 밑 <a href="/delete?id=${title}">delete</a> 이런 형식으로 만들어버리면 안된다

왜냐하면 이 형식은 get방법을 사용하기 때문이다

그래서 form을 써서 만들어 보겠다

 

              <form action="delete_process" method="post">
                <input type="hidden" name="id" value="${title}">
                <input type="submit" value="delete">
              </form>

delete 버튼을 생성하고 클릭시 delete_process로 post 형식으로 이동하게 된다

 

else if(pathname === '/delete_process'){
      var body = '';
      request.on('data', function(data){
        body = body + data;
      });
      request.on('end', function(){
        var post = qs.parse(body);
        var id = post.id;
      });
    }

이렇게 update_process와 비슷하게 가져온뒤

 

delete와는 관련이 없는 항목들 var title var description들을 없애주고 rename과 writeFile 또한 필요없으니 지워준다

 

이제 실질적으로 삭제되는 코드를 알아보자

fs.unlink(path, callback)

경로와 콜백함수를 매개변수로 갖는다

 

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

우리가 삭제할 것은 지정된 파일 즉 id값이며 삭제가 완료되면 root인 /로 돌아가게끔 만들어주었다

'휴지통 > Node.Js' 카테고리의 다른 글

공부(21)  (0) 2021.08.26
공부(20)  (0) 2021.08.26
공부(18)  (0) 2021.08.26
공부(17)  (0) 2021.08.26
공부(16)  (0) 2021.08.25

글수정-파일명 변경, 내용저장

 

 

else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
        body = body + data;
      });
      request.on('end', function(){
        var post = qs.parse(body);
        var id = post.id;
        var title = post.title;
        var description = post.description;
        fs.rename(`data/${id}`, `data/${title}`, function(error){
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
        });
      });
    }

update 도 create와 마찬가지로 update_process일 때를 만들어준다

 

다만 여기서 추가된 점은 id 값이므로

 

var id = post.id; 로 id값을 부여한다

 

또한 업데이트되면 이름또한 바뀌어야하기 때문에 rename을 이용해준다

 

fs.rename(이전경로, 현재경로, 콜백함수) 이런 형식이다

 

또한 이 작업이 마무리되면 302번으로 url을 옮겨주는 식을 콜백함수 안에 넣어준다

'휴지통 > Node.Js' 카테고리의 다른 글

공부(20)  (0) 2021.08.26
공부(19)  (0) 2021.08.26
공부(17)  (0) 2021.08.26
공부(16)  (0) 2021.08.25
공부(15)  (0) 2021.08.25

+ Recent posts

티스토리툴바