[비동기 문제] "먼저 되는 녀석부터 한다"

1. 문제 상황

(1.1) 137 line은 Get 함수로, 요청-응답 받는 동작을 해서. 그 아래 라인이 먼저 실행되버림.

 

자바스크립트가 순차적으로 되지 않는다는 것을 잊고 있었음. 

그걸 잊고, 배열이 아니라 내가 json을 만들어서 거기에 넣으려고 했나. 란 생각으로 여러가지 console.log 찍어보고 있었음.

이전 KISA 아마데미 교육 당시에도 이걸 경험하고 손절했었던 js. 뚫어보기로 한다.

 

2. Promise 방식과

비동기 로직을 처리하기 위해 콜백함수를 연쇄적으로 쓰다보면, 추후에 알아보기도 변경하기도 어렵다는 단점이 있어

나오게 된 처리 방식들

(0) 콜백 이용

(0.1) 콜백 처음 이용해봄

getChannelData를 새롭게 작성하고 보니, click 뒤에 작성한 함수도 콜백이었음을 알게됨

• 가장 먼저 처리하고 싶은 대상이 getChannelData 함수

  • 그 다음이 "#on"콜백 함수 내부에 getChannelData를 호출함과 동시에 다음에 실행할 코드를 작성하면 됨.

(0.2) 호출 흐름

 

(0.3) 호출 순서 하나 더 추가한 경우

(1) 단순 분기

중첩 방식으로 하다보면 나중에 수정도 어렵고, 복잡해진다 이거야. = "콜백 지옥", "계단식으로 무한히 내려가는"

코딩 패턴으로 다르게 표현하면, 동적 함수를 정적 함수로 떼어내는 과정

(1.1) 단계1

(2.2) 동적으로 생성했던 function에 이름을 붙이고

(2.3) 떼어낸 상태

(2) Promise

이해해본바로는, Promise 라는 일종의 컨테이너에 내가 실행시킬 작업을 돌려놓고 작업 상태(Promise의 status)를 통해서 작업 관리를 하는것.

(2.1) Promise로 변경

이렇게 되면, getChannelData 콜백함수에 Promise가 resolve, reject 인자를 통해서 관리해주는 격이됨.

• Promise가 resolve 인자를 getChannelData 콜백함수에게 주면 then(),

• Promise가 reject 인자를 getChannelData 콜백함수에게 주면 catch(),

 

(2.2) 시행 순서

 

3.  설명 좋은 사이트 : Aync는 나중에

자바스크립트 async와 await