FE가 되고싶니? 나도✨

비동기 함수 복습

setTimeout() 함수

setTimeout(callback, delay);

1. setTimeout() 이전에 있는 코드 실행
2. setTimeout() 함수 실행 : delay 만큼 기다리는 타이머를 시작
3. setTimeout() 이후에 있는 코드 실행
4. delay가 지나면 callback 실행

asyncFunction() 함수 (사실 함수는 아니고 비동기 함수(async function)를 생성하는 객체이다.)

async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의한다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise 를 사용하여 결과를 반환한다. 그니까 그냥 비동기 함수라고 쳐본다면,

asyncFunction(callback, ...);

asyncFunction()을 호출하고 callback을 전달하는 형태로, 동작은 setTimeout과 비슷하다.

1. asyncFunction() 이전에 있는 코드 실행
2. asyncFunction() 함수 실행 : 특정 조건이 만족되면(ex. 3초가 지나 어떤 '이벤트'가 발생했다.) callback이 실행되도록 한다.
3. asyncFunction() 이후에 있는 코드 실행
4. 특정 조건이 만족되는 시점에 callback 실행

이 흐름만 이해하고 있다면 어떤 비동기 함수든 쉽게 사용할 수 있다. 

자주 사용하는 비동기 함수 TOP 4

1. setInterval() 함수
2. DOM의 addEventListener() 함수
3. React의 useEffect() 함수
4. Express의 get() 함수

setInterval() 함수

setTimeout()과 비슷한 setInterval() 함수로, setInterval() 함수는 시간 간격을 두고 콜백을 반복적으로 실행한다.

console.log('Start');

// setInterval(callback, interval): interval 단위는 밀리초.
setInterval(() => console.log('2초가 지났습니다'), 2000);

console.log('End');

Start
End
2초가 지났습니다
2초가 지났습니다
2초가 지났습니다
2초가 지났습니다
...

(callback은 interval이 지난 후 처음으로 실행된다.)

만약 콜백이 호출되는 것을 멈추고 싶다면 setInterval() 함수의 리턴값을 저장해 놨다가 clearInterval()을 실행하면 된다.

console.log('Start');

const intervalID = setInterval(() => console.log('2초가 지났습니다'), 2000);

// 7초 후에 setInterval() 해제
setTimeout(() => clearInterval(intervalID), 7000);

console.log('End');

Start
End
2초가 지났습니다
2초가 지났습니다
2초가 지났습니다

2초가 지났습니다를 2초마다 출력하지만 7초 후에 clearInterval() 함수가 setInterval() 함수를 해제하기 때문에 2초 지났습니다는 세 번만 출력된다.

DOM의 addEventListener() 함수

addEventListener()는 웹 페이지 요소에 상호 작용이 있을 경우 실행할 함수를 등록한다.

const btn = document.querySelector('.my-btn');

btn.addEventListener('click', () => console.log('button clicked!'));

// ...

자바스크립트로는 웹 페이지의 요소(예: 버튼, 이미지, 문단 등)를 코드로 가져올 수 있는데, 첫 번째 줄에서는 my-btn 클래스를 가진 버튼 요소를 찾아서 btn이라는 변수에 저장했다.

그리고 두 번째 줄은, btn에 클릭('click') 이벤트가 발생할 시 () => console.log('button clicked!') 콜백이 실행되도록 해 줬다. btn.addEventListener() 아래에 있는 코드를 실행하다가 사용자가 btn 요소를 클릭하면 콜백이 실행돼서 'button clicked!'라고 콘솔에 출력되는 동작 방식이다.

React의 useEffect() 함수

function PostList() {
  // ...

  useEffect(() => console.log('render finished!'), []);

  return (
    <div className="post-list">
      <div className="post-item">...</div>
      <div className="post-item">...</div>
      <div className="post-item">...</div>
      ...
    </div>
  );
}

React는 웹사이트 화면을 만드는 데 사용하는 라이브러리이다. React에서는 웹사이트 화면을 컴포넌트(Component) 단위로 분리해서 만든다.

