Node.js/nodeJS 기본

[ NodeJS 기본 ] form을 통한 사용자 데이터 전송

OnnJE 2023. 3. 18. 18:10
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="/create_process" method="POST">
      <p>
        <input type="text" name="title" placeholder="title" />
      </p>
      <p>
        <textarea
          placeholder="description"
          name="description"
          id=""
          cols="30"
          rows="10"
        ></textarea>
      </p>
      <p>
        <input type="submit" value="submit" />
      </p>
      <p><a href="/">home</a></p>
    </form>
  </body>
</html>

 

  위 form 예시에서는 action 속성에 "/create_process"를 할당했고 method 속성을 POST로 지정했습니다. 즉, submit 될 때 발생하는 HTTP request의 url 프로퍼티는 "/create"가 됩니다. 따라서 nodejs에서는 pathname === "/create"란 조건문으로 request에 대응하여 적절한 응답을 전달할 수 있습니다. 이때 사용되는 것이 nodejs의 내장모듈인 querystring 모듈과 request의 on 메서드입니다.

 

request.on

 

  클라이언트가 서버로 HTTP request를 보낼때 서버는 request를 읽을 수 있는 스트림으로 받습니다. request.on 메서드는 매 스트림이 data 이벤트가 발생시킬때 마다 실행되는 callback 함수를 등록합니다. (data 이벤트는 클라이언트로부터 데이터 덩어리가 수신될 때마다 발생합니다.)

 

request.on 예시)

const http = require('http');

http.createServer(function(req, res) {
  let body = '';
  
  req.on('data', function(chunk) {
    body += chunk.toString();
  });
  
  req.on('end', function() {
    console.log(body);
    res.end('OK');
  });
}).listen(3000);

 

  위 코드의 첫번째 req.on을 통해 얻어진 body는 아래 예시와 같은 string입니다. 이 string 데이터를 객체로 변환하기위해 querystring 모듈의 parse() 메서드가 사용되며 그 결과 또한 아래 예시에서 확인 가능합니다. parse 결과 얻어진 객체는 글의 저장, 수정 등의 작업에 사용됩니다.

 

  

  

반응형