3장. 자바스크립트에서 비동기 처리 다루기
1. 비동기
1) 비동기
비동기 : 동시에 여러가지 작업 처리
2) setTimeout 함수
function work() {
setTimeout(() => {
const start = Date.now();
for (let i = 0; i < 1000000000; i++) {}
const end = Date.now();
console.log(end - start + 'ms');
}, 0);
}
console.log('작업 시작!');
work();
console.log('다음 작업');setTimeout 함수는 첫 번째 파라미터에 넣는 함수를 두 번째 파라미터에 넣은 시간이 흐른 후 호출
setTimeout을 사용하면 작업이 background에서 수행되기 때문에 기존의 코드 흐름을 막지 않고 동시에 다른 작업 진행 가능
3) 콜백 함수
callback 함수 : 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출해 주는 것 의미
function work(callback) {
setTimeout(() => {
const start = Date.now();
for (let i = 0; i < 1000000000; i++) {}
const end = Date.now();
console.log(end - start + 'ms');
callback();
}, 0);
}
console.log('작업 시작!');
work(() => {
console.log('작업이 끝났어요!')
});
console.log('다음 작업');
setTimeout()의 작업이 background에서 수행되기에 '다음 작업'이 먼저 출력됨
4) 주로 비동기적으로 처리하는 작업
Ajax Web API 요청: 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다.
파일 읽기: 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 비동기적으로 처리합니다.
암호화/복호화: 암호화/복호화를 할 때에도 바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문에 비동기적으로 처리합니다.
작업 예약: 단순히 어떤 작업을 몇초 후에 스케쥴링 해야 하는 상황에는, setTimeout 을 사용하여 비동기적으로 처리합니다.