위에서 정의한 PostList()는 어떤 웹사이트의 포스팅 목록에 해당하는 컴포넌트인데, 안에 useEffect()라는 비동기 함수가 있다. 이 함수는 컴포넌트가 모두 화면에 그려지는 시점에 콜백을 실행해 준다.

그러니까 React는 PostList() 함수의 내용을 쭉 실행하고 리턴되는 HTML 요소들을 그리기 시작하는데(화면에 그리는 작업은 시간이 조금 걸린다.) 작업이 완료되고 나면 useEffect()에 등록된 콜백이 실행되고 render finished!라는 메시지가 출력되는 것이다.

지금은 단순히 콜백에서 메시지를 출력하지만 실제로는 웹 리퀘스트를 보내 데이터를 받아 오는 등 다양한 작업을 한다. 콜백을 바로 실행하지 않고 일단 화면을 그리기 때문에 웹 페이지가 더 빨리 로딩되는 것처럼 보이게 할 수 있다.

Express의 get() 함수

app.get('/hello', (req, res) => {
  res.send('Success!');
});

// ...

Express는 서버를 만들 때 사용하는데 서버란 어떤 리퀘스트가 들어오면 리스폰스를 돌려주는 프로그램을 의미한다. 서버는 DOM의 버튼 예시와 비슷하게 리퀘스트가 언제 들어올지를 모르기 때문에 리퀘스트에 대한 처리는 비동기 형태로 한다.

app.get() 함수는 /hello 주소로 GET 리퀘스트가 들어오면 두 번째 아규먼트인 콜백을 실행하는데 콜백은 ‘Success’라는 내용을 담고 있는 리스폰스를 보내준다.

그리고 여기서 재미있는 점은 콜백에 파라미터가 있다는 점이다. 나중에 실행할 콜백에 파라미터가 있는 경우도 많지만 이번 예시의 경우 들어온 리퀘스트 객체(req)와 돌려줄 리스폰스 객체(res)를 파라미터로 받고 있다. 프로그래머는 이걸 이용해서 적절한 리스폰스를 보내면 된다.

1. 비동기 함수는 이후에 있는 코드를 모두 실행하고 콜백을 실행

예를 들어 setTimeout() 함수의 두번째 파라미터로 0을 넘겨준다면? 3000을 적어줬을 때 뜻이 3000밀리초, 즉 3초였기 때문에 0은 바로 실행하라는 뜻이다. 하지만 아래 코드를 실행해보면 결과는 예상한 것과 다르게 나온다.

console.log('1');

setTimeout(() => console.log('2'), 0);

console.log('3');
console.log('4');
console.log('5');
console.log('6');
console.log('7');
console.log('8');
console.log('9');
console.log('10');

1
3
4
5
6
7
8
9
10
2

setTimeout(() => console.log('2'), 0) 아래에 있는 코드들이 먼저 실행되고 콜백이 실행됐다. 비동기 함수의 콜백은 아무리 빨리 실행돼도 비동기 함수 이후에 있는 코드가 모두 실행된 후에 실행된다. 반대로 생각해보면 비동기 함수 이후에 있는 코드가 굉장히 오래 걸려도 그걸 모두 실행하고 콜백을 실행한다는 의미이다.

예시를 바꿔서 실행해도 console.log('2')는 가장 마지막에 실행된다.

console.log('1');

setTimeout(() => console.log('2'), 1000);

// 1초 이상 걸리는 작업들

하지만 대부분의 경우에는 비동기 함수 이후에 코드가 아무리 많다고 해도 비동기 작업이 훨씬 오래걸린다. 콜백의 실행 타이밍이 몇 밀리초 단위까지 중요한 경우는 별로 없기 때문에 문제가 되는 경우는 드물다.

2. 실행할 콜백이 여러 개일 경우, 동기적으로 실행

console.log('1');

setTimeout(() => console.log('2'), 1001);

setTimeout(() => console.log('3'), 1000);

console.log('4');

위 코드의 실행 순서를 잠깐 생각해보자.

