JavaScript 비동기 이해하기

❗️ 공부 중인 사람의 글입니다

일단 공부를 하긴 했으나 아직 내 것이 아닌 게 느껴진다.
무슨 맥락인지 이해는 가는데 코드를 작성하기 어려운 상황이다.

다음 유닛으로 넘어가기 전에 한 번 짚고 넘어가기!!

---

✅ TIL

• 강의 계속 돌려보며 비동기 개념 정리..!
• fetch() (이전포스팅)

---

동기 (synchronous)

: 하나의 작업이 완료되어야 다음 작업이 진행된다 (blocking)
전체 작업 시간이 오래 소요될 수 밖에 없다.

비동기 (asynchronous)

: 하나의 작업이 완료되지 않아도 다음 작업이 진행된다. (non-blocking)
동시다발적으로 데이터를 받아와야하는 업무 처리가 수월해진다.
(ex 백그라운드 실행, 로딩 창 작업, 인터넷에서 서버로 요청을 보내고 응답을 기다리는 작업, 큰 용량의 파일을 로딩하는 작업)
기본적으로 순서 제어가 이루어지지 않고 완료되는 대로 출력되는 개념이다.

Node.js

: 비동기 프로그래밍 컨셉
순차적 작업이 끝나는 것을 기다리지 않고
네트워크 및 파일처리의 작업이 끝나는 것을 기다리지 않는다.

---

비동기 처리

Callback
Promise
async / await (syntactic sugar)
비동기 함수의 순서를 제어하여 동기적으로 처리할 수 있게 해준다.

---

✔️ callback

: 다른 함수의 전달인자로 넘겨주는 함수
forEach, map, filter 등의 iterator 함수
event handler (함수 실행이 아닌 함수 자체를 연결)

//Callback error handling Design
if (error) {
  callback(error, null)
}else {
  callback(null, data)
}


//setTimeout()
const printStirng = (string, callback) => {
    setTimeout(
        () => {
            console.log(string)
            callback()
        }, Math.floor(Math.random() * 100) + 1
    )
}

const printAll = () => {
    printStirng('A', () => {
        printStirng('B', () => {
            printStirng('C', () => {})
        })
    })
}

printAll() //순서대로 출력
>A
>B
>C 

Callback Hell

중첩된 콜백을 사용할 경우 코드의 들여쓰기가 코드의 가독성을 방해한다.

=> 대안으로 promise, async/ await 등장

---

✔️ Promise

new Promise() //인스턴스 객체 생성자

• 중첩된 callback 함수를 대신하여 비동기 함수를 간결하게 작성할 수 있게 해준다.

• resolve, reject 중 하나만 처리된다.
  resolve -> .then 실행
  reject -> .catch 실행 (에러를 잡아준다.)

• .then method 안에서 return을 하지 않으면 undefined가 되기 때문에 그냥 지나치게 된다.
  value든 promise든 return 해주어야 값이 계속 전달된다.
  = promise chain이 원하는 대로 실행된다!

• Promise.prototype.then 메서드는 promise를 return한다.
  => .then method의 return이 undefined여도 promise chaining이 계속 일어나는 이유

• Promise.prototype.catch 메서드는 error을 return한다.
  => catch로 에러를 잡으면 rejected가 아닌 fulfilled상태가 된다.

• .filnally method
  resolve, reject 상관없이 finally 메서드가 실행된다.

---

✔️ async / await

.then 메서드를 대신하여 간결하게 작성할 수 있는 syntactic sugar

const something = async () => {
  const first = await promise1;
  const second = await promise2;
  ...
}

• await는 async 키워드를 앞에 붙인 function 내부에서만 동작한다.
  =>async 키워드가 없을 경우 Syntax error 발생

• await 키워드 뒤에는 promise가 있어야 원하는 대로 promise chain이 이루어질 수 있다.

• await 키워드는 promise가 완료될 때까지 기다렸다가, 해당 값을 return한다. (fulfilled or rejected)
  => 비동기 함수들을 동기적으로 실행할 수 있게 된다.

---

fetch()

Web API
브라우저 환경에서 사용한다.
fetch() method는 promise를 return 한다.
가져오고자 하는 리소스의 경로를 인자로 받는다.

fetch(URL)
.then(response => response.json())

---

더 공부할 것

• .bind(this, ...)

• Event Loop

• Callback Queue

글로 정리하다보니 개념 정리가 잘 된 것 같다..!
앞으로 자주 쓰면서 익숙해져야 할 것 같다
화이팅 진짜 포기하지 말자
나는 프론트엔드 개발자가 될 거야..!!