3. Ajax - FE (1)

1) Ajax 응답 처리와 비동기

• Ajax란, 새로 고침이 일어나지 않고 서버측의 데이터를 브라우저의 화면 전환 없이 서버 측에 어떤 데이터를 별도로 요청해서 받아와서 화면에 그려주는 것입니다.
  어떤 화면이 쭉 보여지다가 앞서 말한 통신 코드가 가서 서버에서 응답을 받아와서 다시 그립니다.
• 사용자 입장에서는 통신 코드가 서버로 갔는지 안 갔는지는 관심이 없습니다. 화면을 차례대로 렌더링하는 중에 일부 데이터에 한해 응답 데이터가 없으면 화면이 멈춰져 있거나 비어있을 것입니다. 그리고 이로 인해 사용자는 불편을 느낄 것입니다.
• 브라우저, 자바스크립트에서 이 방법을 해결하기 위해 Ajax를 사용하였습니다.
  우선 전체적인 화면을 그리는 과정에서 만약 비동기적인 작업, 즉, Ajax와 같은 요청이 존재하면 그 작업을 먼저 보내놓고 나머지 작업을 우선적으로 합니다. 일단 다른 작업을 하고 비동기작업에 대한 응답이 다시 오면 해당 응답 결과를 요구되는 곳에 추가하여 완성합니다. 이런 식으로 자바스크립트 엔진이 동작되고 브라우저에서 렌더링이 이어서 진행되게 되어있습니다.

1. AJAX와 비동기

링크 바로가기

1 2 3 4 5 6 7 8 9 10

function ajax() {    var oReq = new XMLHttpRequest();              oReq.addEventListener("load", function() {     console.log(this.responseText);   });               oReq.open("GET", "http://www.example.org/example.txt");    oReq.send(); }

 

• 4라인의 익명함수는 8라인, 9라인보다 더 늦게 실행되는 함수입니다.
  이 익명 함수는 비동기로 실행되며, 이벤트큐에 보관되다가 load이벤트가 발생하면(서버로부터 데이터를 브라우저가 받으면) 그때 call stack에 실행되고 있는 함수가 있는지 확인하고 없어서 비어있다면 stack에 올라와서 실행됩니다.
• 실제로 addEventListener는 먼저 실행됩니다. 다만 "load" 시점에 이걸 실행해야 하는 것을 알고 이벤트 큐에 보관을 해놓습니다. 그러면 addEventListener의 역할은 끝이 납니다.
  그리고 금방 선택된 콜백 함수는 이벤트 큐, 즉, 메모리 공간에 보관이 됩니다. 그리고 open하고 send가 실행되어 ajax요청으로 보내는 것으로 전송이 됩니다. 그 다음에 ajax라는 함수는 반환이 됩니다.
  그리고 응답이 오면 이벤트 큐에 있던 정보가 ajax에서 빠져나와 실행되는 것입니다.

동기/비동기에 대한 것은 아래 자료를 참고

영상 바로가기

자료 (그림과 코드위주로 이해)

• Synchronous(동기)에서 2번, 3번이 굉장히 느리다면 사용자 입장에서는 매우 답답할 것입니다. 그래서 1번, 2번, 3번, 4번 비동기로 처리하는 것이 훨씬 빠릅니다.
• setTimeout도 ajax와 같이 비동기를 이용한 함수입니다. 시간 초를 0으로 놨다해도 콜백함수는 밖의 동기적인 코드, 즉, 콜스택에 있는 코드가 수행되고 난 후 실행되니 순서에 주의하도록 합니다.
• 아래 그림은 AJAX통신(jQuery라이브러리를 사용한 예제다)을 코드단위로 어떻게 비동기로 처리되는지 보여줍니다.

2. Ajax응답처리

• 서버로부터 받아온 JSON 데이터는 객체 형태로 보낼 수 없으므로 문자열 형태로 받아옵니다. 그리고 이는 브라우저에서 바로 실행할 수가 없습니다. 
• 따라서 문자열을 자바스크립트 객체로 변환해야 데이터에 접근할 수가 있습니다.
• 이를 하려면 문자열 파싱을 일일이 해야 하는 불편함이 있습니다.

var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() {     console.log(this.responseText);  //개발자 도구 - network - response 탭에서 확인 가능 }); oReq.open("GET", "./json.txt"); oReq.send();

 

• 브라우저에서는 JSON객체를 제공하며. 이를 활용해서 자바스크립트 객체로 변환할 수가 있습니다.

var json객체로변환된값 = JSON.parse("서버에서 받은 JSON 문자열"); ex) var json = JSON.parse(this.respnseText);

 

3. cross domain 문제

• XHR통신은 다른 도메인 간에는 보안을 이유로 요청이 안 됩니다. 즉, A도메인에서 B도메인으로 XHR통신, Ajax 통신을 할 수 없습니다.
• 이를 회피하기 위해서 JSONP라는 방식이 널리 사용되고 있습니다.
• 최근에는 CORS라는 표준적인 방법이 제공되고 있어 이를 활용하는 경우도 등장했습니다.
• 서버, 즉, 응답을 주는 쪽에서 A는 OK, B도 OK 이렇게 헤더 값에다가 뭔가를 추가한다거나 허용 가능한 도메인들을 등록하는 과정을 CORS라고 합니다.
• CORS를 사용하기 위해서는 프로그램 코드에서 별도로 해야 할 것이 없고, 백엔드코드에서 헤더 설정을 해야 하는 번거로움이 있습니다.
• JSONP는 아직도 많은 곳에서 사용하는 비표준이지만 사실상 표준으로 사용하는 것으로, CORS로 가기 전에 많은 곳에서 사용 중입니다. 그 사용법을 참고로 알아보면 좋습니다.

생각해보기

• 다양한 웹사이트에서 검색 자동완성 UI에서 어떤 방식으로 데이터를 가져오는지, 크롬 개발자도구의 networks패널을 열고 확인을 해봅니다. 꽤 많은 사이트가 크로스도메인 문제를 해결하기 위해 JSONP방식으로 통신하는 걸 알 수 있습니다.
• 개발자 도구에서 Network 탭을 열고 all을 누릅니다. 검색 창에 cat을 치면 결과가 아래에 나옵니다. 그리고 문자를 추가할 때마다 결과가 계속 바껴서 나옵니다. 이는 서버에서 뭔가 요청을 보내서 응답을 받아오는 것입니다. 그런데 이게 XHR 통신이면, 즉, AJAX 통신이면 XHR탭에 나와야 하는데 안 나옵니다. 그리고 JS탭을 누르면 나옵니다. 왜 그러냐면 아마존이 JSONP 방식으로 만들어진 사이트이기 때문입니다.
• JSONP가 어떻게 되는지는 여러분들이 인터넷에서 조금 찾아서 추가적으로 학습을 하시면 좋고 다른 도메인 간의 통신을 할 때 CORS 설정을 해도 되지만 JSONP로 이렇게 많이 한다는 것을 알아봤습니다.

참고 자료

[참고링크] Using XMLHttpRequest
https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

[참고영상] Philip Roberts: What the heck is the event loop anyway?
https://youtu.be/8aGhZQkoFbQ

[참고링크] Synchronous and Asynchronous
http://www.phpmind.com/blog/2017/05/synchronous-and-asynchronous/