[ES6] Promise, async/await

Promise?

++) 자바스크립트 엔진은 하나의 코드 조각을 하나씩 실행하는 일을 하고, 비동기적으로 이벤트를 처리하거나 Ajax 통신을 하는 작업은 사실상 Web API에서 모두 처리된다.

js의 기본 동작은 'Run to Complete' , 즉 하나의 task가 끝나면 다음 task를 실행하는 동기식 처리방식인데,

이보다 더 많은 동작을 하기 위해서는 다른 동작을 하면서 동시에 실행할 수 있는 비동기식 처리방식을 선호할 수 밖에 없다.

JS에는 이를 구현하기 위한 패턴으로 보통 Callback 함수를 사용하였다.

하지만 Callback을 구현하게 된다면 프로젝트의 규모가 예전에 비해 많이 커진 지금의 프로젝트들에서는 콜백 함수가 엄청난 deps를 가지게 되어 코드 자체가 거대한 > 와 같은 모양을 띄게 되고, 가독성이 너무 안좋아진다.

이를 해결하기 위해 비동기 처리를 좀더 깔끔하게 할 수 있게 해주는 Promise라는 객체를 만들었다.

이를 사용하면 비동기 작업들을 순차적으로 작업하고, 병렬적으로 진행과정을 배치할 수 있어 가독성이 좋아진다.

또한 에러처리에 대한 구조도 잘 되어있어 처리하기 용이하다.

보통은 함수의 return? 으로 Promise객체를 생성자 함수로 만들어 실행해주고 인자로

resolve, reject를 넣어주어 성공 코드의 return값의 경우 resolve 에 값을 넣어주고,

실패 코드의 return값의 경우는 reject에 값을 넣어 선언해준다.

이후 해당 함수를 호출할 때, 성공할 경우에는 then 메서드를 사용하여 chaining을 진행할 수 있고,

실패 시에는 catch 를 사용하여 error 발생 시점을 잡아내어 처리할 수 있다.

이보다 더 좋은 가독성을 위해서 나타난 것이 es7의 async/ await 이다.

async/ await는 비동기 코드의 겉모습과 동작을 좀 더 동기 코드와 유사하게 만들어주어 가독성을 더 높힐 수 있다.

이것이 async/await의 가장 큰 장점이다.

async await 는 function 키워드 앞에 async를 붙여주면 되고 function 내부의 promise를 반환하는 비동기 처리 함수 앞에 await를 붙여주기만 하면 된다.