스터디/테크톡
[테크 톡 - 3~4주차] 비동기 처리 + AJAX
냠냠쿠
2023. 8. 10. 13:03
728x90
📌 비동기 처리의 정의
- 특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는것
- 동시에 여러가지 작업을 처리 할 수 있고 기다리는 과정에서 다른 함수를 호출 할 수 있음
- 서버가 언제 그 요청에 대한 응답을 할지 모르는 상태에서 다른 코드를 기다릴 수 없을 때 사용
console.log('안녕');
setTimeout(function () {
console.log('하세요');
}, 2000);
// 지연 시간은 밀리초 단위로 기입. 1초 -> 1000
// 2초 후에 콘솔에 "하세요" 출력
console.log('여러분');
- "안녕" 출력
- "안녕 여러분" 출력
- 2초 뒤 "하세요" 출력
🔶 함수 설명
- setTimeout() : 특정 코드를 바로 실행하지 않고 일정 시간 지연 후 실행
- ClearTimeout() : setTimeout()을 취소 시킴
clearTimeout( [식별자] );
📌 자바스크립트 엔진
- Memory Heap : 메모리 할당이 일어나는 곳
- Call stack : 코드 실행에 따라 호출 스택이 쌓이는 곳
◾ 호출 스텍
- 자바스크립트는 단 하나의 호출 스텍만 사용함
- 스택에 쌓인 함수나 코드를 위 → 아래로 차례대로 실행
- 하나의 작업이 끝날 때 까지 다른 작업을 실행하지 않는다.
출처 : https://beomy.github.io/tech/javascript/javascript-runtime/
📌 자바스크립트 런타임
- 자바스크립트 런타임 : 프로그래밍 언어가 구동되는 환경
→ Node.js , 크롬, 파이어폭스 등 - 브라우저에서 제공하는 Web API (DOM, Ajax, setTimeout, 이벤트루프 등) 와 이벤트 등과 함께 동작하면서 런타임이 이루어진다.
→ 비동기 함수 (DOM, setTimeout 등) 은 WEB API를 호출
Web API는 Call back 함수를 Callback Queue에 밀어 넣는다
출처 : https://beomy.github.io/tech/javascript/javascript-runtime/
- Web API : 브라우저에서 제공되는 API. 자바스크립트 엔진에서 정의되지 않았던 setTimeout, Ajax, 메소드, DOM 이벤트 등의 메서드 지원
- Task Queue (Call back Queue) : 이벤트 발생 후 호출되어야 할 콜백 함수들이 대기. 이벤트 루프가 정한 순서대로 줄을 서 있는다.
- 자바스크립트에서 비동기로 호출되는 함수들은 Call Stack 에 쌓이지 않고 Task Queue에 보내진다.
- Event Loop : 이벤트 발생 시 호출할 콜백 함수들을 관리. 호출된 Call back 함수의 실행순서를 결정
📌 콜백 함수
- 코드를 실행 순서에 따라 실행하려고 할 때 사용
- 자바 스크립트에서 함수는 다른 함수의 인자로 쓰일 수도 있고, 어떤 함수에 의해 리턴될 수도 있다. 이 때, 인자로 넘어지는 함수를 콜백이라고한다.
즉, 함수를 등록하기만하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수를 뜻한다.
function fun(callback) {
callback();
}
function callback() {
console.log("안녕하세요");
}
fun(callback);
결과 : 안녕하세요
- fun을 실행 했을 때, 특정 callback 함수가 실행되며, fun에게 제어권이 있다.
◾ 비동기 방식 처리 과정
console.log('안녕');
setTimeout(function () {
console.log('하세요');
}, 2000);
console.log('여러분');
1. 전역 컨텍스트 main() 함수가 Call Stack에 등록 및 console.log('안녕'); 이 Call Stack에 쌓이면서 콘솔에 찍힘
2. console.log('안녕');이 리턴되면서 Call stack에서 제거
3. setTimeout 함수 실행되어 Call Stack에 setTimeout 함수 들어감
4. setTimeout함수는 자바스크립트 엔진이 처리하지않고 Web API가 처리하므로 Callback함수를 전달하고, setTimeout작업을 요청
5. Call Stack에서 setTimeout작업이 제거
6. console.log('여러분'); 이 호출되어 Call Stack에 쌓이고 콘솔에 찍힘
7. console.log('여러분'); 이 리턴되면서 Call stack에서 제거
8. main() 함수가 리턴되면서 Call stack에서 제거
9. Web API에서 setTimeout 작업을 실행 - 3초 후 Task Queue로 Callback 함수를 보낸다.
10. Event Loop는 Call Stack이 비어있으면 Task Queue에서 함수를 하나씩 꺼내 Call Stack에 넣고 실행
11. console.log('하세요'); 이 호출되어 Call Stack에 쌓이고 콘솔에 찍힘
12. console.log('하세요'); 가 리턴되면서 Call stack에서 제거. Event Loop는 Task Queue에 콜백 함수가 들어올 때까지 계속 대기
- 만약에 Call Stack 에 함수들이 너무 많이 들어있으면 3초 후 실행되지 않을 수 있음
→ Event Loop는 Call Stack이 비어있을 때에만 Task Queue의 함수를 Call Stack으로 가져오기 때문
→ setTimeout() 시간이 정확하지 않을 수도 있다.
📌 AJAX
- 자바스크립트의 라이브러리중 하나이며 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
- 자바스크립트를 통한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고 받는 기술
즉, 자바스크립트를 통해 서버에 데이터를 요청
◾ 동작원리
출처 : http://www.tcpschool.com/ajax/ajax_intro_works
① 사용자에 의한 요청 이벤트가 발생
② 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출
③ 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냄
이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리 능④ 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리
◾ AJAX의 장점
- 웹 페이지를 다시 로딩하지 않고 일부분만 갱신 가능
- 웹 페이지가 로드된 후 서버로 데이터 요청을 보내거나 받을 수 있음
- 백 그라운드 영역에서 서버로 데이터를 보낼 수 있음
◾ AJAX의 한계
- 실시간 서비스에는 한계가 있다. - 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하기 때문
- 바이너리 데이터를 보내거나 받을 수 없음
- Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수 없음
- 클라이언트의 PC로 Ajax 요청을 보낼 수 없음.
🔶 클라이언트 풀링 (client pooling)
- 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식
🔶 서버 푸시 (server push)
- 사용자가 요청하지 않아도 서버가 알아서 특정 정보를 자동으로 제공
◾ AJAX의 프레임 워크의 종류
- Prototype
- script.aculo.us
- dojo
- jQuery
728x90