210315_TIL(타이머 API, node.js 모듈 사용법)

✅Promise

기존의 비동기 처리의 callbackhell이나 오류 처리 같은 문제를 해결하는데 유용한 Promise에 대해 배웠다.

Promise 체이닝, promise.all 등을 작성하며 프로미스를 기본적으로 어떻게 사용하는지 배웠다.

Achievement Goals

• 어떤 경우에 중첩된 callback이 발생하는지 이해할 수 있다.
• 중첩된 callback의 단점, Promise 의 장점을 이해할 수 있다.
• Promise 사용 패턴과 언어적인 특징들을 이해할 수 있다.
  • resolve, reject의 의미와, then, catch와의 관계를 이해할 수 있다.
  • Promise 에서 인자를 넘기는 방법에 대해 이해할 수 있다.
  • Promise의 세가지 상태를 이해할 수 있다.
  • Promise.all 의 사용법을 이해할 수 있다.
• async/await keyword에 대해 이해하고, 작동 원리를 이해할 수 있다.
• node.js의 fs 모듈의 사용법을 이해한다.

🍒Remember

---

✅Promise란?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.

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

프로미스는 다음 중 하나의 상태를 가진다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태(이행하거나 거부되지 않은 초기 상태)
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태(연산이 성공적으로 완료됨)
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태(연산이 실패함)

프로미스 처리 흐름 - 출처 : MDN

✅자바스크립트의 비동기 처리란?

'특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미한다.

 

✅then()

여러 개의 프로미스를. then()으로 연결하여 처리할 수 있다.

then() 메서드는 Promise(en-US)를 리턴하고 두 개의 콜백 함수를 인수로 받는다.

하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다.

아래 예제를 통해 알아보자

const promise1 = new Promise((resolve, reject) => {
  resolve('Success!');
});

promise1.then((value) => {
  console.log(value);
  // expected output: "Success!"
});

// 2
var p1 = new Promise(function(resolve, reject) {
  resolve("성공!");
  // 또는
  // reject("오류!");
});

p1.then(function(value) {
  console.log(value); // 성공!
}, function(reason) {
  console.log(reason); // 오류!
});

 

✅프로미스의 에러 처리 방법

1. then()의 두번 째 인자로 에러를 처리하는 방법

getData().then(resolve, reject);

2. catch()를 이용하는 방법

getData().then().catch();

위 2가지 방법 모두 프로미스의 reject() 메서드가 호출되어 실패 상태가 된 경우에 실행된다.

프로미스 에러 처리는 가급적 catch()를 사용한다.

// then()의 두 번째 인자로는 감지하지 못하는 오류
function getData(){
	return new Promise(function(resolve, reject){
    resolve('hi')
    });
}

getData().then(function(result){
	console.log(result);
    throw new Error("Error in then()");
}, function(err){
	console.log('then error : ', err);
});

// catch()로 오류를 감지하는 코드
function getData(){
	return new Promise(function(resolve, reject){
    resolve('hi')
    });
}

getData().then(function(result){
	console.log(result);
    throw new Error("Error in then()");
}, catch(function(err){
	console.log('then error : ', err);
});

더 많은 예외 처리 상황을 위해 프로미스의 끝에 가급적 catch()를 붙이자.

catch()란?

a를 반환하고 Promise 거부된 사례만 처리한다. 호출과 동일하게 작동한다.

 

✅async, await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다.

속성의 값을 꺼내려고 할 때 then이나 await을 사용한다. 하지만 await을 사용하는 것이 더 안전하다고 한다.

1. async 키워드 : 함수명 앞에 붙인다.

2. await 키워드 : 함수 내부, 비동기 처리하는 메서드 앞에 붙인다.

 

✅Promise.all

모든 처리가 끝나야 다음으로 넘어간다.

순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다.

주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다.

 

🍒More Study

---

✅fs.module 종류

✅event loop

 

 

 

🍉Toy 문제(fibonacci) 풀어야됐는데 못 풀었다...

오늘 생각보다 피곤하고 많이 컨디션이 안 좋았던 날이다.💫