오늘은 비동의 꽃, 비동기의 핵심
async await 에 대해 알아보도록 하자 !!
이전 포스팅에서 promise에 대해서 알아보았는데
특히 promise 체이닝을 통해 .then() .catch() 를 통해 알아 보았다.
하지만 계속 그렇게 .then() 메소드를 통한 방법으로 하다보니 코드가 길어지고
난잡해 보이기까지 하다 오늘은 async await 활용으로 어떻게 개선되어지는지 경험해볼까?
async await 은 다른 방법이아닌 promise를 조금 더 편하게 쓰는 방법이라 생각하면 되겠다!
-드림코딩 엘리 출처
이런 코드를
-드림코딩 엘리 출처
이렇게 간단하게 바꿀수 있다
다른예제를 보자
이 예제 역시 delay 함수에 초를 넘겨주면 원하는 시간이후에 각각 사과와 바나나를 리턴해준다.
promise와 비교해보면 조금더 간결해진것을 볼수있다.
사과와 바나나를 동시에 불러올려면
이런식으로 코드를 작성하게되는데 이렇게 되면 계속 콜백으로 받는 형태로 콜백지옥으로 가는 코드가 될수있다.
이렇게 코드를 깔끔하게 만들수 있다.
하지만 지금 코드는 1초있다가 사과를 받아오고 1초있다가 바나나를 받아오는데
이렇게 동시에 리턴할꺼라면, 기다리지않고 한번에 불러와도 된다.
코드를 조금만더 개선해보면
이렇게 병렬적으로 실행시킬수가있다 하지만 서로 기다릴 필요가없는 지금 코드에서는
promise.all() 함수를 통해 같이 처리해줄수있는데
이렇게 작성 해 줄수가 있다.
async await 는 promise를 조금 더 간편하게 사용할수있게 해주는 거라고 생각하면 된다.
하지만 필요에 의해서 promise를 사용해야할때가있고
가급적이면 콜백으로 처리하는 비동기 방식은 지양 해야 한다.
이렇게 알아본 async await
기술의 필요성은 왜 필요한지에 대한 의문이 점점 커져야만 와닿게된다
이를 느껴볼려면 기존에있는 불편한점을 몸서 느껴봐야지만, 기술의 필요성을
알게된다라고 생각한다.
비동기처리방식에 있어서도 콜백으로 처리하는 비동기 promise로 처리하는 비동기 async await로 처리하는 비동기 까지 경험해보면서 그필요성을 알게되었다.
동영상 강의에 나온 부분들을 run JS 에서 실행해보면서 직접 해보니 재밌게 다가온다.
앞으로 알아야할 부분들이 넘쳐 흐르지만, 계속 배울게 있다는게 신기하면서도 설레인다.
