[패스트캠퍼스 챌린지 10일차] ECMAScript(ES6) - Promise

Fast campus Logo

 

Fastcampus_Node.js 수강 목록

 

패스트캠퍼스 작심 30일 챌린지 10일차.

---

오늘 배운 ECMAScript의 개념은 바로 Promise!

 

Script를 통해 개발을 하다보면 setTimeout과 같은 비동기 함수를 많이 사용하게 된다.

setTimeout과 같은 비동기 함수를 실행한 후 함수의 실행 성공 여부에 따라

원하는 코드를 실행하거나 에러를 처리하고 싶은데 어떻게 해야할까?

 

이럴때 사용하는 것이 바로 Promise!

Javascript에서 Promise는 '비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값'을 나타낸다고

MDN Web Docs에서 알려준다.

 

즉, 비동기 작업을 처리한 후 성공하면 내가 내가 원하는 코드를 실행하고,

실패하면 에러에 대한 처리를 할 수 있다는 것.

 

그럼 Promise는 어떻게 사용하는걸까?

 

Javascript Promise 실습

 

오늘도 역시 패스트캠퍼스 강의를 통해 Promise의 사용 방법을 배웠다.

먼저 setTimeout만 사용하여 1초 후 '안녕하세요'를 출력하고,  다시 1초 기다린 후 'Promise를 연습해봅시다.'를

출력하는 코드를 작성하면 다음과 같을 것이다.

function hello() {
	setTimeout(() => {
    	console.log('안녕하세요');
        
        setTimeout(() => {
        	console.log('Promise를 연습해봅시다.');
        }, 1000);
        
    }, 1000);
};

hello();

 

setTimeout 안에서 또 setTimeout을 실행하였다.

만약 1초마다 출력해야하는 값들이 점점 늘어나면?

setTimeout 중첩도 점점 늘어나며, 나중에 코드를 다시 보면 유지보수하기 힘들어진다.

---

그럼 Promise를 통해 어떻게 처리할 수 있을까?

같은 기능을 하는 코드를 Promise를 이용해서 작성해보면 다음과 같다.

function hello(message) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Promise를 연습해봅시다.');
            reject('Error Message');
            console.log(message);
        }, 1000);
    });
}

hello('안녕하세요.').then(value => {
    hello(value);
}).catch(error => {
    console.log(error);
});

이전보다 코드가 조금 길어지긴 했지만 그래도 직관적이라 유지보수에는 편리하다.

여기서 알아야할 중요한 점은 resolve와 reject!

 

resolve는 비동기 함수가 성공했을 때 수행되고 아래의 then 함수를 실행해준다.

reject는 비동기가 실패했을 때 수행되고 catch 함수를 통해 에러를 처리해준다.

즉, 성공과 실패 여부에 따라 둘 중 하나만 실행된다는 것!

 

아직 문법에 익숙치 않아 좋은 예시는 아니겠지만 그래도 나름 Promise를 어떻게 사용하는지 알 수 있다.

(내 생각만 그런가...?)

---

앞으로 배울 Nodejs도 Promise를 지원한다.

파일을 읽을 때, 위와 같이 setTimeout을 사용할 때, 그 외의 비동기 처리를 할때 사용하므로

Promise에 대해 잘 배워둬야겠다.

---

추가로 패스트캠퍼스 강사님이 async-await에 대해서도 알려줬다.

 async function sleep(duration) {
     return new Promise(resolve => {
        setTimeout(() => {
            resolve(undefined);
        }, duration)
     })
 }

 async function main() {
     // Promise에서 then, then, then을 아래와 같이 처리
     console.log('first');
     await sleep(1000);
     console.log('seconde');
     await sleep(1000);
     console.log('third')
 }

 main()

async 키워드를 이용해서 비동기 함수를 정의할 수 있고,

내가 정의한 함수를 await 키워드를 통해 호출할 수 있다.

 

이렇게 작성하면 Promise의 then에서 처리하는 내용을 위와 같이 처리할 수 있다.

 

Promise와 async-await, 개발할 때 어떤게 유지보수하기에 더 편할지 고민해서 작성하도록 하자! 

 

---

 

[오늘의 학습통계]

패스트캠퍼스 작심 30일 챌린지 10일차 학습통계

---

- 패스트캠퍼스 URL : https://bit.ly/37BpXiC

* 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.