Callback 과 Promise 사용하기!

거룩한 일요일

 

필자는 Callback과 Promise에 대해 공부를 했다.

 

https://tech-monster.tistory.com/43

Callback Fucntion 이란?

간단하게 callback에 대해서 알고싶으면 callback Function이란? 이라는 블로그를 참고해주세요

 

나는 우선 강의를 듣고 그다음에 docs 를 찾아보려고 하는데

 

좋은 내용을 단시간에 함축해서 전달해 주면 시간 효율이 배가 되기 때문이다

 

물론 강의를 듣는다고 해서 그것이 바로 내것이 된다는 말이 아니기에 강의 + 알파의 노력이 필요하기도 하다. 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

 

promise 에 궁금한것이 있다면 MDN사이트의 Promise를 참고해 보자. 

 

MDN사이트에서 눈여겨 봐야할 Promise 객체의 정의를 살펴보면

 

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

라고 한다. 

 

Promise 는 셋중에 하나의 상태를 가진다고 한다. 

 

• 대기(pending): 이행하거나 거부되지 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

아니 mdn사이트... 강의도 그렇지만 이 mdn사이트의 예제도 기본 / 고급으로 나뉘어서 설명을 해주고 있다.

 

너무 친절하다...

 

'use strict'

class UserStorage{
    loginUser(id, password){
        return new Promise((resolve, reject) => {
            setTimeout(()=>{
                if(
                    (id === 'ellie' && password === 'dream') || 
                    (id === 'coder' && password === 'academy') 
                ){
                    resolve(id);
                }else {
                    reject(new Error('not found'));
                }
            }, 2000);
        });
    }
     
    getRoles(user, onSuccess,  onError){
        return new Promise((resolve, reject) => {
            setTimeout(()=>{
                if(user === 'ellie'){
                    resolve({name: 'ellie', role: 'admin'})
                }else{
                    reject(new Error('no access'));
                }
            }, 1000);
        })
    }
};

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');
userStorage.loginUser(id, password)
.then(userStorage.getRoles)
.then(user => alert(`Hello ${user.name}, you have a ${user.role} role`))
.catch(console.log);

이번에 dreamcoding ellie teacher의 강의를 들으면서 적은 수업 내용이다

 

그러면 이 Promise라는게 어떻게 구성되어 있는지 직접 까봣다. 

 

설명을 읽어보면

 

Promise가 설정됐을 때(그 설정된 값은 이행, 거부 둘중 하나) 불러진 콜백을 붙여라!
resolved 값은 callback으로부터 수정될 수 없다. 

 

그러니까 두 상태중에 하나를 선택해서 callback을 그 안에 전달하는데 resolved로 전달한 callback은 수정이 불가능하고 전달해서 부르는것만 가능한거네!

 

param과 return도 살펴보자

 

param이 callback을 전달하는 부분이고, callback을 부름으로서 완료된 값은 return 해주는 구조이다. 

 

출처 : mdn promise

 

이런식으로 mdn사이트에 설명도 잘 되있으니 이것을 참조해서 원하는 코드를 작성하길 바란다.

 

블로그 너무 날로먹네 이사람 ㅎㅎ