TIL | June_22th

오늘의 생각

토이 문제 6st | Toy Problem

/*내용*/

[JS/Node] 비동기 | Sprint - 타이머 API & fs 모듈

/*내용*/

---

학습 목표 - Sprint Underbar

Bare Minimum Requirements

• 세가지 패턴의 비동기 코드를 사용하는 방법이 어떻게 다른지 이해하세요.
• 다음 질문에 대한 답을 찾아보세요. Office Hours 시간을 통해 답을 확인합니다.
  질문
• Promise 실행함수가 가지고 있는 두 개의 파라미터 resolve 와 - [ ] reject 는 각각 무엇을 의미하나요?
• resolve, reject함수에는 인자를 넘길 수 있습니다. 이때 넘기는 인자는 어떻게 사용할 수 있나요?

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

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

[코드] 수정한 sleep 함수

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

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

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

[코드] 수정한 runPromise 함수

브라우저 개발자도구의 콘솔을 확인하면서, 어떤 일이 발생하는지 확인해보세요.

• new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메소드가 존재하나요? 각각은 어떤 용도인가요?

• Promise.prototype.then 메소드는 무엇을 리턴하나요?

• Promise.prototype.catch 메소드는 무엇을 리턴하나요?

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

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

[코드] 수정한 sleep 함수

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

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

[코드] 수정한 runPromise 함수

• Promise의 세가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?
• await 키워드 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있나요?
• await 키워드를 사용할 경우, 어떤 값이 리턴되나요?

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

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

[코드] 수정한 sleep 함수

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

let returnValue = await sleep(1000);

[코드] returnValue를 확인하세요.

오늘 할 일

• 스프린트 Part 1- 타이머 API 재코딩
• 스프린트 Part 2- fs 모듈 재코딩
• Toy Problem(5th) 완벽히 이해
• Toy Problem(6th) 완벽히 이해
• 벨로그
  • TIL | June_22th
  • Keyword
  • 밀린 keyword 끝내기