section2/unit3/[JS/Node] 비동기(9/23)

블로깅 주제

• 비동기

---

1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.

• 오늘, 월요일, 화요일은 모두 과제가 있다. 오늘은 underbar 과제를 했다. 어렵다고 겁을 주셔서 시작 전부터 엄청 긴장했었다. 우리가 평소에 무심코 쓰는 메소드들을 직접 구현해보려니 여간 까다로운게 아니였다. 다행히 시간 내에 Bare Minimum까지 완료 후 제출했다. 이미 Bare Minimum에서 체력을 좀 쓴 상태라 Advanced는 내 정신건강을 위해 넘어가기로 했다. 애초에 3시반부터 다시 유어클래스에서 개념공부를 해야했기도 했었고.... 오늘만 지나면 주말이라는 사실이 너무 행복하다!^^7

2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.

• 비동기 호출, callback 함수, promise, async/await, setTimeOut

3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

- 비동기 호출

오래걸리는 작업을 만났을때 그 작업을 미뤄두고 다른 것부터 처리하는 방식

• 동기: 요청에 대한 결과가 동시에 일어난다.
• 비동기: 요청에 대한 결과가 동시에 일어나지 않는다.

 

blocking : 하나의 작업이 끝날 때까지 이어지는 작업을 막는 것

동기 호출

비동기 호출

---

- Callback

비동기 호출의 순서를 제어

A B C 순서대로 출력될까? NO!!!! 어떤게 오래 걸릴지 모르기 때문이다.

이때 사용하는 것이 Callback 함수이다.

 

▶ Callback 함수의 문제점

대체적으로 함수 이름을 짓지 않고 사용하기 때문에,
콜백함수를 계속 사용하게 되면 코드가 길어지고 읽기가 힘들어진다.

first(function(){
  second(function(){
    third(function(){
    })
   })
 })

Callback Hell

이때 사용할 수 있는게 promise이다.

---

- Promise, async/await

▶ Promise

new Promise() 문법으로 Promise라는 변수 오브젝트를 생성한다.
파라미터로 resolve, reject를 가지며 callback 함수를 하나 선언해줘야 한다.

★ .then() 도 Promise를 리턴한다.

★.then()안에는 함수가 들어가야 한다.

https://velog.io/@ssumniee/JS-Function.bind

[JS] Function.bind()

let promise = new promise(function(resolve, reject){
  let sum = 1 + 1; // sum 연산이 끝난뒤 특정코드를 실행하고 싶을 때 사용방법
  resolve(sum) // 성공 -> then 실행
  // 위의 연산결과를 then 함수까지 전달이 가능하다 
  reject() // 실패 -> catch 실행
}); // 성공 , 실패 판정하는 기계 

promise.then(function(result){
  // 프로미스가 성공했을 경우 실행할 코드
  console.log(result) // 2
}).catch(function(){ 
  // 프로미스가 실패했을 경우 실행할 코드
})

promise.finally(function(){
  // 성공 or 실패 둘 중 아무거나 일어났을때 실행할 코드
})

 

ex)1초후에 성공하는 promise. 성공시 특정코드 실행

let promise = new promise(function(resolve, reject){
  setTimeout(function(){
    resolve();
  }, 1000);
}); 

promise.then(function(result){
  console.log('성공')
}).catch(function(){ 
  console.log('실패')
})

 

▷ Promise의 장점

1. 코드가 옆으로 길어지지 않는다. 깔끔하게 정리된다.
2. 순서 뿐만 아니라 성공, 실패 경우에 맞춰 다른 코드를 실행할 수 있다.

 

▷ Promise 특징 - 3가지 상태

1. pending : 아직 성공/실패 판정을 안했을때
2. resolved : 성공했을때
3. rejected : 실패했을때

console.log(promise)
// promise { <resolved> : undefined }

 

Promise Hell

깔끔하게 return 처리를 해주지 않으면 Callback Hell과 같은 모양새가 된다

 

Promise chaining을 적절히 시켜줘야 Promise Hell을 막을 수 있다.

---

https://velog.io/@support/%EC%BD%94%EB%93%9C%EC%8A%A4%ED%85%8C%EC%9D%B4%EC%B8%A0-7%EC%A3%BC%EC%B0%A8-%EB%B9%84%EB%8F%99%EA%B8%B0

코드스테이츠 7주차 / 비동기 Promise , async, await

---

▶ async/await

비동기 함수들을 마치 동기적인 프로그래밍인 것처럼 사용 가능하다.

Promise와 동일하게 작동하지만 표현을 일반 함수 사용하듯 할 수 있다. ==> 가독성이 좋아진다.

 

---

- 타이머 API

1. setTimeout

일정한 시간 후에 함수를 실행시킨다.

return 값으로 임의의 타이머 ID를 반환하는데, 이 타이머 ID는 타이머를 제어하기 위해서 반드시 필요하다.

멈추려면 clearTimeout을 쓰면 된다.

// 타이머를 실행시킨다. return 값으로 임의의 타이머 ID를 반환한다.
setTimeout(callback 함수, 실행 전 기다려야 할 시간);
// 타이머를 멈춘다. 여기서 타이머 ID는 setTimeout이 return 한 타이머 ID 값이다.
clearTimeout(타이머 ID);

 

2. setInterval

일정한 시간 간격을 가지고 함수를 반복 실행한다. 

setTimeout과 마찬가지로 임의의 타이머 ID를 반환한다. 멈추려면 clearInterval을 쓰면 된다.

// 일정한 시간 간격을 가지고 함수를 반복 실행한다. return 값으로 임의의 타이머 ID를 반환한다.
setInterval(callback 함수, 반복 간격);
// 반복을 멈춘다. 여기서 타이머 ID는 setInterval이 return 한 타이머 ID 값이다.
clearInterval(타이머 ID);

---

https://dokdo2005.medium.com/%EC%BD%94%EB%93%9C%EC%8A%A4%ED%85%8C%EC%9D%B4%EC%B8%A0-pre-17%EC%9D%BC%EC%B0%A8-8f612cb894d7

코드스테이츠 Pre 17일차