Ajax(Asynchronous Javascript AND XML)
자바스크립트 라이브러리 중 하나
자바스크립트를 통해서 비동기식으로 서버에 데이터를 요청하여 필요한 데이터를 받아와 전체 페이지를 고치지 않고 변경이 필요한 페이지 부분만을 고치는 기법
동기 VS 비동기
동기식은 요청 후 응답을 받아야지만 다음 동작이 이루어지고,
비동기 식은 요청을 보낸 후 응답과는 상관없이 동작하는 방식이다 = 쓰레드나 프로세스가 여러개 돌아가고 있다, 즉 멀티 태스킹이 구현되고 있다.
callback함수
function asyncBlackBeanTimer (seconds) {
console.log("배달완료");
setTimeout(
function(){
console.log("식사완료");
}
seconds * 1000
);
console.log("배달부떠남");
}
asyncBlackBeanTimer(1);여기서 실행 순서는 배달완료->배달부떠남->식사완료다
이런 식으로 비동기로 주어진 일을 다 마친 다음 실행하도록 세팅된 이름없는 함수(function())를 콜백 함수라고 한다. (다 드신 후 '식사 완료'라고 callbaclk 해주세요)
자바스크립트는 싱글스레드(스레드 하나만 돌아감)인데?
자바스크립트는 웹브라우저나 Node.js의 자바스크립트 엔진에서 실행된다.
이 엔진에는 자바스크립트를 돌리는 하나의 쓰레드와(자바 전용 특급선로) Web API가 함께 동작한다.
Web API는 타이머사용 작업이나, Ajax로 http 요청을 보내거나, 파일에서 데이터를 읽어오는 등 시간을 소요하는 작업을 수행한다.
예를 들어, Web API에 해당하는 태스크가 선로 진입부에 들어오면, ->
컴퓨터는 이 열차를 자바스크립트용 특급선로가 아닌, 브라우저나 node js에서 운영하는 비동기 작업용 선로에 올려 놓는다. (이 선로는 한번에 여럿이 만들어 질 수 있고 열차들은 보통 콜백 열차칸을 뒤에 달고 있다.) ->
시간이 걸리는 이동을 다 마친 열차들은 비동기 처리 톨게이트에 도착한 순서대로 Task Queue라는 하나의 선로에 콜백칸을 올려놓는다. ->
콜백칸들이 도착하는 대로 특급 선로에 올려서 콜백 함수들이 자바스크립트에서 실행되도록 하는 이 장치를 이벤트 루프라고 한다.
Promise
콜백 안에 콜백 .. 콜백지옥을 해결하기 JS는 ES6버전부터 Promise를 도입한다
function 학생정보조회 Promise (학생,학번){
return new Promise(function(resolve, reject){
ajax(baseUrl + "student-info/" + 학생_학번,
function(response){
resolve(response);
});
});
}비동기 작업을 수행하는 함수가 프로미스의 객체를 반환하는데 그 생성자의 인자로 들어가는 함수에, (2~5)
첫번째 인자로는 수행할 비동기 작업, (3)
두번째 인자로는 그 결과물을 콜백함수에 전달하는 함수가 들어간다. (4~5)
즉 promise란, 비동기 작업을 마치면(then) 이 콜백을 수행하라는 약속
ES7부터는 async/await 기능을 통해 프로미스로 작성한 코드들을 한층 간결하고 직관적으로 수행할 수 있도록 한다. 차후 보충
참조 블로그
[얄팍한 코딩사전] https://www.youtube.com/watch?v=m0icCqHY39U
