JS 공부 중 또 하나의 난관

올 것이 왔다. JS를 공부하면서 어려운 이해하기 어려운 내용들이 많이 나오는데 비동기는 그 중 하나이다. 사실 개념 자체는 어렵지 않은데 코드 작성 방식과 처리 되는 메커니즘 이해가 쉽지는 않다. 일단 많이 사용해보고 익숙해져야 할 듯 싶다.

Promise 객체: 약속의 객체

비동기 처리 할 때 가장 많이 쓰는 것이 Promise 객체이다.
이름에서 알 수 있듯이 코드의 실행순서를 약속해준다.

비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. - MDN

MDN에서의 Promise 정의인데, 역시나 처음 보고 한번에 이해되지 않는다.

경험상 비동기는 예시 코드를 뜯어보아야 그나마 이해가 잘됐다.

function a() {
  return new Promise((resolve) => {
    // resolve가 실행이 되는 위치가 기다림이 종료되는 위치
    setTimeout(() => {
      console.log('A')
      resolve()
    }, 1000)
  })
}

위 코드는 a() 함수를 정의 한 것이고 return으로 Promise 객체를 반환한다. Promise 객체를 생성할 때는 두 개의 인수를 넣을 수 있는데, 첫 번째 인수는 resolve이다.

여기서 잠깐, 비동기를 왜 쓰는지 목적을 분명히 생각하고 그것을 끝까지 끌고 가야한다.
비동기는 코드의 순서를 보장하기 위한 것이다.

코드를 보자면, a() 함수를 출력할 경우 setTimeout() 함수를 통해 1초 뒤에 'A'가 출력될 것이다.

여기서 resolve는 console.log('A')가 출력 된 이후에 실행된다.
'A'가 출력되고 나서 resolve 코드가 실행되도록 보장해주는 것이다.

function test() {
  const promise = a()
  promise.then(() => {
    console.log('B')
  })
}

위 코드를 보면, test() 함수를 실행할 경우 a() 함수는 promise 객체를 반환해 promise 변수에 담고 promise 객체는 뒤에 .then() 메서드를 쓸 수 있는데 이것이 resolve()가 실행되는 위치와 같다.

즉, a() 함수의 resolve 위치의 코드를 .then 메서드로 실행 가능하다는 것이다.

코드를 조금 더 간단히 정리하면

// 메서드 체이닝으로 간단히 표현
function test() {
  a().then(() => {
    console.log('B')
  })
}

a() 함수는 promise 객체를 반환하므로 바로 .then()을 이어 붙일 수 있다.

ECMA 2015 이후에 나온 async await로 표현하자면

async function test() {
  await a()
  console.log('B')
}
test() // A 나오고 B

이렇게 표현할 수 있다. 조금 더 간단하게 코드를 작성할 수 있다.

비동기 처리

그렇다면 비동기 처리인 Promise 객체와 async await는 언제 쓰이는가?

앞에서 설명 했듯이 목적은 코드의 실행순서 보장이다.

실행순서를 보장하는 것은 콜백으로도 가능하긴 한데,
계속된 콜백은 코드의 가독성을 떨어뜨리고 성능저하 및 리팩토링이 어렵다.

그것을 쉽게 만들기 위해 Promise를 쓰고 더 최근 형태의 비동기 방식인 ascyn awiat를 쓰는 것이다.

어떤걸 쓰기에 앞서 '그냥 쓰니깐 쓰지 뭐~' 라고 생각하기 보다는 목적과 왜 쓰이는지를 분명히 알아야 더 나은 코드를 작성할 수 있을 것이다.

활용

function a() {
  return new Promise((resolve) => {
    // resolve가 실행이 되는 위치가 기다림이 종료되는 위치
    setTimeout(() => {
      console.log('A')
      resolve()
    }, 1000)
  })
}

function b() {
  return new Promise((resolve) => {
    // resolve가 실행이 되는 위치가 기다림이 종료되는 위치
    setTimeout(() => {
      console.log('B')
      resolve()
    }, 1000)
  })
}

function c() {
  return new Promise((resolve) => {
    // resolve가 실행이 되는 위치가 기다림이 종료되는 위치
    setTimeout(() => {
      console.log('C')
      resolve()
    }, 1000)
  })
}

function d() {
  return new Promise((resolve) => {
    // resolve가 실행이 되는 위치가 기다림이 종료되는 위치
    setTimeout(() => {
      console.log('D')
      resolve()
    }, 1000)
  })
}

function test() {
  a()
    .then(() => {
      return b() // b() 함수는 실해되면 promise 객체가 나오고 그것을 반환하여 체이닝 형태로 작성가능
    })
    .then(() => {
      return c()
    })
    .then(() => {
      return d()
    })
    .then(() => {
      console.log('Done!')
    })
}

• 목적: a(), b(), c(), d() 함수의 실행순서를 보장하고 싶다.
• 활용: Promise 객체(약속의 객체 활용, 코드의 실행순서를 약속해줘!)

