비동기란?

1. 동기적(synchronous) VS 비동기적(asynchronous)

1-1. 동기

• 동기식 처리는 한번에 한 작업만, 하나의 main thread에서 순차적으로 작업이 진행되며 처리될 수 있다. 그리고 다른 작업은 앞선 작업이 끝나야 수행된다.
• 참고로 자바스크립트는 싱글 thread이다. 컴퓨터가 여러개의 CPU를 가지고 있어도 main thread라 불리는 단일 thread에서만 작업을 할 수 있다.
• 이러한 동기적 처리로 인해 blocking이 일어나 사용자에게 답답함을 주거나 작업이 중단되는 현상을 일으킬 수 있다.

1-2. 비동기

• 비동기적 처리는 앞선 작업의 마침과 관계없이 다음 동작을 실행할 수 있는 방식을 말한다.
• 비동기적 실행의 개념은 특히 웹개발에서 유용하다. 인터넷에서 서버로 요청을 보내고 응답을 기다리거나 큰 용량의 파일을 로딩하는 작업에서 매우 효율적이기 때문이다.
• 비동기 작업은 event queue에 들어간다. 그리고 main thread가 끝난 후 실행되어 후속 JavaScript코드가 차단되는 것을 방지한다.

2. Callbacks & Promise

• JavaScript에서 볼수 있는 2가지 비동기 스타일은 callback(예전방식), promise(새로운 방식)이 있다. (async/await까지 고려하면 3가지가 있다.)

2-1. Callbacks

• 코드 실행을 시작할 함수를 호출 할 때 인수로 지정된 함수이다. 백그라운드 실행이 끝나면 callback 함수를 호출하여 다음 작업을 실행하게 하는 것이다.
• callback 함수를 다른 함수의 인수로 전달할 때, 함수의 참조를 인수로 전달할 뿐이지 즉시 실행되지는 않고, 함수의 body에서 호출된다. 정의된 함수는 때가 되면 callback함수를 실행하는 역할을 한다.
• callback은 함수가 실행되는 순서,함수 간에 어떤 데이터가 전달되는지 제어할 수 있다. 또한 상황에 따라서 다른 함수로 전달할 수도 있다.

2-2. Promises

• callback보다 가독성이 좋다. 그리고 내부적으로 예외처리에 대한 구조가 탄탄하기 때문에 오류가 발생했을 때 오류 처리 등에 대해 보다 가시적으로 관리해 줄 수 있는 장점이 있다.

• Promise는 비동기 작업이 성공했는지 혹은 실패했는지를 나타내는 하나의 오브젝트이다. Promise 객체는 비동기 연산을 수행하고, 연산이 종료되면 결과를 알려주기 위해 사용된다. 비동기 연산결과를 알려주겠다고 '약속'한다고 생각하면 된다.

• new Promise에 전달되는 함수는 executor(실행자, 실행함수)라고 부른다. executor는 new Promise가 만들어질때 자동으로 실행된다.

• 이는 최종 결과를 바로 반환하지 않고, 비동기 연산이 종료된 후 결과값이나 실패 이유를 처리하기 위해 사용된다. 성공여부를 알려면 '.then()'메소드를 사용해야한다.

• Promise는 3가지 상태를 가질수 있다.

  • 대기(pending): 이행하거나 거부되지 않은 초기 상태
  • 이행(fulfilled): 연산이 성공적으로 완료됨
  • 거부(rejected): 연산이 실패함

• 상태는 처음에 "pending"(보류)이었다가 resolve가 호출되면 "fulfilled", reject가 호출되면 "rejected"로 변한다.

• 결과는 처음에 undefined이었다가 resolve(value)가 호출되면 value로, reject(error)가 호출되면 error로 변한다.

• executor의 인수는 2개가 있다. resolve 함수 & reject 함수 (JavaScript가 자체 제공하는 callback이다.)

• 비동기 작업을 마친 뒤 성공하면 첫번째 parameter인 resolve함수를 호출 하고, 실패하면 두번째 parameter인 reject 함수를 호출한다.

3. async & await

• async와 await라는 문법을 사용하여 Promise를 더 편하게 사용할 수 있다. Promise.then보다 좀 더 세련되게 Promise의 result 값을 얻을 수 있도록 해준다.
• function앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다. 화살표 함수의 경우, 전달되는 인수 앞에 async를 써주면 된다.
• await를 써주면 await 뒤에 있는 작업은 Promise가 처리될 때까지 기다린다. Promise가 처리되면 그 결과와 함께 실행이 재개된다.
• await는 async함수 안에서만 쓸 수 있다.