[Javascript] Async, Callback

Javascript - Async, Callback

 

동기성(Synchronous) - 동시에 일어나는 

- 요청과 그 결과가 동시에 일어난다는 약속

- 즉, 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 함

 

• 요청과 결과가 한 자리에서 동시에 일어남
• A노드와 B노드 사이의 작업 처리 단위(transaction)를 동시에 맞추겠다.

 

 

비동기성(Asynchronous) - 동시에 일어나지 않는

- 요청과 결과가 동시에 일어나지 않을거라는 약속

실행결과가 오기전에 다른 코드부터 실행할 수 있음.

 

• 요청한 그 자리에서 결과가 주어지지 않음
• 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다

 

※ 동기&비동기 개념 참고 블로그

https://private.tistory.com/24

 

 

 

예제)

만약 동기적인 코드라면?

2초뒤에 '안녕하세요'가 출력되고 이후 '안녕히 가세요'가 출력이 됨.

 

그러나 위같은 경우는 비동기적인 코드로 

먼저 코드를 적은 '안녕하세요'보다 '안녕히가세요'가  2초빠르게 실행함

 

 

1. 인터넷 속도 의존

2. 유저 인터랙션

속도가 느려도 인터랙션은 되어야 함

 

자바스크립트는 웹에 치중되어있고 웹은 인터넷 속도에 굉장히 의존적임

무슨말이냐 하면 대량의 데이터가 있는 사이트를 들어갔을때 로딩하느라 아무런 화면이 뜨지않으면 유저들은 답답해 할 수 밖에 없음

따라서, 페이지 요청을 보내면 일단은 로딩창을 띄워놓고 로딩이되면 해당 페이지를 띄워주는 경우가 많음

ex) 페이스북, 토스 등...

 

 

 

Call back 

(== 다 되면 알려줘)

함수가 끝나고 난 뒤에 실행되는 함수

 

자바스크립트에서 함수는 객체이다. 

따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있다.

인자로 대입되는 함수를 콜백함수라고 부른다.

 

다른 코드가 특정 코드가 마무리되기 전에 실행되지 않도록, 즉 비동기처리를 위한 방법

 

 

[Callback의 구조]

 

Wait for half a sec. 를 출력 후

0.5초 이후에 callback()를 실행함

 

 

 

예제1) 

sayGoodbye에는 함수 "()=>console.log('안녕히 가세요')"가 대입됨

1. 2초후에 sayHello함수가 실행

2. console.log("안녕하세요")의 출력됨

3. sayGoodbye함수가 실행되서 "안녕히 가세요"가 출력됨

 

 

예제2)

위의 두 가지 방법 모두 같은 결과를 가짐

이러한 방식으로 콜백을 이용해 특정 로직이 끝났을 때 원하는 함수를 실행시킬 수 있음!

 

 

Callback Hell (콜백지옥)

비동기 처리에 콜백함수를 이용하게 되면 비동기 처리를 중첩시켜서 코드를 작성하기때문에 에러, 예외처리가 어렵고 중첩으로 인한 복잡도가 증가하게 됨

• 웹서비스를 개발하는 경우 서버에서 데이터를 받아오고 화면에 표시하기까지 수많은 비동기 처리를 하게 되면서 위와같은 콜백지옥 현상이 나타나게 됨.
• 코드의 가독성도 매우 떨어짐.

 

 

Promise

언젠가 해결할 것이란 약속

 

 

예제1)

resolve()를 넣음으로써

sayHello2함수를 실행했을때 성공을 하면 .then()이후의 함수가 실행되도록 함

 

 

예제2)

resolve()안에 인자값을 넣어 실행할 수도 있음.

data는 임의로 작성한 이름(변경가능)

 

※ catch함수를 사용하기도 함

 

 

Async Function

Then을 더 직관적으로 쓰고 싶다

 

 

1. 어떠한 함수 앞에 async를 적는다.

2. 비동기적인 함수에서 오래걸리는 함수 앞에 await를 적는다.

 

 

예제1) await 적용

1. merona를 인자로 넣은 sayHelloBye() 실행

2. await를 따라 sayHello2()를 실행(merona가 인자값으로 들어감)후 값을 기다림

3. setTimeout() 실행 -> 3초뒤에 '메로나님 안녕하세요' 출력

4. resolve()를 콜백함(서울이 인자값으로 들어감)

5. 반환값으로 loc에 '서울'이 들어오고 '서울로 안녕히 가세요' 출력

 

 

예제2) await 적용x

1. merona를 인자로 넣은 sayHelloBye() 실행

2. sayHello2()를 실행

3. setTimeout() 실행 -> 3초간 기다려야 하므로 먼저 다음코드인 "loc + '로 안녕히 가세요'"를 출력

4. 하지만 loc에 반환값이 없기때문에 loc에는 [object Promise]라는 없는값이 넣어짐

5. 3초뒤에 '메로나님 안녕하세요' 출력

6. resolve()를 콜백함(서울이 인자값으로 들어감)

7. 반환값으로 loc에 '서울'이 들어옴

 

 

※ Async, Callback 정리

• 비동기의 문제를 해결하기 위한 callback
• 작업이 완료되면 알려주는 callback은 가독성이 좋지 않았다.
• 그래서 나온 것이 완료를 약속하는 Promise 다.
• Then과 catch로 편리한 사용이 가능하다.
• 더 편리하게 만든 것이 async/await이다.