test() 함수를 출력함으로써 a, b, c, d 함수를 차례대로 출력하는 코드이다.

각각 Promise 객체를 반환하도록 했기 때문에 바로 체이닝 형태로 .then()을 활용한 모습이다.

화살표 함수 뒤가 코드 한 줄 이므로 더 간단히 표현하자면

function test() {
  a()
    .then(() => b())
    .then(() => c())
    .then(() => d())
    .then(() => console.log('Done!'))
} // a, b, c, d 함수 순서대로 출력됨

.catch(), .then(), finally()

Promise 객체는 3가지 형태로 코드를 처리할 수 있다.

• .then()은 위 예시에서 봤듯이 resolve를 실행하는 위치와 똑같이 .then()을 통해 실행하게 하는 것이다.

• .catch()

바로 예시부터 보자면

// .catch()
function a(number) {
  return new Promise((resolve, reject) => {
    // 정상적으로 실행되지 못할 때 reject가 반환됨
    if (number > 4) {
      reject()
    }
    // resolve가 실행이 되는 위치가 기다림이 종료되는 위치
    setTimeout(() => {
      console.log('A')
      resolve()
    }, 1000)
  })
}
a(5) // 조건문에 걸려 reject()가 출력된다. 

위에서 Promise 객체는 두 가지 인수를 받는다고 했는데,
코드가 제대로 실행 될 경우 resolve를 출력하고 제대로 실행되지 못한다면 reject를 출력하게 하여 예외처리를 할 수 있다. 위 코드와 같이 특정 조건에 따라 호출되게 할 수 있다.

• finally는 resolve가 출력되든지 reject가 출력되든지 최종적으로 실행되는 구문이다.

function test() {
  a()
    .then(() => {
      // .then()은 resolve()가 실행되는 위치와 동일 즉, 특정 시점의 실행 시키는 것을 보장
      console.log('Resolve')
    })
    .catch(() => {
      // .catch()는 reject()가 실행되는 위치와 동일 즉, 특정 시점의 실행 시키는 것을 보장
      console.log('Recject')
    })
    .finally(() => {
      console.log('Done') // .then이나 혹은 .catch 실행되고 나서 마지막으로 실행됨.
    })
}

이렇게 Promise의 세가지 상태는
에러가 났을 경우 처리하기 위해 사용한다.

aync await는 그럼 어떻게?

Promise는 뭐 알겠고.. 그럼 async await는 뭔데?!

사실 Promise가 코드의 순서를 보장해주고 콜백지옥을 해결하기 위해 나왔지만,
쓰다보면 Promise 또한 콜백 지옥의 코드 형태가 나타나기도 한다.

// Promise에서 나타나는 콜백지옥의 모습
function test() {
  a().then(() => {
    b().then(() => {
      c.then(() => {
        d.then(() => {
          console.log('Done!')
        })
      })
    })
  })
}

따라서 더 간단하고 쉽게 콜백지옥을 피하고 비동기 처리하기 위해 async await가 나왔다고 생각하면 된다!

예시부터 보자.

function a() {
  return new Promise((resolve, reject) => {
    if(number > 4) {
      reject()
      return
    }
    setTimeout(() => {
      console.log('A')
      resolve()
    }, 1000)
  })
}

async function test() {
  await a()
  b()
}

이렇게 처리하면 a함수가 출력되기를 기다렸다가 다음 코드인 b함수가 출력된다.

async await에서 예외처리

Priomise의 resolve, reject, finally와 마찬가지로 awync await 구조에서도 예외처리가 가능하다.

// 에러
function test() {
  await a(5)
  console.log('Resolve!') // 조건에 의해 reject가 실행되므로 a() 함수 다음 내용을 실행할 수 없음(에러 뜸)
}

// 해결
function test() {
  try {
    await a(5)
  console.log('Resolve!')
  } catch(error) {
  console.log('Reject!') 
  } finally {
    console.log('Done')
  }
}
test() // 조건에 의해 catch 구문이 출력됨

try catch 구문을 통해 코드가 잘 실행된다면 try 구문 함수가 진행되고 에러나 예외사항이 생긴다면 catch 구문이 실행된다.

파이썬의 try문이랑 같은 기능이다.

확실히 Promise 이후에 나온 async awiat 구조가 더 간결하고 가독성이 좋은 모습앋.

비동기 공부 후 느낀점

이론적으로 아는 것과 실제 코드를 써서 활용하는 것은 확실히 다르다. 하지만 비동기 처리도 마찬가지라고 느끼고 다양한 예제에 활용해 봐야할 것이다.
일단 처음 배운 개념은 익숙해지는 것이 우선이니까..!
그래도 비동기가 어려운 개념이라고 생각했는데 비동기 처리의 목적과 왜의 이유를 알아내려고 노력하니깐 이해가 비교적 쉽게 되었다.
어떠한 개념이든지 목적과 이유를 확실히 생각해보자!

"패스트캠퍼스 프론트엔드 초격차 인강 참조"