TIL/JS 2023/3/17 📚

오늘은 비동기와 콜백 그리고 promise 객체와 async await에 대해 학습을 진행했다!

자바스크립트의 작동원리에 대해 배우면서 비동기와 조금 더 친해진 느낌이 있었지만,, 아직은 어사(어색한사이) 이다 ㅋㅋ

또 최근 다시 Todolist를 만들어보면서 addeventlisener를 사용할 일이 있었는데 아직 제대로 알지 못한 채 사용하는 느낌을 받아서 비동기 그리고 이를 다루는 방법에 대해 학습을 진행하였다.

학습은 캡틴판교님의 블로그를 90% 참고하였기 때문에 캡틴판교님의 블로그 글과 유사할 수 있다..!
캡틴판교님의 블로그 글

비동기 ❓

비동기는 왜 발생할까? 자바스크립트의 동작원리와 연관이 있다.
자바스크립트는 코드를 읽을 때 비동기함수가 나온다면 이를 기다려주지 않는다.
즉, 비동기 함수의 결과값을 기다려주지 않는다.

자세히 말하자면 모든 함수는 stack에 쌓인 후 실행이 되는데 비동기함수는 바로 stack으로 가지 않고 대기실을 거쳐 조건이 완료되면 queue라는 공간에 들어간다. stack이 비어있다면 그 때 queue의 앞 부분부터 stack으로 들어가 함수가 실행된다.

console.log(1)
setTimeout(function(){
console.log(2)
},3000)
console.log(3)

위 코드의 결과는 어떻게 나올까?
순차적으로 1 2 3이 출력될까?? 결과는 그렇지 않다.
1,3이 먼저출력되고 2는 3초뒤에 출력이된다.

자바스크립트는 console.log(1)을 먼저 읽고 그 후 setTimeout읅 읽는다. 그 후 console.log(3)을 읽는다. setTimeout은 비동기 함수이기에 대기실로 보내 해당 조건(3초가 지났나)이 완료되면 queue로 보낸다.

stack이 비어있을 때 queue에서 stack으로 해당 console.log()가 넘어가 3이 출력된다.

이러한 자바스크립트의 특성 때문에 비동기 함수를 처리해줄 수 있어야한다.
왜냐하면 이러한 비동기함수가 끝나지 않았는데 그 결과값을 가지고 처리하려하면 오류가 발생할 것이고 이 비동기 함수들을 모두 기다린 후에 다른 코드를 실행하자니 또 너무 오래 걸릴 것이기 때문이다.

결국 이러한 비동기 함수를 처리하는 방식은 =>콜백!!

콜백 ❓

콜백이란 무엇일까?

1. 다른 함수의 인자로써 이용되는 함수.
2. 어떤 이벤트에 의해 호출되어지는 함수.

즉, 함수의 인자로 들어가거나 이벤트에 의해 호출되어진다면 그 함수는 콜백함수이다.

예를들어

function Go(Callback){
  if("you need stop"){
   Callback() 
  }
  function Stop(){
 console.log("I need a rest") 
}
}

Go(Stop())

이때의 Stop 함수는 콜백이된다. 그렇다면 아까와 똑같은 코드에서 콜백으로 비동기를 처리한다는 말은 무엇일까?

function Print(){
  console.log(2)
  console.log(3)
}
console.log(1)
setTimeout(Print,3000)

이런식으로 콜백을 활용하여 조건이 만족되면 해당 콜백함수가 수행되도록 만들면된다.

ajax 통신코드를 활용해서 콜백함수를 개선해보면 다음과 같다.

먼저 콜백함수를 적용하지 않은 예시를 먼저 보면

function getData() { // 1. 함수 선언 2. 함수 대입 7. 함수실행
	var tableData; //8. 변수 선언 9. 변수 초기화
	$.get('https://domain.com/products/1', // 10. 함수실행 11. 콜백대기
          function(response) { // 3. 함수선언 4, 함수대입
		tableData = response; //12. tableData 재선언 
	});
	return tableData; // 13. response는 아직들어오지 않아 undefined
}

console.log(getData()); //5. console.log 실행 6. getDate()실행

위와 같이 이루어진다. 코드 실행 순서를 참고하면 좋다. 그렇다면 reponse가 들어오고 난 후 다음 함수인 console.log()가 실행되도록한다면 어떻게하면좋을까?
바로 콜백을 활용하는 것이다!!

