본문 바로가기

코드스테이츠 프론트엔드

[JS/Node] 비동기

비동기 쉽게 이해하기

커피숍에서 커피를 주문하려고 줄을 서는 모습을 상상해 봤을때, 커피를 먼저 주문한 김코딩이 주문한 커피를 받을 때까지, 줄 서 있는 박해커가 주문조차 할 수 없다고 규정이 있다면. 이를 우리는 blocking 이라고 부른다. 하나의 작업이 끝날 때까지, 이어지는 작업을 "막는 것"이다. 박해커는 김코딩이 주문한 커피가 나오고 나서야 커피를 주문할 수 있고, 김코딩의 커피 주문 완료 시점과 박해커의 커피 주문 시작 시점이 같다. 이렇게 시작 시점과 완료 시점이 같은 상황을 "동기적(synchronous)이다." 라고 한다.

 

JavaScript의 비동기적 실행(Asynchronous execution)이라는 개념은 웹 개발에서 특히 유용하고, 특히 아래 작업은 비동기적으로 작동되어야 효율적입니다.

  • 백그라운드 실행, 로딩 창 등의 작업
  • 인터넷에서 서버로 요청을 보내고, 응답을 기다리는 작업
  • 큰 용량의 파일을 로딩하는 작업

비동기 함수의 순서제어 : Callback,Promise,Asynk,Await

비동기 함수의 순서를 제어하고 싶을 때 콜백(Callback)을 이용할 수 있다. 그러나 콜백지옥에 빠질 수 있기 때문에 콜백 보다는 promise를 사용하는것이 권장 된다. 하지만 promise 또한 사용하고자 하는 함수의 양이 많게 될 경우 프로미스 지옥에 빠지기 쉽기 때문에 이때 asynk와 await를 이용해 주면 된다.

Bare Minimum Requirements

  • Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject 는 각각 무엇을 의미하나요?

       resolve는 기능을 정상적으로 수행해서 최종적으로 데이터를 전달하고. reject는 기능을 수행하다가 중간에 문제가 생기면, 호출하게 된다.

//resolve
const promise1 = Promise.resolve(123);

promise1.then((value) => {
  console.log(value);
  // expected output: 123
});
//reject
function resolved(result) {
  console.log('Resolved');
}

function rejected(result) {
  console.error(result);
}

Promise.reject(new Error('fail')).then(resolved, rejected);
// expected output: Error: fail

 

  • resolve, reject함수에는 전달인자를 넘길 수 있습니다. 이때 넘기는 전달인자는 어떻게 사용할 수 있나요?

then을 이용해서 사용할 수 있다.

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

then:성공시 실행

catch:실패시 실행

finally:성공과 실패 여부에 관계 없이 함수가 끝날 때 실행

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

프로미스에 이행과 거부 처리기 콜백을 추가하고, 콜백이 호출될 경우 그 반환값으로 이행하며 호출되지 않을 경우(onFulfilled, onRejected 중 상태에 맞는 콜백이 함수가 아닐 경우) 처리된 값과 상태 그대로 처리되는 새로운 프로미스를 반환한다.

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

프로미스에 거부 처리기 콜백을 추가하고, 콜백이 호출될 경우 그 반환값으로 이행하며 호출되지 않을 경우, 즉 이전 프로미스가 이행하는 경우 이행한 값을 그대로 사용해 이행하는 새로운 프로미스를 반환한다.

   

  • Promise의 세 가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?
더보기

대기(pending) : 이행하지도, 거부하지도 않은 초기 상태.
이행(fulfilled) : 연산이 성공적으로 완료됨. resolve,then
거부(rejected) : 연산이 실패함. reject,catch

state : pending -> fulfilled or rejected

 

await 어떤타입 :promise

await 어떤 값 리턴?:resolve된 값을 리턴해줌.

'코드스테이츠 프론트엔드' 카테고리의 다른 글

[React] React State & Props  (0) 2022.08.04
[React] React SPA,React Router  (0) 2022.08.01
[JavaScript] 객체 지향 프로그래밍  (0) 2022.07.22
[JavaScript] 고차 함수  (0) 2022.07.21
Coz’ Mini Hackathon  (0) 2022.07.19