우선 1, 4가 출력되는건 예상할 수 있다. 그 이후 콜백이 어떻게 되는지가 관건인데 시간을 잘보면 두번째 setTimeout() 의 콜백이 실행되는 동안 첫번째 setTimeout() 의 타이머가 끝난다. 이런 경우엔 콜백은 동기적(순차적)으로 실행된다.

중요한 점은 비동기 작업이 비교적 오래 걸리는 작업들이라는 것인데, 예를 들면 특정 시간을 기다리거나 사용자의 상호작용을 기다리는 작업, 웹 리퀘스트의 결과를 기다리는 작업들처럼. 이런 비동기 작업들은 병렬적으로 처리되기 때문에 충분히 효율적인 코드를 작성할 수 있다.

자바스크립트에 setTimeout() 함수는 특정 시간이 지난 후에 콜백을 실행하는 함수이다. 기다리는 동안에는 함수 아래에 있는 코드를 실행하고, 첫번째 아규먼트로는 어떤 콜백이든 전달 할 수 있다. 

// ...

setTimeout(callback, delay);

// ...


//함수의 동작은 아래와 같다.
//1. setTimeout() 이전에 있는 코드 실행
//2. setTimeout() 함수 실행: delay 만큼 기다리는 타이머를 시작
//3. setTimeout() 이후에 있는 코드 실행
//4. delay가 지나면 callback 실행

console.log('1');

setTimeout(() => console.log('2'), 3000);
//첫번째 아규먼트로 콜백() => console.log('2')을 받고, 3000밀리초 = 3초가 지나면 이 콜백을 실행해준다.

console.log('3');

1
3
2

위 코드가 비동기 프로그램의 예시이다. 코드가 쓰여져 있는 순서대로 실행되지 않기 때문에.

비동기 실행 순서 설명

1. 일단 console.log('1')이 실행된다.
2. 이후에는 setTimeout 함수가 실행된다. (중요! 이 시점에는 3초 세는 타이머를 시작하기만 하고 바로 다음줄로 넘어간다. 콜백까지 실행 한 다음에 다음줄로 넘어가는 것X)
3. 그래서 일단 console.log('3')이 실행되고
4. 3초가 다되면 setTimeout에 전달된 콜백(console.log('2'))이 실행된다.

코드를 순서대로 실행하는 동기함수 였다고 가정하고 설명

1. console.log('1')이 가장 먼저 실행
2. 이후에는 setTimeout 함수가 실행
3. 타이머를 시작한 후, 3초를 기다린 다음 콜백(console.log('2')) 까지 실행한다.
4. 그러고 난 다음 console.log('3')이 실행된다.

두 프로그램을 비교해보면 비동기 프로그램이 동기 프로그램보다 조금 더 빨리 끝나는것을 확인 할 수 있다. 예시는 차이가 미세해도 setTimeout 이후의 작업이 더 오래걸리는 작업이었거나 더 많은 작업이 있었다면 비동기 프로그램이 훨씬 더 효율적이었을거다.

비동기 프로그램은 오래걸리는 작업이 있을 때 기다리는 동안 다른 작업을 먼저 처리함으로써 시간을 절약해준다.

setTimeout 함수를 비동기 함수(Asynchronous Function)하고 부르는데, 비동기 함수란 함수의 내용을 끝까지 쭉 실행하지 않고 중간에 다른 작업을 처리하다가 다시 돌아와서 마무리 하는 함수를 말한다. 콜백을 이용하면 나중에 해야하는 작업을 함수 형태(위 코드를 예로 들면 () =>  console.log('2') 같은)로 전달해 줄 수 있기 때문에 비동기 함수를 구현하는데 특히 유용하게 쓰인다.

콜백이라는 이름에 대해 생각해보면 call back : '나중에 다시 부르다' 라는 뜻이다. 바깥 함수 안에서 콜백이 언젠가 실행되기 때문에 이런 이름을 가지고 있는 것이다.

• 자바스크립트나 자바스크립트 라이브러리는 다양한 비동기 함수를 제공해준다.
• 제공되는 비동기 함수에 콜백을 넘겨주기만 하면 비동기 프로그램을 구현할 수 있다.