들어가기에 앞서..
비동기와 동기 오늘은 콜백함수와 promise에 대해서 배워보자.
오늘은 무엇을 배울까
콜백함수, promise ,then , catch , finally
콜백함수
자바 스크립트는 동기적이다.
하나하나 동기적으로 코드들이 실행된다.
하지만 호이스팅 으로 var와 function의 선언은 순서상 제일 위로 올라가서 실행하게 된다.
var는 이러한 문제가 있어서 let 사용을 권한다.
콜백함수로서 setTimeout을 사용할수 있다.
setTimeout
console.log('1');
setTimeout(function () {
console.log('2');
},1000);
console.log('3');
setTimeout은 ms(밀리세컨드)시간 이후 코드가 실행된다.
위의 값에서 1,3은 바로 실행되지만 2는 1000ms 즉 1초 뒤에 실행되기 때문에 1,3,2 순서로 값을 얻을수 있다.
setTimeout()은 핸들러와 , 시간을 값으로 받는다.
시간은 ms를 사용한다.
비동기 vs 동기적
동기적 함수는 자바스크립트처럼 순서에 맞게 진행하는 것을 나타낸다.
비동기적으로는 콜백함수, setTimeout처럼 나중에 값을 콜백 하는 것을 나타낸다.
코드를 짤때 비동기적으로 콜백함수를 많이 사용하게 되면 가독성 하락과 코드를 읽고 이해하기 힘들고 디버깅과 유지보수의 어려움이 발생한다.
이를 업계에서는 콜백지옥이라고 사용한다.
그렇다면 간단하게 작성하기 위해서는 어떻게 해야 할까 ?
이 문제를 해결하기 위해 promise를 사용한다.
유의할점은 promise가 답은 아니라는 것이다. setTimeout도 꼭 필요한 함수이다. 아직 많은 사례를 만나보지 못해서 어느때에 적절하게 사용되는지는 판단하지 못하겠다.
Promise
약속 으로 해석되는 이 기능은 도대체 어떻게 기능할까 ?
promise는 일정시간이 지난후에 성공하면 성공메시지, 실패하면 실패메시지를 보낸다
setTimeout과 비슷한 방법으로 작동되지만 더욱 간단하게 작성될수 있다.
기간은 정해지지 않고 예약을 한다는 것이 이해하기 쉬울것이다.
Promise는 비동기일경우 콜백보다 유용하게 사용된다.
pending -> 충족(성공) or 실패(거절) 의 절차를 거친다.
기본적인 형태는
const promise = new Promise((resolve,reject) => {
resolve조건 ,reject 조건} 으로 사용된다.
resolve 는 성공했을 경우
reject는 실패했을 경우로 사용되며 resolve만 작성해도 실행은 된다.
단, 바로 실행되기 때문에 사용자가 요구하지 않아도 실행된다는 것을 유념해야 한다.
다음 프로퍼티를 사용하면 조건을 사용할수가 있다 .
then
promise.then((value) => {console.log(value)};
then을 사용하면 promise가 성공하였을때 이것을 하라 라는 것의 조건을 추가할수 있다.
then의 value에는 promise가 성공한 값이 전달된다.
const promise = new Promise((resolve,reject) => {
resolve('성공') })
promise.then((value) => {console.log(value)};
이렇게 작성하면 '성공' 값이 출력이 된다.
catch
그렇다면 실패할 경우 어떻게 처리할까 ?
catch는 실패를 처리할수 있게 만들어준다. .catch를 사용하지 않으면
실패했을경우 오류가 입력된다. 하지만 오류를 다루지 않았기 때문에 알수 없는 오류라고 나타날 것이다. catch를 사용한다면 오류값을 설정해줄수 있다.
promise.catch(error=> { console.log(error)})
기본형태는 이렇게 생겼다. 하지만 promise 값에 reject로 오류의 경우를 처리할수 있게 해줘야 한다.
const promise = new Promise((resolve,reject) => {
resolve('성공') }
,reject(new Error('error'); //실패 설정
promise.then((value) => {console.log(value)};
.catch(error=> { console.log(error)})
reject에서 Error를 만들어 주는데 Error는 자바스크립트에 내장된 함수이다. 에러의 내용을 작성해줘야한다.
catch를 사용하여 에러를 캐치하고 에러 문구를 전달해준다.
finally
성공하던 실패하던 finally는 무조건 마지막에 값을 호출해준다.
promise.finally(()=> { console.log('끝')});
결과적으로 이렇게 작성할수 있다.
const promise = new Promise((resolve,reject) => {
resolve('성공') }
,reject(new Error('error'); //실패 설정
promise.then((value) => {console.log(value)};
.catch(error=> { console.log(error)})
.finally(()=> { console.log('끝')});
성공하면 '성공' 값과 '끝' 값이 나오고
실패할 경우 'error'값과 '끝' 값이 나온다.
promise chanining
then을 사용하여 promise의 chanining을 만들수 있다.
즉 값들을 쉽게 연계해서 사용할수 있다.
.then(num => num * 2)
.then(num => num*3)
.then(num => {
return new Promise((resolve,reject) => {
setTimeout(()=> resolve(num -1),1000);
})
})
.then(num =>console.log(num));
이렇게 then을 사용하면 값들을 계속 연계 받아 처리할수 있다.
쉽게 비동기적 처리를 이용할수 있는데 더욱 간단하게도 작성할수 있다.
간단하게 작성하기 방법은 다음 게시글에 정리해보겠다.
