이십일.

d_shunny·2023년 3월 20일
0

3월 log

목록 보기
4/5
post-thumbnail

질문

  1. Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject 는 각각 무엇을 의미하나요?
    콜백함수가 정상적으로 돌아가면 resolve를 호출하고 실패하면 reject를 호출한다.

  2. resolve, reject함수에는 전달인자를 넘길 수 있습니다. 이때 넘기는 전달인자는 어떻게 사용할 수 있나요?
    resolve에 value를 전달인자로 정하면 .then을 이용해서 성공했을때 value값을 출력한다던지 할수 있다.

  3. 직접 눈으로 확인해 보면 쉽게 이해할 수 있습니다. 반드시 다음을 실습해 보세요.
    sleep 함수를 아래와 같이 수정합니다.

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('hello');
    }, wait);
  });
};

runPromise 함수를 다음과 같이 수정합니다.

function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000)
    .then((param) => {
      console.log(param);
      pauseVideo();
      displayTitle();
      return "world";
    })
    .then((param) => {
      console.log(param);
      return sleep(5000);
    })
    .then(highlightTitle)
    .then(sleep.bind(null, 2000))
    .then(resetTitle);
}

브라우저 개발자 도구의 콘솔을 확인하면서, 어떤 일이 발생하는지 확인해 보세요.
sleep 함수에서 받은 전달인자'hello'와 중간에 return 값으로 받은 'world'가 출력된다.(return 값이 새로운 전달인자가 된다.)

  1. new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메서드가 존재하나요? 각각은 어떤 용도인가요?
    .then, .catch, .finally가 있고 .then resolve일때 사용된다. .catch는 코드들이 에러가 발생했을 경우에는 reject 함수를 호출하고 메서드로 접근할 수 있습니다. 작성했던 코드들의 정상 처리 여부와 상관없이 .finally 메서드로 접근할 수 있습니다.

  2. Promise.prototype.then 메서드는 무엇을 리턴하나요?
    value?

  3. Promise.prototype.catch 메서드는 무엇을 리턴하나요?
    error?

  4. 직접 눈으로 확인해 보면 쉽게 이해할 수 있습니다. 반드시 다음을 실습해 보세요.
    catch를 테스트해 보고 싶다면, sleep 함수를 다음과 같이 수정합니다.

const sleep = (wait) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('에러'));
    }, wait);
  });
};

runPromise 함수의 Promise 사용 부분에 catch메소드를 붙여 봅니다.

// 생략
.then(resetTitle)
.catch(err => {
  console.log(err);
})

'에러'라는 메시지가 뜬다.

  1. Promise의 세 가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?
    기본 상태는 pending(대기) 입니다. 비동기 처리를 수행할 콜백 함수(executor)가 성공적으로 작동했다면 fulfilled(이행)로 변경이 되고, 에러가 발생했다면 rejected(거부)가 됩니다.

  2. await 키워드 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있나요?
    함수타입..?

  3. await 키워드를 사용할 경우, 어떤 값이 리턴되나요?
    함수 실행 후 리턴된 값..?

  4. 직접 눈으로 확인해 보면 쉽게 이해할 수 있습니다. 반드시 다음을 실습해 보세요.
    sleep 함수를 아래와 같이 바꿉니다.

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("hello");
    }, wait);
  });
};

브라우저 개발자 도구의 콘솔을 열어 다음을 실행해 본 후, returnValue에 담긴 값을 확인해 보세요.

let returnValue = await sleep(1000);

...?

profile
코딩장

0개의 댓글

관련 채용 정보