[chatGPT랑 코딩하기1] new Promise편

const useProfile = async () => {
  try {
    const auth = getAuth();
    const userData = await onAuthStateChanged(auth, user => {
      if (user) {
        // console.log(user);
        const data = {
          email: user.email,
          uid: user.uid,
          displayName: user.displayName,
        };
        console.log(data);
        return data;
      } else {
        // ...
      }
    });
    console.log(userData);
    return 1;
  } catch (error) {
    throw error;
  }
};

파베에서 프로필 가져오기 비동기 작업중 userData 콘솔이 먼저 찍히고 undefind가 되는 현상이 일어남
그래서 내 코딩메이트..챗gpt에게 물어봄

💁🏻‍♀️ 지피티야 userData콘솔이 마지막에 찍히고 싶다~
🤖 ㅇㅇ userProrile함수가 호출될때까지 기다려야해 그리고서 출력해봐

근디 난 궁금증이 생겼지

💁🏻‍♀️ await으로 이미 onAuth모시기 함수 기다린거 아니냐? 왜 userData가 콘솔에 먼저찍히냐
🤖  onAuth모시기 함수가 콜백함수임. 너가 userData를 찍었을땐 그 변수에 할당되지 않을 가능성이 높아
💁🏻‍♀️ 아 그래? 좋은팁 감사


그래서 userProtile함수를 호출하고 결과를 출력해봄

useProfile().then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

그런데도 undefind가 나옴,,
그래서 다시물어봤지

💁🏻‍♀️ 지피티야 안되잖아ㅡㅡ
🤖 ㅇㅇ onAuthStateChanged()함수가 콜백함수거든? 그래서 undefind가 나 올수 있어 쟤 끝날때까지 기다려야해 Promise를 써봐라

const userData = await new Promise<User | null>((resolve) => {
  onAuthStateChanged(auth, resolve);
});

Promise객체를 사용하여 onAuthStateChanged()가 반환하는 값을 감싸주면 reslove를 호출하면서 최신 데이터값을 계속 전달받기 때문에 너가 원하는 값을 전달받을수 있다고 함.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // ...
  if (비동기 작업이 성공적으로 완료되면) {
    resolve(결과값); // 이행 상태로 만듦
  } else {
    reject(에러); // 거부 상태로 만듦
  }
});

Promise가 비동기 작업을 수행해줌.
Promise하면 약속이란 단어가 떠오르는데 말그대로 비동기 작업을 약속하겠다!!!! 요런 객체다!!!

Promise생성 -> pending(대기)
Promise완료 -> fullfilled(이행)

비동기 작업이 완료되면 Promise는 reslove함수를 호출해서 then메소드에 전달할 수 있음!!
만약 비동기가 실패되면 reject함수를 호출해서 에러결과값을 반환함!!

💁🏻‍♀️ 지피티야 고맙다
🤖 ㅇㅇ ㄱㅅㄱㅅ


Promise를 잊고있었던..나에게..다시 가르침을준 지피티..다음에도 잘 부탁한다..^^