[JS] 비동기 프로세싱 시작

이번에는 JavaScript에서 가장 큰 걸림돌인 비동기 처리에 대해 설명합니다.
실제 업무에서 100%의 비동기 처리를 사용하기 때문에 반드시 잘 통제해야 한다.
나는 가능한 한 통속적이고 알기 쉽게 해설할 것이다.

원래 비동기 처리는

먼저 동기화 처리와 비동기화 처리를 설명한다.

동기화 처리

기본적으로 자바스크립트의 코드는 동기화 처리라고 불린다.
동기화 처리에서 코드를 순서대로 처리하고, 처리가 끝날 때까지 다음 처리를 하지 않습니다.
따라서 실행하는 처리는 단 하나, 매우 직관적인 동작이다.
그러나 동기화 처리는 한 처리가 끝날 때까지 다음 처리를 할 수 없기 때문에 문제가 있다.
JavaScript는 기본적으로 브라우저의 주 스레드에서 실행되기 때문입니다.
주 스레드는 업데이트 표시 등 UI와 관련된 처리도 했다.
따라서 무거운 동기화 처리가 있으면 디스플레이를 업데이트할 수 없고 다운됩니다.
요리에 비유하자면.
1. A 군이 썰어주는 재료.
2. 끝나고 B군이 재료를 볶는다.
3. 끝나고 C군이 접시를 준비한다
이런 느낌은 동기화 처리다.
동기 처리라면 B군은 A군의 업무가 끝날 때까지 기다려야 하고, C군은 두 사람의 업무를 기다려야 한다.
같은 시기의 처리 동작은 이해하기 쉬우나, 낭비가 생기기 쉽다.

비동기 처리

다음은 비동기 처리입니다.
비동기 처리는 코드를 순서대로 처리하지만, 비동기 처리가 끝날 때까지 기다리지 않고 다음 처리를 실행합니다.
실행 결과를 기다릴 필요가 없어 방금 말한 브라우저가 다운되는 문제를 해결했다는 것이다.
그리고 기본적으로 API를 사용하는 통신이 발생하는 경우 비동기 처리가 된다는 것을 기억하세요.
아까 요리의 예를 들자면.
1. B군은 A군의 잘랐든 안 끝났든 처리를 수행할 때가 되면 프라이팬으로 볶는다.
2. 그리고 C군도 두 사람의 일이 끝날 때까지 기다리지 말고 접시를 준비하세요.
기다리는 시간이 없어진 것은 사실이지만 비동기 처리 중 B군은 아무런 식재료도 없는 상태에서 요리를 하기 시작할 수도 있다.
이렇게 비동기 처리는 좀 어려운 문장이다.
그래서 역할을 할 수 있는 것은 프로미스와 에이시언스, 어웨이트다.

비동기식 쓰기

위에서 말한 바와 같이 비동기 처리는 좀 처리하기 어렵다.
따라서 Promise와 Async, Await를 사용합니다.
이걸 사용하면...
A군이 재료를 썰어줍니다.
그게 끝나면 B군이 음식을 볶아요.
그리고 C군은 두 사람이 일을 끝내기도 전에 접시를 준비하기 시작했다
말한 이상을 실현할 수 있는 운동.
예를 들어 인상이 있어도 코드는 상상하기 어려우니 다음은 실제 코드로 해설한다.

Promise

Proomise는 new 연산자를 사용하여 인스턴스를 생성합니다.
이 때 Resolve와 Reject 두 파라미터를 상대방에게 건네줍니다.
그리고 비동기 처리가 성공했을 때 Resolve 함수를 호출하고, 실패했을 때 Reject 함수를 호출합니다.
이렇게 설명했지만 잘 기억하지 않아도 돼요.
대부분의 비동기 처리는 원래의 Promise 대상에서 되돌아오기 때문이다.
예를 들어fetch 방법이라는 함수가 있는데 API 통신에서 사용되며 이 함수는Promise 대상을 반환값으로 한다.
따라서 다음에 실행하고 싶은 값은then으로 연결하고 실패할 때의 처리는catch로 연결하면 예상대로 행동합니다.

const promiseFunc = fetch("https://jsonplaceholder.typicode.com/posts/1");
promiseFunc.then((res) => console.log(res)).catch((e) => console.error(e));

아까 요리의 예를 코드에 반영

console.log("A君が仕事を始めた");
const promiseFunc = fetch("https://jsonplaceholder.typicode.com/posts/1");
promiseFunc
  .then((res) => console.log("A君が仕事を終えてB君が仕事を始めた"))
  .catch((e) => console.error(e));
console.log("C君が仕事を始めた");

/* log

A君が仕事を始めた 

C君が仕事を始めた 

A君が仕事を終えてB君が仕事を始めた 

*/

그렇습니다.

Async,Await

다음은 Async 및 Await에 대한 설명입니다.
중요한 건 아까 프로미스가 쉽게 이해가 되고 원리가 똑같아졌다는 거야.
Async Function은 일반 함수와 달리 Promise 인스턴스를 반환해야 하는 함수를 정의하는 구문입니다.
또한 Async Function에서는 await식 Promise라는 비동기 처리가 완료되기를 기다리는 문법을 사용할 수 있다.
await식을 사용하면 동기화 처리처럼 비동기화 처리를 할 수 있기 때문에Promise 연쇄로 이루어진 처리 절차를 쉽게 쓸 수 있습니다.
비동기 함수의 반환 값은 다음과 같은 세 가지 모델로 나뉜다.

Async Function이 값을 반환하면 반환 값이 있는 Fulsfilled Promise

를 반환합니다.

Async Function이 Promise를 반환하면 반환 값의 Promise

를 반환합니다.

Async Function에서 예외가 발생하면 오류가 있는 Reject Promise

를 반환합니다.
따라서 Async, Await를 사용하여 방금 코드를 다시 쓰면 다음과 같다.

async function promiseFunc() {
  const value = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  console.log(value);
  console.log("A君が仕事を終えてB君が仕事を始めた");
}
console.log("A君が仕事を始めた");
promiseFunc();
console.log("C君が仕事を始めた");

/* log

A君が仕事を始めた 

C君が仕事を始めた 

A君が仕事を終えてB君が仕事を始めた 

*/

끝말

이번에는 비동기 처리를 해설했다.
솔직히 어려울 것 같아서 개요만 파악하고 실제 일에 익숙해지면 돼요.
또한 제 블로그에는 React 엔지니어가 되는 로드맵이 무료로 공개되어 있으니 참고하시기 바랍니다.백엔드 엔지니어가 되고 싶은 사람에게도 도움이 된다는 메시지가 적혀 있다.
https://hinoshin-blog.com/react-roadmap/
끝맺다