비동기처리와 동기처리의 차이점
?
동기처리(Synchronous) : 클라이언트가 서버에게 데이터 요청을 하면 그 요청에 맞는 응답이 올때까지
다른 작업을 하지 않고(멈춰있음) 기다린다. 그 후에 요청에 맞는 응답을 받게 되면 그제야 다음 요청을 처리한다.
즉, 브라우저는 스크립트가 서버로부터 데이터를 수집하고 이를 처리한 후 페이지 나머지 부분이 모두 로드될 때까지
대기하는 것이다.
비동기처리(Asynchronous) : 클라이언트가 서버에게 데이터 요청을 한 후, 서버가 요청에 맞는 응답을
언제 줄지 모르기 때문에 무작정 기다리지 않고 비동기처리를 한다. 즉, 요청만 보내놓고 응답이 오지 않아도
다음 새로운 요청으로 넘어가버린다. (다른 작업이 가능)
여기서 자바스크립트 언어는 순차적 연산을 거치는 동기처리에 가깝다. 이는 싱글스레드, 콜스택의 특성을
갖고 있기 때문인데 그래서 자바스크립트에선 비동기처리를 활용하는 것이 매우 중요하고,
자바스크립트에서 비동기처리를 하기 위해선 Callback(콜백)함수를 사용해야 한다.
오늘은 Ajax 개념을 설명할 예정이라 다음 포스팅에서 콜백함수와 데이터 타입 중 하나인 JSON에 대해 차근차근 정리하겠다
Ajax란
?
자바스크립트 라이브러리이며 Asynchoronous Javascript And XML의 약자이다.
이는 앞에 나온 비동기처리의 개념이 포함되어 있다.
원래 웹페이지에서 뒤로/앞으로가기, 버튼 등을 클릭하면 새로운 페이지로 전환이 되는데,
여기서 하나의 부분(ex.게시판의 글 목록)만 새롭게 보여주려 할 때 전체 페이지를 함께 새로 고치게 된다.
(= 이를 서버사이드렌더링 방식이라고 한다)
하지만 이 하나의 부분을 로딩하기 위해 페이지 전체를 모두 새롭게 로딩해야 한다는 것은
매우 비효율적(리소스 낭비 발생)이다.
그래서 서버로부터 데이터를 가져와서 전체 페이지를 새롭게 로딩하지 않고 원하는 일부분만 로드하는 방법이 Ajax이다.
이는 브라우저의 XMLHttpRequest 객체를 통해 이용이 가능하고,
클라이언트와 서버 간의 데이터(Html, XML, JSON)를 비동기방식으로 주고받는 기술이다.
Ajax를 사용하면 좋은 점
?
원래 HTTP 프로토콜은 클라이언트 측에 Request(요청)을 보내고 서버 측에서 Response(응답)을 받으면
둘이 이어졌던 연결이 끊긴다. 그래서 이 화면으로 다시 돌아가고 싶다면 다시 앞의 요청과 응답 과정을 반복해야 하는데
앞서 말한 것 처럼 페이지의 일부분만 로드하고 싶어도 이 하나의 부분 때문에 전체를 다 로드해야 한다.
이를 통해 불러와야 하는 이미지, 스크립트 등 많은 양의 리소스가 낭비되는 비효율적인 문제점이 있기 때문에
이를 해결하기 위해 Ajax를 사용한다. XMLHttpRequest 객체를 통해서 서버에 Request(요청) 하고
필요한 데이터만 JSON, XML 형태로 받아오기 때문에 (불필요한 리소스 제외) 효율적으로 사용이 가능하다.
그리고 이는 새롭게 로드되는 부분이 적으므로 웹페이지의 속도 향상에도 기여한다.
Ajax의 장점과 단점
?
장점
- 페이지 전환을 최소화하여 웹페이지 속도 향상
- 서버 측 처리를 기다리지 않고, 비동기적 처리
- 수신하는 데이터양을 줄일 수 있으며, 클라이언트에게 처리를 위임 가능
- 기존 웹과는 다르게 다양한 UI 가능
단점
- 페이지 이동이 없는 통신으로 인해 보안상의 문제
- 요청을 남발하면 역으로 서버의 부하 증가
- XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
- 스크립트로 작성되어 디버깅의 불편함이 존재
Ref.
https://coding-factory.tistory.com/143
https://ko.wikipedia.org/wiki/Ajax
https://visualize.tistory.com/402