동기 비동기 처리
동기 처리
- 현재 실행중인 처리가 끝나야 다음 처리를 하는 것을 말한다. 자바스크립트는 기본적으로 동기 처리를 한다.
단점
- 서버에서 이미지 파일을 가져올 때, 이미지를 수신하는 동안, 마우스 클릭 이벤트와 같이 사용자의 행동을 인식할 수 없다. 따라서 이미지가 모두 로드될 때 까지 사용자는 대기해야 한다.
비동기 처리
-
실행중인 처리가 끝나지 않아도 다른 처리를 할 수 있다. 처리 순서가 엉킬 수 있으므로 이에 대응하는 코드를 작성해야한다.
-
이미지를 수신하는 동안에도 마우스 클릭 이벤트를 인식할 수 있고, 다른 처리를 할 수 있다.
-
비동기 처리의 바탕은 Promise다.
-
비동기 통신과 비동기 프로세스를 다룰 때, 4개의 큰 틀이 있다.
- AJAX
- XMLHttpRequest
- Fetch 여기에서 AJAX와 XMLHttpRequest는 JS에 스펙에는 없지만, 자주 사용되므로 알아두자.
AJAX
- Asynchronous Javascript XML
- A New Approach to Web Application이라는 글에서 AJAX라는 개념이 등장했다.(AJAX는 웹을 하나의 어플리케이션으로 바라보자는 관점이다.)
AJAX를 달성하기 위한 기술은 다음과 같다.
-
DOM을 JS로 작성하여, 사용자와 상호작용하며 DOM요소를 동적으로 변화시킨다.
-
XML(지금은 JSON)으로 데이터를 변환하고 제어한다.
-
XMLHttpRequest를 사용하여 비동기로 데이터를 송수신한다.
AJAX === XMLHttpRequest
라고 잘못 알고 있는 경우가 있는데, AJAX에선 데이터를 비동기로 수신하기 위한 수단으로 XMLHttpRequest를 사용한다는 것이다.- XHR이란? 동기, 비동기 통신을 지원하는 오브젝트다.
위의 모든 기능을 Javascript를 사용하여 하나로 구성한 것이 AJAX다. XMLHttpRequest를 이용하여 데이터를 비동기로, JSON형태로 받은 후에, DOM을 동적으로 만들어 HTML과 CSS에 적용하자는 것이 AJAX다. 즉 웹을 하나의 어플리케이션으로 바라보자는 것이다.
Ajax 애플리케이션 모델
Classic Web Application Model
- AJAX 이전의 방법
- 브라우저에서 서버로 HTTP Req를 보내면, 서버에서 모든것을 처리하여 HTML+CSS 데이터를 브라우저에 전송해주고
- 브라우저는 단지 이것을 보여주는 역할만을 했다.
- 모든 것을 서버에서 처리하므로, 사용자가 증가하면 서버처리가 증가하고 통신 트래픽에 부하가 걸렸다.
AJAX Web Application Model
<form>
태그와 같이 UI가 발생하면, 자바스크립트가 에러 체크, 데이터 추출 등을하여 JSON 형태로 데이터만을 HTTP Req에 담아 서버로 전송한다.- 서버는 데이터베이스 관련 처리를 하고, 처리결과를 담은 데이터만을 HTTP Res에 담아 브라우저로 전송한다.
- 브라우저는 받은 데이터를 통해, HTML, CSS, DOM, JS로 콘텐츠를 표현한다.
MVC (Model - View - Control)
M : Model
- 비즈니스 로직
"유저 아이디는 반드시 입력해야 된다."
와 같은 것이 비즈니스 로직이다.
- 비즈니스 로직은 일반적으로 서버에서 처리하지만, 보안을 요구하는 처리는 클라이언트 사이드에서도 처리한다.
V : View
- 콘텐츠 표현과 사용자 인터페이스
C : Control
- Model과 View를 제어한다.
- 서버와 클라이언트 모두에서 사용된다.
동기, 비동기 모델
Classic(Synchronous 동기) 통신 모델
- 동기 모델은, 브라우저와 서버가 연결된 상태를 말한다.
- 동기식 처리와 비슷하게, 동기 모델은
브라우저 -> 서버 -> 브라우저
사이에 모든 처리가 끝나야 연결이 해제된다. - 사용자의 동작에 의해, 요청을 보내고 위의 모든 처리가 끝날 때 까지 사용자는 대기해야 된다.
AJAX(Asynchronous 비동기) 모델
- 사용자에 의해
브라우저 -> 서버
로 데이터를 전송하고 연결을 끊는다. - 연결된 상태가 아니므로, 브라우저에서는 다른 처리가 가능해진다.
- 서버에서 처리 상태가 발생할 때마다, 상태를 브라우저로 전송한다.
- 서버의 처리는 4단계로 나눠진다. 각 단계가 처리될 때마다 서버는 브라우저와 연결을 하고 상태를 전송을 한 후, 바로 연결을 끊는다.
- 단계마다, 데이터를 받은 브라우저에서는 이벤트가 발생하게되고, 자바스크립트로 작성된 핸들러가 동작하여 상태를 체크하게 된다. (XHR 오브젝트를 자바스크립트로 처리하는 것이다.)
- 서버는 4단계가 모두 마무리 되면 데이터를 전송하고 끝낸다.