비동기 처리 다루기

동기적 ( Synchronous )

• 작업이 순차적으로 진행되는 것.
• 정해진 순서에 맞게 코드 실행.
• 작업을 동기적으로 처리하게 된다면, 한 작업이 끝날 때 까지 다른 작업을 할 수 없음.
• 1번이 끝나야 2번이 시작됨. ( 1끝-> 2끝-> 3끝-> 4 )
• 호이스팅(hoisting)이 된 이후부터 코드가 우리가 작성한 순서에 맞춰서 하나씩 동기적으로 실행!
  

✨ 호이스팅 ( hoisting ) 
      - var변수, 함수 선언들이 자동적으로 제일 위로 올라가는 것.
      - 선언들이 제일 위로 올라가는 것. 
      - 호이스팅이 된 이후부터 코드가 나타나는 순서대로  자동적으로 실행됨!

> 코드

function time(){
    const start = Date.now();
    for(let i=0;i < 1000000000; i++){
    
    }
    const end = Date.now();
    console.log(end - start + 'ms' );
}

time();
console.log('next work');

> 출력

521ms
next work

📍 time함수가 실행되는 동안은 코드의 흐름 멈춰있다가 끝나고 난 뒤 'next work'가 출력된다.
📍 time함수가 진행되는 동안 다른 작업도 하고싶다면!? 함수를 비동기형태로 전환해줘야함!!

---

비동기적 ( Asynchronous )

• 비동기적으로 코드가 언제 실행되는지 예측할 수 없는 것,.
• 작업을 비동기적으로 처리한다면, 코드를 실행할 때 흐름 멈추지 않음.
• 동시에 여러가지 작업처리가 가능하고, 기다리는 과정에서 다른 함수를 호출 할 수도 있음.

🔎 setTimeout

위의 동기적 예제 함수를 비동기형태로 전환하기 위해 setTimeout사용하기!

✨ setTimeout 
- 브라우저에서 제공되어지는 API로, 우리가 지정한 시간이 지나면 우리가 전달한 함수 callback함수를 호출하는 것.
- handler, timehandler이라는 callback함수를 전달해주고, 어느 정도 시간을 timeout할건지 시간을 지정해주는 인자들이 있다.

> 코드

function time(){
	setTimeout(()=>{
    const start = Date.now();
    for(let i=0;i < 1000000000; i++){
    
    }
    const end = Date.now();
    console.log(end - start + 'ms' );
    },0)
    
}
console.log('start');
time();
console.log('next work');

> 출력

start
next work
526ms

📍
1) start가 출력되고난 다음,
2) time함수가 실행되는 동안 다음작업인 'next work'가 출력이 되고,
3) time함수가 실행됨.

---

🔎 callback 함수

time함수가 끝난 다음 어떤 작업을 하고싶다면?! callback 함수를 파라미터로 전달해주면 됨!

✨callback 함수
- 함수 타입의 값을 파라미터로 넘겨줘서 파라미터로 받은 함수를 특정 작업이 끝나고 나서 호출해주는 것.
- 우리가 전달해 준 함수를 나중에 불러줘~~ 라는 개념.

> 코드

function time(callback){
	setTimeout(()=>{
    const start = Date.now();
    for(let i=0;i < 1000000000; i++){
    
    }
    const end = Date.now();
    console.log(end - start + 'ms' );
    callback(end - start)
    },0)
    
}
console.log('start');
time((ms)=>{
    console.log('End!!!');
    console.log(ms + 'ms 걸렸어요.');
});
console.log('next work');

> 출력

start
next work
518ms
End!!!
518ms 걸렸어요.

📍
1) start가 출력되고난 다음
2) time함수가 실행되는 동안 다음작업인 'next work'가 출력.
3) time함수가 실행되면서 '518ms'이 출력되고,
4) callback함수가 호출

---

🔎 대표 비동기작업 처리

🔊 Ajax Web API 요청
: 만약 서버쪽에서 데이터를 받아와야 한다면, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야하기 때문에 이를 비동기작업으로 처리!

🔊 파일 읽기
: 파일을 읽어와야 하는 경우에도 비동기작업으로!

🔊 암호화 / 복호화
: 암호화, 복호화를 할 때 시간이 걸리는 경우가 있기 때문에!

🔊 작업 예약
: 몇 초 후에 해야한다 ~~!