2oneweek.dev

30. 동기와 비동기 / AJAX란?

June 30, 2021

    Tags

  • JavaScript
30. 동기와 비동기 / AJAX란? thumbnail

동기 비동기 처리

동기 처리

  • 현재 실행중인 처리가 끝나야 다음 처리를 하는 것을 말한다. 자바스크립트는 기본적으로 동기 처리를 한다.

단점

  • 서버에서 이미지 파일을 가져올 때, 이미지를 수신하는 동안, 마우스 클릭 이벤트와 같이 사용자의 행동을 인식할 수 없다. 따라서 이미지가 모두 로드될 때 까지 사용자는 대기해야 한다.

비동기 처리

  • 실행중인 처리가 끝나지 않아도 다른 처리를 할 수 있다. 처리 순서가 엉킬 수 있으므로 이에 대응하는 코드를 작성해야한다.

  • 이미지를 수신하는 동안에도 마우스 클릭 이벤트를 인식할 수 있고, 다른 처리를 할 수 있다.

  • 비동기 처리의 바탕은 Promise다.

  • 비동기 통신과 비동기 프로세스를 다룰 때, 4개의 큰 틀이 있다.

    1. AJAX
    2. XMLHttpRequest
    3. Fetch 여기에서 AJAX와 XMLHttpRequest는 JS에 스펙에는 없지만, 자주 사용되므로 알아두자.


AJAX

  • Asynchronous Javascript XML
  • A New Approach to Web Application이라는 글에서 AJAX라는 개념이 등장했다.(AJAX는 웹을 하나의 어플리케이션으로 바라보자는 관점이다.)

AJAX를 달성하기 위한 기술은 다음과 같다.

  1. DOM을 JS로 작성하여, 사용자와 상호작용하며 DOM요소를 동적으로 변화시킨다.

  2. XML(지금은 JSON)으로 데이터를 변환하고 제어한다.

  3. 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단계가 모두 마무리 되면 데이터를 전송하고 끝낸다.
Written by@2-one-week
현재 블로그 개발 중

GitHubLinkedIn