[JS/Node] 비동기

과제 - Underbar
1.자바스크립트 배열 내장 메서드(forEach, map, filter, reduce 등)의 원리를 이해한다.
2.callback 함수 전달을 자유롭게 할 수 있다.
Chapter2. 비동기
3.어떤 경우에 중첩된 callback이 발생하는지 이해할 수 있다.
4.중첩된 callback의 단점, Promise의 장점을 이해할 수 있다.
5.async/await keyword에 대해 이해하고, 작동 원리를 이해할 수 있다.

6.Promise 사용 패턴을 이해할 수 있다.
 resolve, reject의 의미와, then, catch와의 관계를 이해할 수 있다.
 Promise에서 인자를 넘기는 방법을 이해할 수 있다.
 Promise의 세 가지 상태를 이해할 수 있다.
 Promise.all 의 사용법을 이해할 수 있다.
 callback, Promise, async/await 구현 방법을 이해한다.

7.Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject를 활용할 수 있다.
8.new Promise()를 통해 생성한 Promise 인스턴스가 사용할 수 있는 메서드의 용도를 이해한다.
9.Promise의 세 가지 상태는 각각 무엇인지 설명할 수 있다.
10.await 키워드와 함께 실행되는 함수는 어떤 타입이어야 하는지 이해한다.
11.await 키워드를 사용할 경우 어떤 값이 리턴되는지 설명할 수 있다.

 

 

 

1.forEach는 내부 배열을 한바퀴 돌려주는 역할을 하고, map은 배열을 한바퀴 돌리며 그 내부 값들을 특정 함수를 적용해 일괄적으로 변경시켜주는 역할을 한다. 그리고 filter는 내부 값들에 함수를 적용해 반환되는 값이 true일 경우에만 투입된 값을 반환받아 배열에 넣어주며 마지막으로 reduce는 특정 함수에 의해 처리된 각 값들을 순차적으로 초기값(설정 안할 경우 첫번쨰 값이 초기로 시행된다.)에 처리된다. (더하기, 곱하기, 나누기, 비교 등)


2.함수 내부값에 매개변수로 함수를 받아 인자로 전달할 수 있다.


3.특정 기능이 순차적으로 시행되야 하는 경우(메뉴 1, 2, 3 차례대로 선택해야 하는 경우인데 메뉴 3이나 2가 먼저 나오면 이상하다) 메뉴1이 종료된 시점에 콜백으로 다음 함수를 시행하는 체인으로 특정 기능들의 시행 순서를 정할 수 있다.


4.중첩되게 callback을 사용할 경우 자동정렬 시 모양이 이상하게 되고 가독성이 떨어지며 관리하기가 힘들기 때문에 추천되지 않는다. promise를 사용할 경우 이런 콜백지옥을 해소할 수 있다. 또한 callback에서 에러가 발생한다면 끝까지 에러를 넘겨준 후 처리가 되지만 promise는 중간에 .catch()가 작동해 어떤 부분에서 에러가 발생했는지 추적하기가 쉽다. 하지만 promise는 새로운 프로미스가 선언됨과 동시에 executor(resolve와 같은 의미)가 자동적으로 시행되기 때문에 불필요한(필요한 사람만 시행하는) 기능은 사용에 주의해야 한다.


5.async는 비동기라는 의미로 내용을 동시다발적으로 적용한다는 의미이며 그런 상황에서 프로미스 또는 콜백을 이용해 순차적으로 사용한다. await는 ES7~8정도에 추가된 기능인데 promise로 선언된 내용들을 마치 동기적인 것 처럼 표현하여 순차적으로 작동시키는 방법이다. function이 아닌 async로 표현해줘야한다.


6.
 -resolve, reject의 의미와, then, catch와의 관계를 이해할 수 있다.
  resolve는 기능을 정상적으로 수행해서 마지막에 최종 데이터를 전달하며
  reject는 기능을 수행하는 중 문제가 생기면 호출한다.
  then은 프로미스가 잘 작동된 경우 값을 받아오거나 특정 기능들을 수행할 수 있다.(커피 내리는 시간 3분 뒤 자동적으로 호출 또는 일정 시간 후 메일 작성 등 예약기능)
  catch는 reject가 나왔을 경우 받아와서 특정 기능을 수행한다. then과 유사하지만 일반적으로 에러일 경우에 자주 사용되기 때문에 무슨 에러인지에 대한 설명을 출력하는게 일반적이다.
  finally는 프로미스 체인이 끝난 마지막인 경우에 시행된다. 중요한 사실은 finally를 사용할 경우 실패 또는 성공과 상관없이 마무리는 finally로 종료된다.

 -Promise에서 인자를 넘기는 방법을 이해할 수 있다.
  인자는 resolve, reject를 이용해 다음 기능으로 넘어가며 .then등으로 다음 기능으로 자연스럽게 체이닝을 할 수 있다. then으로는 프로미스 또는 인자를 넘길 수 있다.

 -Promise의 세 가지 상태를 이해할 수 있다. 
 promise는 Pending(대기), Fulfilled(이행), Rejected(실패)의 세가지 상태가 있다. 기본적으로 대기는 로딩중이라고 볼 수 있고 그 뒤로 resolve/reject 여부에 따라 Fulfilled/Rejected 중 작동할 내용이 결정된다.

 -Promise.all 의 사용법을 이해할 수 있다.
  Promise.all을 이용할 경우 await와는 다르게 비동기적으로 진행되서 여러가지 시행들이 동시에 준비완료 상태로 빠르게 들어갈 수 있다. 또한 비동기적으로 동시에 준비를 시작하기 때문에 짧은 내용 중 무언가가 에러가 발생할 경우 바로 에러를 받아 다른 promise들을 작동(데이터 사용)할 필요가 없어진다.

 -callback, Promise, async/await 구현 방법을 이해한다. 
   @@실제 작성은 해보지 않아 구현방법을 정확하게 이해하기는 힘들다.. (애초에 1시간 30분짜리 커리큘럼에 바라는게 너무 많다 몇시간째 보충을 하는지 모르겠다.)

 
7.resolve는 true reject는 false라고 생각하고 구현하면 이해하기가 쉽다.


8.질문이 중복되는 것 같은데 6번의 첫번째 5가지 기능들을 저런 방식으로 사용한다. 질문이 조금 성의가 없는 느낌이다.


9. promise는 Pending(대기), Fulfilled(이행), Rejected(실패)의 세가지 상태가 있다. 기본적으로 대기는 로딩중이라고 볼 수 있고 그 뒤로 resolve/reject 여부에 따라 Fulfilled/Rejected 중 작동할 내용이 결정된다.


10. await 키워드와 함께 시행되기 위해서는 async를 함께 사용해야 한다.


11. await 키워드를 사용해서 시행할 경우 위의 작동이 해결이 된 다음 아래 주문들이 순차적으로 시행된다. 비동기적 시행이지만 내부 작동이 순차적이며 표현 자체를 동기적으로 작성하기 때문에 가독성이 뛰어나다.

 

어이없게 1시간 30분동안 (15:30~17:00) 학습한 비동기를 저렇게 많이 알고 대답하기를 원한다..

너무 많고 고통스러웠다. 아무리 내일이 주말이라지만 이렇게 많은걸....