[부스트코스]웹 프로그래밍 21. 비동기 AJax 통신 + chrome DevToos

동기(synchronous : 동시에 일어나는)

 - 동기는 말 그대로 동시에 일어난다는 뜻입니다. 요청과 그 결과가 동시에 일어난다는 약속인데요. 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다.

-> 요청과 결과가 한 자리에서 동시에 일어남

-> A노드와 B노드 사이의 작업 처리 단위(transaction)를 동시에 맞추겠다.

 

비동기(Asynchronous : 동시에 일어나지 않는)

 - 비동기는 동시에 일어나지 않는다를 의미합니다. 요청과 결과가 동시에 일어나지 않을거라는 약속입니다. 

-> 요청한 그 자리에서 결과가 주어지지 않음

-> 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다.

 

 동기와 비동기는 상황에 따라서 각각의 장단점이 있습니다. 

 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있고, 

 비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있습니다.

 

Ajax란

- 자바스크립트를 이용해서 비동기적으로 브라우저와 서버가 데이터를 주고 받는 방식을 말함

- 새로운 언어나 프레임워크, 라이브러리가 아님, 네트워크 통신 방식을 말함

- Asynchronous Javascript and XML : 자바스크립트로 비동기 통신을 하고, XML 형식으로 데이터 리턴을 받는다는 뜻

- XML 데이터보다 JSON 데이터 포멧을 훨씬 더 많이 사용함

- 자바스크립트를 통해서 서버에 요청을 하고, 서버로부터 데이터를 리턴받음

- DOM을 제어해서 서버로부터 리턴받은 데이터를 가지고 랜더링함

 

[Ajax 사용하면 좋은 점]

- 비동기 통신의 이점 : 통신 후 데이터 바인딩하는 동안 사용자가 어플리케이션을 사용할 수 있음

- 전체 페이지 로딩(페이지 요청)시 모든 데이터를 서버로부터 받는 것이 아니라 필요한 부분을 그때마다 일부분 랜더링 시키는 것이 가능함

- 일부 데이터를 위해 클라이언트가 전체 페이지를 요청하지않아도됨

- 다시 말해 통신 때마다 페이지 전체 리로드를 하지 않음, 그 말은 브라우저 랜더링 엔진이 하는 일이 줄어든다는 것

- 이를 클라이언트 사이드 랜더링이라 함

 

-->브라우저가 리로딩을 하지 않아도 새로운 정보를 받는 방법

ex)

네이버 급상승 검색어

[Ajax 동작방식]

1) 서버로 정보 요청 : 이벤트 발생 -> 핸들러 함수 호출 -> 서버 요청 객체 생성 및 메서드 호출

2) 서버 내부 처리 후 응답 : json 또는 xml 형태로 데이터 전달

3) 응답을 받으면 이벤트 발생(onload), 이벤트의 콜백함수 호출

 

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
} //ajax 함수가 실행된 후 콜백함수만 남는다. 콜백함수가 실행될 때는 이미 ajax함수는 반환하고 콜스택에서 사라진 상태이다.

 

[Ajax 응답 데이터형식 - Json]

- JSON이 등장하게된 배경 : 각기 다른 인코딩, 자릿수 표현 방식 === 데이터 깨짐 현상

=> 데이터 구조화, 데이터 포멧 표준화 : 동일된 데이터셋 - 어느 환경에서나 상관없이 온전한 데이터를 송수신할 수 있음(호환성)

 

{ "bookstore": [ 
{
     "category": "cooking",
      "title" : "Everyday Italian", 
      "author": "Giada De Laurentiis",
      "year": 2005,
      "price": 30.0 
},
 
{        
     "category": "web",
     "title" : "Learning XML ", 
     "author": "Erik T. Ray ",
      "year": 2003 ,
      "price": 39.95
 }
] }
 

- 자바스크립트 객체형식(property - value)과 같다
-json 객체(JSONObject, { property: value } )가 여러개일 경우 json 배열(JSONArray, [  ..... ] )에 담음 

 

---

HTML, CSS, JS, JSP등을 디버깅하기 위해서 필요한 툴

Chrome DevTools - 크롬 개발자 도구

https://developers.google.com/web/tools/chrome-devtools/

Chrome DevTools  |  Tools for Web Developers  |  Google Developers

---