function getData(CALLBACK) { 
	$.get('https://domain.com/products/1',
          function(response) {
		CALLBACK(response)
      //response가 받아오면 이값이 CALLBACK의 인자로 전해진다
	});
}
function CALLBACK(data){
  console.log(data)//가져온 response를 console!!
}

getDate(CALLBACK(data))

그렇다면 콜백 지옥도 이제 이해할 수 있다!!!
필자는 콜백 지옥이라는 현상이 왜이러나는지 잘 이해하지 못했다.
핵심은 "콜백을 통해 결과값을 전달해주기 때문에 발생한다."

step1(function(value1) {
  step2(function(value2) {
    step3(function(value3) {
      step4(function(value4) {
        step5(function(value5) {
          step6(function(value6) {
            // Do something with value6
          })
        })
      })
    })
  })
})

결국 콜백은 함수의 인자로 사용되어 해당 함수의 실행순서를 동기적으로 보이게 만든다. 그렇게 하다보면 함수들이 꼬리에 꼬리를 물게 되는 경우가 발생한다.

이해를 돕기위해 print 함수가 비동기적 함수라고 가상으로 생각해보자

function print(next){
  console.log(1)
  next(next2){
   console.log(2) 
    next2(next3){
      console.log(3)
      next3(next4){
       console.log(4)
        next4(next5){)
         console.log(5 
        }
      }
  }
}

결국 순서를 지키려고 이 다음 함수들을 엮어서 넣다보면 콜백 지옥이 만들어지는 것이다.

이 콜백지옥이 안생기면서 비동기를 처리할 수 있도록 도와주는 객체가 바로 Promise 객체이다.

Promise❓

Promise는 비동기 처리에 사용되는 객체이다.

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); 
  });
}

getData(function(tableData) {
  console.log(tableData);
});

애서 Promise를 적용하면 다음과 같다.

function getData(){{
 return new Promise(function(resolve,reject){
  $.get(`url 주소/product/1`,function(response){
   resolve(response) 
  }) 
 }) 
}
                           
getData().then((data)=>console.log(data))  
//해당 response가 data로 들어간다.            
                           

잘 모르고 썼을 때는 그냥 사용방법만 외우고 있었는데.. 알고보니 promise가 효자이다.. 콜백지옥도 없애주면서 해당 값이 들어오면 이를 resolve를통해 그 값을 이어 전달해 줄 수 있다니!!

ajax통신에 익숙치 않아 setTimeout 메서드로 promise를 학습해보았다.

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("123");
      resolve("성공");
    }, 3000);
  });
}
getData().then((data) => console.log(data));

setTimeout 비동기함수가 해당 조건이 끝나면 resolve를 통해 어떤 값을 가져오도록 하였다.

Promise는 결국 객체이고 new Promise를 return 한다는 것은 Promise 객체를 반환한다는 것이다. 성공되면 than이라는 객체내부의 프로퍼티에 접근하여 resolve 해온 값을 접근 할 수 있고 실파하면 catch라는 객체내부의 프로퍼티에 접근하여 error를 가져올 수 있다.

async와 await❓

async await는 필자가 느끼는 바로는 Promise를 더 가독성 좋게 다루기 위해 사용되는 문법!

기본 문법은 다음과 같다.

async function 함수명(){

await 비동기처리메서드()
  console.log("123")
}

사실 async await가 아니라면 비동기를 학습하기 이전의 뇌로 돌아간 것과 같다.
만약 저상태로 코드가 진행된다면 비동기 처리 메서드는 제쳐두고 123이 먼저 출력 되지 않을까??

하지만 async await를 장착(?) 해주었기 때문에 순차적으로 위에서부터 실행이 된다.

이게 바로 async await이다! 여기서 중요한 점은

awailt를 받는 비동기함수는 객체를 반환하는 경우만 가능하다!

function fetchData(){
 return new Promise((resolve,reject)=>{
  const item=[1,2,3]
  resolve(item)
 }) 
}

async function PrintItem(){
 const item = await fetchData() 
 console.log(item)//[1,2,3]
  
}
PrintItem()

이렇게 비동기함수임에도 동기함수를 실행하는 듯한 경험을 하게 해주는 것이다!

그렇다면 async await는 어떻게 오류처리를 해줄까?

try - catch!! 문으로 예외를 처리해주면된다.
즉, 동기함수와 동일하게 해주면된다!!!!