[ NodeJS - APP ] post 방식으로 전송된 데이터 받기

* 해당 포스터는 생활코딩 강의를 정리한 내용입니다.

---

[  HTML form ]

 

외부에서 데이터를 전송하면 그 전송받은 데이터를 데이터 디렉토리 안에 생성

→ 컨텐츠를 사용자가 웹을 통해서 생성, 수정, 삭제 가능

 

form 태그는 form안에 있는 각각의 control들에 사용자가 입력한 정보를 submit 버튼을 눌렀을 때

action 속성이 가리키는 서버를 query string의 형태로 데이터를 전송하는 HTML 기능이다.

<form action="http://localhost:3000/process_create" method="post">
  <p><input type="text" name="title"></p>
  <p>
    <textarea name="description"></textarea>
  </p>
  <p>
    <input type="submit">
  </p>
</form>

1. 사용자가 입력한 정보를 서버에 전송하기 위해서는 정보를 어디로 보낼 것인지에 대한 주소가 필요

   → 전송하고자 하는 데이터를 갖고 있는 form을 <form> 태그로 감싸준다.

 

2. < form action="">에서 action은 '입력한 정보를 서버의 이 주소로 전송하고 싶다라'는 의미

 

3. 입력한 각각의 값들이 이름이 있어야지만 서버쪽에서 받았을 때 의미가 있음 

   → 각각의 컨트롤에다가 이름을 주기 ex) name="title"

 

※ 주소 사항에 우리가 필요한 데이터가 포함이 돼야지만 복사해서 상대방한테 전송했을 때 상대방이 접속 가능하다.

   서버에서 데이터를 가져오는 get을 할 경우에는 ?로 시작하는 query string을 사용하고

   서버에서 데이터를 생성, 수정, 삭제 등의 행위를 할 경우에는 데이터를 절대로 url로 보내면 안된다.

   → 눈에 보이지 않는 방식으로 보내야함 : method="post"

 

   method="post"로 form을 지정해주면 url에는 process_create가 있고 query string은 존재하지 않는다.

  

   url로 데이터를 전송하게 되면 url은 무한히 긴 데이터를 수용하지 않는다. 

   서버로부터 데이터를 가져오는 get을 할 경우에는 method="get"이거나 method를 생략

   하지만 서버에 데이터를 수정, 삭제, 생성할 때는 반드시 method="post" 사용

 

---

[ post 방식으로 전송된 데이터 받기 ]

 

사용자가 form으로 정보를 전송할 때 post 방식으로 전송을 한다. 

 

< post 방식으로 전송된 데이터를 NodeJS 안에서 가져오기 위한 방법 >

 

request : createServer에 전달된 callback 함수이다. 

createServer는 NodeJS로 웹 브라우저에 접속이 들어올 때 마다 createServer의 callback 함수를 NodeJS가 호출한다.

그 때 callback 함수에 인자를 2개 준다.

request : 사용자가 요청할 때 웹 브라우저가 보내는 정보

response : 응답할 때 웹 브라우저한테 전송할 정보들

 

var body ='';
request.on('data',function(data){
        body = body + data
});

사용자가 요청한 정보 안에는 post 정보가 있다.

 

웹 브라우저가 post 방식으로 데이터를 전송할 때 데이터가 엄청나게 많은 경우에는 그 데이터를

한번에 처리하거나 받아가면 컴퓨터에 무리가 생긴다.

NodeJS는 post 방식으로 전송되는 데이터의 양이 많을 경우를 대비해서 request.on() 사용 방식을 제공한다. 

 

즉 전체 데이터 중 일부를 서버쪽에서 수신할 때마다 서버는 callback 함수를 호출하도록 되어 있다.

그래서 호출할 때 'data'라는 인자를 통해서 수신한 정보를 주기로 되어 있다.

→ body 데이터에다가 callback 함수가 실행될 때 마다 데이터를 추가하기

* 데이터의 용량이 너무 크다면 일종의 보안장치로 접속을 끊어버리는 조건문을 구현

 

var qs = require('querystring')
//qs는 querystring이라는 NodeJS가 가지고 있는 모듈을 가져온다. 

request.on('end', function(){
        var post = qs.parse(body);
})

데이터가 일부분씩 계속 들어오다가 더이상 들어올 정보가 없을 경우 'end' 다음에 들어오는 callback 함수를

호출하도록 되어있다. 즉 'end'에 해당하는 callback이 실행됬을 경우 정보 수신이 끝남

 

* 'data'와 'end'를 이벤트라 한다.

  이 이벤트를 이용해서 웹 브라우저로 부터 post 방식으로 전송된 데이터를 가져올 수도 있고

  query string 모듈에 parse를 이용해서 정보를 전환하는 객체화 등을 할 수 있다.

 

  else if (pathname === '/update') {
      fs.readdir('./data', function(error, filelist) {

        fs.readFile(`data/${queryData.id}`, 'utf8', function(err,description){
          var list = template.list(filelist);
          var title = queryData.id
          var html = template.HTML(title,list,
            //forn에서 submit을 했을 때 사용자가 정보를 update_process로 보내게 변경
            `<form action="http://localhost:3000/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){
        body = body + data
      });
      request.on('end', function(){
        var post = qs.parse(body);
        var title = post.title;
        var description = post.description;
        var id = post.id
        fs.rename(`data/${id}`, `data/${title}`, function(error){
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
              response.writeHead(302, {Location: `/?id=${title}`});
              response.end();
          })
        })
      });
    }