AJAX 페이지는 그대로 결과를 페이지 수정한다.

요청발생은 클라이언트 ---> 서버


 ex) 채팅서버 



서버  ----- 클라

|    |    |

클라  클라

 웹에서는 적용하기 어려웠다.

 


--------------------------------------

polling 클라가 서버에게 계속 물어보다. 자주 반복되면 좋음(트래픽낭비문제)

comet --> iframe 을 통해 창을 똑같이 넣어준다.

페이지에 iframe을 넣어서 요청을 안끊는다. (에러가 나면 죽는다.)


AJAX를 보안하기위해 웹소켓을 구현해서

소켓을 web위에 올린다. 이를 통해 서버와 클라이언트가 서로 상호작용할수있다.

원래의 웹은 클라가 요청을 해야만 했는데 소켓을 통해 서버도 요청보내줬다. 

언어별로 구별하는 방법이 다르다. 


JSP 

PYTHON 

node.    ----> socket.io를 통해  구현


REST API 를 이용해 서버를 구현하면 (최근에도 REST API)를 구성하는게 좋다.

클라이언트                 서버

프론트엔드                백엔드 


템플릿 사용시 프론트 백엔드 다알아야한다. 여기서 문제가 발생

프론트엔드 백엔드 나눠서 하는게 좋다. 

분리하는 목적으로 REST API가 생겨났다. 


서버는 클라한테 HTML만준다. // WAS를 없앤다(?) 동적인 것은 처리안한다.

환율을 표시할때 데이터가 매번 바껴야한다.

클라가 요청한 HTML에서 페이지를 스크립트없는 것을 보여주고

아래에 넣는데 AJAX를 통해서 서버에게 날리고 WAS를 통해서 DB가 XML(-->JASON으로 바꿔서씀) 전달해준다. 

//데이터를 들어넣어 주는것은 


처음요청, 웹페이지 WAS를 거치지않은것 그리고나서 동적인 데이터를 받아온다.

그다음 스크립트를 통해 동적인 데이터를 


AJAX는 HTML문서가 아니다. 

cf) 어플리케이션 만들때 xml로 하고 중간의 값을 AJAX 처럼 받아올 수 있다. 

REST API Server를 통해 주고 받을 수 있다

     
======================================================
REST API server 웹서버

프론트엔드와 백엔드를 나눌수있다. 

HTML은 프론트엔드만 하면된다. REST API 는 서버 개발하면서 하면된다. 

모바일용 페이지랑 웹 페이지에서 데이터 주고받을때 REST API를 같이 동시에 사용할 수 있어서 좋다.


시메틱하게 만들어야한다. HTML GET PUT POST


'WEB (Feat.FOO) > 강의노트' 카테고리의 다른 글

6. FOO의 똥꼬쇼  (0) 2017.01.23
5. FOO의 똥꼬쇼 정리  (0) 2017.01.16
4. Foo의 똥꼬쇼 4번째  (0) 2017.01.11
2. FOO의 똥꼬쇼 2번째  (0) 2017.01.04
1. FOO의 똥꼬쇼 강의노트  (0) 2017.01.02

Node.js. Express-POST방식을 통한 정보 전달


get방식을 통해서 정보를 가져왔다. 

요청을 하고 get방식을 통해 가져온다는 것


post : 사용자의 정보를 서버로 전송할때는 post를 사용해서 처리한다.



GET vs POST


GET방식 으로 사용해 보자. 

GET으로 보내면 URL에 쿼리스트링 방식으로 전달한다.

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

app.get('/form_receiver', function(req,res){

var title = req.query.title;

var descrpition = req.query.description;

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

});



POST방식 으로 사용해 보자.

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

app.post('/form_receiver', function(req,res){

var title = req.body.title;                // 문제발생을 해결하기 위해 body-parser설치 필요

var descrpition = req.body.description;

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

});


body-parser 를 사용해야한다. <설치>

npm install body-parser --save


// var bodyParser = require('body-parser')

// qpp.use(bodyParser.urlencoded({extended: false}))

미들웨어 를 통해서 body-paser가 post를 통해 전달된 내용을 사용할 수 있게 해준다.

req.body.title. body를 사용할 수 있게 되었다.




언제 GET방식을 쓰고 언제 POST방식을 사용해아 하는 것일까?


사용자 정보를 GET방식으로 보내면 POST방식을 사용해서 보내야 

URL상에 사용자 정보가 입력되어 나타나지 않게 된다. POST지향


URL에 쿼리스트링을 사용하는데 데이터 길이가 너무 길면 GET방식을 사용하는데에 제약이 될 수 있다.

많은 데이터 전송시 POST지향


링크를 걸어서 이동하는 경우(게시판) 같은 경우에는 GET방식 사용도 괜찮다.



Node.js Express-URL을 통한 정보 전달


쿼리스트링이란?

URL PATH뒤에 ?하면서 붙는 것이 PATH를 통해서 보여주는 정보를 다르게 보여 줄 수있다.


ex) http://hpitos.tistory.com/10?id=1 처럼 ? 뒤에 붙는 것을 query string이라고 할 수 있다.



쿼리스트링 적용해보기 및 query 객체를 사용해보기

app.get('/topic',function(req,res){

res.send(req.query.id);

})

Express reference에서 properties에서 변수의 값으로 어떤것이 들어오는 지 알아야한다. 


app.get('/topic',function(req,res){

res.send(req.query.id+','+req.query.name);

})



query 객체의 활용하기

app.get('/topic',function(req,res){

var topics = [

'JavaScript is...',

'Node.js is ...',

'Express is ...'

];

var output = `

<a href="/topic?id=0">JavaScrpit</a><br>

<a href="/topic?id=1">Node.js</a><br>

<a href="/topic?id=2">Express</a><br><br>

${topics[req.query.id]}

`

res.send(output);

})



쿼리스트링없이 깔끔하게 결과 전달해보기


시멘틱URL사용하기 (query가 아닌 params 사용한다.)

app.get('/topic/:id',function(req,res){ // 토픽다음 :id를 사용해서 적용가능하다.

var topics = [

'JavaScript is...',

'Node.js is ...',

'Express is ...'

];

var output = `

<a href="/topic?id=0">JavaScrpit</a><br>

<a href="/topic?id=1">Node.js</a><br>

<a href="/topic?id=2">Express</a><br><br>

${topics[req.params.id]}        // 시멘틱은 Params를 통해 나태낼수있다.

`

res.send(output);

})


-------------------------------------------------------------------------------

// 하나더 추가해서 사용도 가능하다.

app.get('/topic/:id/:mode', function(req,res){

res.send(req.params.id+','+req.params.mode)

})






+ Recent posts