자바스크립트의 동기적 처리와 비동기 처리

자바스크립트(JavaScript)의 동기적 처리와 비동기 처리에 대한 글입니다!!!!!!!!

먼저!@!

동기적 처리는 뭐고, 비동기적 처리는 뭔지 알고 있으신가요? 저는 몰랐습니다만?;;;; ㅎㅎ

동기적 처리 => 순서대로 줄을 서서 한 명씩 일을 처리하는 것과 같습니다.

1) 코드가 한 줄씩 위에서 아래로 실행됩니다.

2) 이전 코드가 완료되지 않으면 다음코드가 실행되지 않습니다.

3) 따라서 느린 코드가 있으면 전체 속도가 느려집니다.

비동기 처리 => 여러 일을 동시에 처리하는 것과 같습니다.

1) 코드가 요청되면 즉시 다음 코드로 넘어갑니다. (요청 후 처리가 끝나지 않아도 넘어감!)

2) 요청된 작업은 다른 *스레드에서 수행되고, 완료되면 *콜백 함수를 통해 결과를 알려줍니다.

*스레드는 실행되는 작업 단위(가볍게 일1, 일2 이런 느낌)

*콜백 함수는 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출을 해주는 것을 의미한다.

3) 따라서 느린 코드가 있어도 다른 작업 처리에 영향을 미치지 않습니다.

---

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

work();
console.log('다음 작업');

Date.now()는 현재 시간을 숫자 형태로 가져오는 자바스크립트의 내장함수다.

work 함수는 1,000,000,000번 루프를 돌고, 이 작업이 얼마나 걸렸는지 알려준다.

work()함수가 호출되면 for문이 돌아가는 동안 온전히 for문만 실행되고 있다. 이 작업이 진행되는 동안 다른 작업도 하고 싶다면 함수를 비동기 형태로 전환해주어야 하는데, 이를 위해 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 함수는 첫 번째 파라미터에 넣는 함수를 두 번째 파라미터에 넣은 시간(ms단위)이 흐른 후 호출해준다.

지금은 두번째 파라미터에 0을 넣었다. 따라서 이 함수는 0초 후 실행, 바로 실행이 된다.

*타이머 함수는 중첩이 가능하다. 그런데 중첩이 5번 이상이 되면 각각 지연되는 시간이 필요하다. 지연 시간은 최소 4ms(밀리초)이어야 한다.

결과를 보면, for문이 실행되는 동안 '다음 작업'이 출력되고 몇 ms가 걸렸는지 나타나고 있다.

만약 work함수가 끝난 뒤에 작업을 처리하고 싶다면 어떻게 해야 할까?

=> 콜백 함수를 파라미터로 전달해줘야 한다.

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('다음 작업');

여기까지가 자바스크립트의 비동기 작업에 대한 정리였다.

---

그렇다면 비동기적 처리는 언제 사용이 되는건가?

API 요청 : 만약 서버쪽에서 데이터를 받아와야 할때, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야되기 때문에 작업을 비동기로 처리해야한다. => 다음 포스팅 글에서 다룹니다!

파일 읽기 : 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 피동기적으로 처리합니다.

암호화/복호화 : 암호화/복호화를 할 때에도 바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문에 비동기적으로 처리합니다.