mskim Pages

2 minute read

10_Node.js 글 생성 UI 만들기

  • App 제작 - 글생성 UI 만들기

    • 글쓰기 화면 create 생성
      main.js 의 createServer 에서 pathname이 필요한 것인지 확인하기

      create 링크로 진입하면 pathname은 /create 이다.
      ‘/’로 접속하면 홈 디렉토리

  1. else if 구문을 새로 만들어 정상적으로 동작하게 만든다.

     else if (pathname === '/create') {
   fs.readdir('../nodejs1/data', function(err, filelist){

     var title='create';
     var list = templateList(filelist);
     var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);

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

이어서, 수정을 거쳐서 create 화면을 완성하도록 한다.

  1. Form 추가 - var template 수정

     var template = templateHTML(title, list, `
   <form action="http://localhost:3000/create_process" method="POST">
     <input type="text" name="title" placeholder="title"><p>
     <textarea name="description" placeholder="description"></textarea><p>
     <input type="submit">
   </form>
 `, '');//공백문자 ''

submit하면 404 에러.
개발자 도구 - Network 탭 - Formdata에서 POST 방식으로 전송된 것을 확인 할 수 있다.

  • App 제작 - POST 방식으로 전송된 데이터 받기
    create_process 로 전송된 정보 받기

정보를 받기 위해 create else if 조건문 아래에 똑같이 else if 구문을 추가한다

else if (pathname === '/create_process') {
      response.writeHead(200);
      response.end('succcess');
    }

/create 페이지에서 폼으로 데이터를 전송하면 success 문자열이 화면에 나오며
네트워크 탭에서 POST 방식으로 데이터가 전송된 것을 확인 할 수 있음

  • nodejs 안에서 POST 방식으로 전달된 데이터를 가져오기

nodejs post data
How do you extract POST data in Node.js?

//qs가 querystring이란 모듈을 가져온다
var qs = require('querystring');

function (request, response) {
  if(request.method == 'POST'){
   var body='';

function 은 callback 함수이다.
웹 브라우저가 POST 방식으로 데이터를 전달할 때, 데이터가 많으면
처리 할 때 무리가 갈 수 있다. 그런 경우를 대비해서 request.on 을 제공한다.
서버 쪽에서 수신할 때마다 콜백 함수를 호출한다.
호출할 때, data를 인자로 해서 수신한 정보를 준다.
  
   request.on('data', function(data){

    //body 데이터에 콜백이 실행될 때마다 데이터를 추가한다
    body+=data;

    //전송한 데이터가 크면 접속을 끊는다
    //Too much POST data, kill the connection
    //1e6 === 1*Math.pow(10,6) === 1*1000000 ~~ 1MB
    if(body.length > 1e6)
      request.connection.destroy();
  });
  //더 이상 들어올 데이터가 없으면 'end' 다음에 들어오는 콜백 함수를 호출한다.
  //이 콜백함수가 실행됐을 때 정보 수신이 끝난다.
  request.on('end', function() {
    //querystring 모듈이 가지고 있는 parse 함수에
    //지금까지 저장한 body를 입력값으로 주면 post 정보가 들었다는 것
      var post=qs.parse(body);
  });
  }
}

  • createServer에 전달된 callback 함수인 request, response createServer는 nodejs에 웹 브라우저로 접속이 들어올 때 마다 createServer의 callback 함수를 nodejs가 호출한다 주어지는 두 개의 인자 request와 response

    • request : 요청할 때 브라우저가 보낸 정보
    • response : 응답할 때 브라우저로 보내는 정보

    console.log(post); 배열로 이루어진 전송된 데이터를 확인 할 수 있다. { title: ‘zz’, description: ‘zz’ } console.log(post.title); title 값만 가져올 수 있음

‘data’, ‘end’ 라는 이벤트를 통해 웹 브라우저로부터 post 방식으로 전송된 데이터를 가져올 수 있고,
var post=qs.parse(body); 쿼리 스트링 모듈의 parse 함수를 이용해 전송된 정보를 객체화 할 수 있다.

var title = post.title;
var description = post.description; 을 이용해서 title과 본문 값을 알아낼 수 있다.

다음은 받아낸 정보를 처리하기

You May Also Enjoy