이런 불편한 작업 방식을 대체하기 위해 Node.js는 non-blocking하고 비동기적(asynchronous)로 작동하는 런타임으로 개발하게 됩니다.
JavaScript는 비동기적 실행이라는 개념은 웹 개발에서 특히 유용합니다.
비동기 흐름은 callback, promise, async/await 중 하나의 문법을 이용하여 구현할 수 있습니다.
배열과 객체를 다루는 Underbar를 구현하며 자바스크립트 내장 메소드가 어떻게 callback 함수를 활용하는지 학습합니다.
내용을 학습하기 위해서는 아래 메소드 이해가 필요합니다.
callback은 함수 자체를 연결해야하는 것이지, 함수 실행을 연결하면 안됩니다.
ex) 잘못된 예
function handleClick() {
console.log('button clicked');
};
document.querySelector('#btn').onClick = handleClick();
// 함수 실행을 연결하면 안됩니다. 따라서 () 쓰면 안됩니다.
blocking: 하던 일을 모두 멈춰야 한다. 요청에 대한 결과가 동시에 일어나는 (synchronous) 동기적이다.
non-blocking: 확인 후 나중에 답장할 수 있다. 요청에 대한 결과가 동시에 일어나지 않는다. (asynchronous) 비동기적
특정 요청에 따른 결과(=== 이벤트)가 나왔을 때 알려준다(callback).
ex) 비동기 함수 패턴
let request = 'trade';
orderFundAsync(request, function(response){
//response 는 주문 결과
buy(response);
});
DOM Element의 이벤트 핸들러
비동기를 사용하는 이유?
클라이언트에서 서버에 요청을 보낼 때 클라이언트는 다른 요청을 계속 할 수 있다. 서버에서 작업을 끝내면 클라이언트로 전달해준다.
callback?
다른 함수가 실행을 끝낸 뒤 실행되는 함수를 callback이라고 얘기합니다.
promise
Callback Hell을 피할 수 있는 기술
잘못사용하면 promise Hell을 생성한다..
.than() 을 통해서 계속 이어나갈 수 있습니다.
async await (새롭게 추가된 문법)
promise 함수와 비슷하지만 await을 추가하여 동기적 느낌으로 만들 수 있다.
await을 사용하려면 반드시 async를 추가해줘야 한다.
ex)
/*
함수...
*/
const result = async() => {
const one = await gotoLibrary();
console.log(one);
const two = await sitAndStudy();
console.log(two);
const three = await eatDinner();
console.log(three);
}
result();
setTimeout(function() {
console.log('1초 후 실행');
}, 1000);
setInterval(function() {
console.log('1초 마다 실행');
}, 1000);