[node.js] Ajax

Hyo Kyun Lee·2021년 7월 11일

ajax node.js

node.js

목록 보기

8/34

1. Ajax 개요

우리가 보는 웹페이지 화면은 Server에 Request를 보낸 후 받은 Response이다.

기본적으로 사용자가 Server로부터 받는 Response는 html형식으로 구현된 template이다.

이는 http 프로토콜을 통해 이루어지는 통신 과정이기도 하며, 사용자가 웹페이지의 갱신된 data를 확보하기 위해선 Response를 다시 받아야 한다.

즉 사용자는 update가 반영된 data를 확인하기 위해 해당 data가 포함된 모든 Page 구성, 즉 Response를 모두 다시 받아야 한다.

이러한 Data Update의 번거로움을 보완하기위해 고안된 기술이 Ajax이다.

2. Ajax 개념

웹페이지의 비동기 방식을 통한 Data update

동기화가 하나의 기준에 의해 모든 처리가 제어된다면, 비동기화는 각기 다른 기준 혹은 독립적인 기준에 의해 처리가 제어된다.

Ajax는 JavaScript 라이브러리 중 하나로, Asynchronous JavaScript And Xml의 약어이다.

즉 Ajax는 독립적인 기준으로 전체 웹페이지가 아닌, 일부 data만 update하여 사용자에게 부분적인 최신화를 지원하는 도구이다.

2-1. 데이터 네트워킹의 핵심

대부분의 JavaScript 시스템에서 주고받는 data 형식은 json 혹은 dictionary 형식이다.

여기서 Ajax는 Response로 받아온 json 형식의 데이터를 Ajax를 통해 비동기 형식으로 웹페이지 화면을 구현해준다.

3. node.js 라우팅

네트워크 개념에서 동일 네트워크 권역 내 주고받는 data들은 TCP/IP통신, 다른 네트워크 권역에서 주고받는 data들은 라우팅 통신이 적용된다.

node.js에서 구현된 네트워킹은 server에게 request하여 이를 response로 받아오는 형식이다.

전송 환경이 localhost(자체적 통신) 혹은 외부통신이든 상관없이 모두 라우팅하는 것으로 간주한다.

이때 Response는 요청방식인 GET, POST 등의 종류에 따라 받아오는 data 형식이나 json 구문이 다르다.

※Response를 확인 및 구체화할 수 있는 방식은 대표적으로 POSTMAN / GraphQL과 같은 GUI가 있다.

※보통 배열 및 json 형태로 확보되므로 원하는 data 형식이 어느 인덱스에 있는지(매핑되어있는지) 확인하고 받아와야 한다.

//json 형식의 data를 확보하고 원하는 부분을 가져온다.
//server가 보내는 부분 중 body에 해당 json data가 존재한다.
//bodyparser를 이용하여 response의 추가적인 가공을 할 수 있다.

res.body.json... 
res.bodyparser.json...