AJAX란
Asynchronous JavaScript And XML (비동기식 JavaScript와 XML)
JSON, XML, txt, CSV 등 다양한 데이터 포맷을 주고 받을 수 있지만 요즘에는 가벼운 용량과 JavaScript의 일부라는 장점 때문에 JSON
을 더 많이 사용
특징
페이지 새로 고침 없이 서버에 요청
서버로부터 데이터를 받고 작업을 수행
동기식 (Synchronous)
순차적, 직렬적 Task 수행
요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐 (blocking
)
예시) 잠자기 - 밥 먹기 - 씻기 이 task들은 하나가 끝나야 다음 동작을 할 수 있다.
한 행의 코드에서 처리까지 완료되어야 다음 코드를 실행
이런 현상이 나타나는 이유?
Javascript
는 Single Threaded
이기 때문!
Thread
란,thread
는 한 번에 하나의 작업만 수행할 수 있으며,window 객체
)당 하나의 thread
를 갖는다.비동기식 (Asynchronous)
병렬적 Task 수행
요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐 (non-blocking
)
왜 이런(비동기)식으로 일을 처리할까?
사용자 경험
매우 큰 데이터를 동반하는 앱이 있다고 가정했을 때,
모든 코드가 동기식이라면 데이터를 모두 불러온 뒤 앱이 실행됨
즉, 모든 데이터의 로딩이 끝날때까지 앱이 멈춘 것 같아 보이고 응답하지 않는 것 같은 경험을 사용자에게 제공하게 됨
서비스 마케팅 과목에서 고객을 무작정 기다리게 하지 말고, 서비스 과정에 참여시켜서 체감 대기시간을 줄이라는 기법이 있는데 그거와 같은 것!
비동기식 코드라면 데이터를 요청하고 받는 과정에서 지속적으로 응답하는 화면을 보여줌으로써 좀 더 쾌적한 사용자 경험을 제공
때문에 많은 웹 API
기능은 현재 비동기 코드를 사용하여 실행
하지만 JavaScript
는 Single threaded
이다
이벤트를 처리하는 Call Stack
이 하나인 언어이기 때문에,
문제 해결을 위해 JavaScript
는 아래와 같이 동작
Web API
)로 보내서 처리하도록 하고,Task Queue
)에 줄을 세워놓고Call Stack
이 비면 담당자(Event Loop
)가 대기줄에서 가장 오래된 (제일 앞의) 이벤트를 Call Stack
으로 보냄이에 대한 자세한 내용은 추후 업로드....