카테고리 없음

NodeJS part 6

taeskim 2018. 2. 25. 15:19

1. Express, POST 방식을 이용한 정보의 전달

1. GET 방식을 이용한 정보의 전달1

  1. GET방식은 서버에 있는 정보를 가져오는 것을 말합니다.
  2. POST방식은 서버에 정보를 올리는 방식입니다.

2. Express, GET 방식을 이용한 정보의 전달 2:form

  1. 먼저 Get 방식을 이용한 데이터 전송을 해보겠습니다
  2. 기본적인 form을 하나 만들어 보도록 하겠습니다. 사용자의 input 정보를 두개 받는 형태를 하나 만들어 보도록 하겠습니다.
  3. input 타입으로 text를 정보로 받는 형태 중에서 공간이 제한 된 것과 여러줄의 텍스트를 입력할 수 있는 textarea 타입의 input을 받아 보도록 하겠습니다.
  4. 우리가 선택한 템플릿 방식은 pug였고, views라는 폴더에 pug를 형태로 html 문서를 작성한 뒤 JS에서 실행하면 됩니다.
  5. views라는 폴더에 'form.pug'라는 파일을 하나 만듭니다.
  6. JS에서 해당 파일을 render하는 코드를 작성합니다.

  7. 사용자의 입력에 대해 응답하는 것이므로 res를 사용합니다.

     app.get('/form', function(req, res) {
     res.render('form');
 })

  8. 지금부터는 pug에 우리가 원하는 형태의 html 템플릿을 작성합니다.

     html
     head
         meta(charset='utf-8')
     body
         form(action='/form_receiver')
             p 
                 input(type='text' name='title')
             p
                 textarea(name='description')
             p 
                 input(type='submit')

  9. submit이라는 input에 event가 발생하게 되면 form이라는 tag로 묶여 있는 테그들은 '/form_receiver'라우터로 이동하게 됩니다.

  10. action='/form_receiver' 다음에 method='get'이라는 method를 명시적으로 적어져도 되고 적지 않으면 default값이 get으로 설정됩니다.

  11. 이와 같은 상태에서 form_receiver에서 우리가 입력한 input값들을 뿌리는 JS코드를 완성해 봅시다.

     app.get('/form_receiver', function(req, res) {
     var title = req.query.title;
   var description = req.query.description;

   res.send(title + ' ' + description);
 })

3. POST 방식으로 전송해 보기

  1. POST 방식을 사용하기 위해서는 필요한 모듈이 있습니다. 그것은 바로 'body-parser'입니다. npm 공식 사이트에 들어가서 'body-parser'를 설치하고 http 모듈을 추가해서 사용하면 됩니다.
  2. 개념적인 인해를 돕기 위해 우리는 미들 웨어라는 개념을 이해야 합니다.
  3. 미들웨어는 서버와 클리언트 사이에 있는 하나의 문지기라고 생각하면 될듯합니다.

  4. JS 코드가 만일 body객체를 사용하기를 원한다면 이에 맞는 파싱과정이 필요하게 되고 body-parser는 이런 역할을 적극적으로 수행하게 되는 것이죠.

       npm install body-parser --save

  5. 위와 같은 명령어를 여러분이 작업중인 폴더에 설치하여 줍니다. 앞선 설명들로 명령어 각각의 설명은 생략합니다.

  6. 모듈을 추가해 주면 이 모듈을 우리가 개발하고 있는 app에 붙여주는 작업을 해야 합니다.

  7. 인간은 직관적으로 각각의 변수들이 어떻게 연결될 것인지 알 수 있지만, 컴퓨터는 연결 하나하나를 manually 해줘야 합니다.

       var bodyPoarser = require('body-parser')
   app.use(bodyParser.urlencoded({ extended: false })); 

   app.post('/form_receiver', function(req,res) {
       var title = req.body.title;
     var description = req.body.description;
     res.send(title+description);
   })

  8. 지금까지만 살펴보면 뭔가 POST 방식이 GET 방식에 비해 굉장히 번거로운 것처럼 보입니다. 다음 장에서는 어떠한 차이점을 가지고 있고 이에 맞춰 적절히 사용해야 하는지를 살펴 보겠습니다.

4. POST VS GET

  1. 먼저, POST 방식의 장점을 살펴 보겠습니다.
  2. GET을 이용해 사용자의 로그인 정보를 url을 통해 전달하게 되면, 우리는 보안상의 문제를 가질수가 있습니다. 즉, 사용자의 ID와 비밀번호 값이 노출되게 되는 것이죠.
  3. GET을 이용해 사용자에게 대량의정보를 제공해 준다고 생각하면, url에 담을 수 있는 정보의 량은 한정적이므로, 일정 길이를 넘어서게 되면 정보가 누락되어 전송되게 됩니다.
  4. 이와 같은 문제를 해결하기 위해서 우리는 POST 방식을 이용해서 정보를 전달하게 됩니다.
  5. 하지만 GET 방식을 이용하면 특정 위치의 정보에 대한 정확한 url 주소를 가질 수 있다는 장점이 있습니다.