1. 동기와 비동기
1-1 동기
코드 흐름이 위에서 아래로 이동, 각 작업이 완료될 때까지 다음 작업 실행되지 않음
1-2 비동기
- 작업이 백그라운드에서 실행되거나 완료될 때 까지 기다리지 않고 다음 코드 실행
- 콜백함수, Promise, asyne/await와 같은 매커니즘을 사용해 비동기 작업을 다룸
- 여러 작업을 처리하여 동기처리보다 효율적이지만 복잡해질 수있음
*자바스크립트에서는 기본적으로 시간이 걸리는 작업은 비동기로 처리한다.
위와 같이 setTimeout함수를 사용해 displayB 함수가 2초동안 시간이 걸리게 설정한다면
A->C->B순서로 처리된다.
그렇다면, A->C->B가 아닌 A->B->C 순서로 처리가되어야 할때는 어떻게 해야할까?
위의 사진처럼 displayB에 이어 displayC를 실행 하도록 콜백 함수를 사용
1-2-1 비동기 처리 시 사용방법
| 방법 | 버전 | 기능 |
|---|---|---|
| 콜백함수 | 기존부터 사용 | 함수 안에 또다른 함수를 매개변수로 넘겨서 실행순서를 제어, 콜백함수가 많아지면 가독성이 떨어질 수 있음 |
| promise | 에크마스크립트 2015부터 사용 | 프로미스 객체오 콜백함수를 사용해 실행순서 제어 |
| async / await | 에크마스크립트 2017부터 사용 | async와 await 예약어를 사용해 실행순서 제어 |
2. 콜백함수
-
다른함수의 매개변수로 사용하는 함수
- ex) 함수 A안에 함수B를 매개변수로 지정하면 함수A 실행 후 이어서 함수B 실행
2-1. 함수 이름을 콜백으로 사용
-> order에 coffee와, callback함수로 display를 인자로 넣어 넘겨 준다
그렇게 되면 order 함수가 실행되면서 '아메리카노 주문접수' 가 먼저 실행 된 후
setTimeout함수가 실행되 3초 후 display함수가 실행된다.
2-2. 익명으로 콜백 함수 작성하기
콜백 함수를 사용할때, 한번만 실행하고 끝날 경우에는 함수 안에 익명 함수로 직접 작성하기도 한다.
-> 하지만 이런 코드는 추천하지 않음!
읽기도 어렵고 서버에서 자료를 가져다 처리하는 코드인 경우에는 더 복잡함
또 코드에서 오류가 발견된다면, 디버깅도 쉽지않고, 계속 콜백이 반복되면 콜백지옥에 빠질수도...
3. 프라미스 ( Promise )
3-1. 프라미스 객체
프라미스(promisse)는 처리에 성공했을 때와 실패했을 때의 반환결과를 미리 약속해둔 것
(대게 프라미스는 직접만들지 않고 미리 만들어져 있는 프라미스 객체를 사용)
-> 프라미스 객체는 성공이나 실패에 따라 반환할 값만 있을 뿐 성공하거나 실패했을 때 실행할 명력을 가지고 있는 것은 아니다. 즉 판단만 실행함
3-2. 프라미스를 실행하는 then과 catch함수
- 프라미스는 성공과 실패를 판단하고 결괏값을 반환, 그 결과값을 받아서 처리하는 부분은 직접 작성해야 하는데 그 때 사용하는 함수가 then과 catch함수
then ( ) :: 성공했을때 실행할 내용
catch ( ) :: 실패했을때 실행할 내용
1) 코드 첫줄에서 likePizza = true 로 지정했으므로 promise안에서 resolve함수를 실행
2) resolve함수를 실행했으니 then과 catch중 then함수를 실행
3) then함수에서 result는 promise에서 성공할때 넘겨준 값, 즉 resolve 함수 안에 있는 '피자를 주문합니다'라는 텍스트가 담김.
Promise 체이닝
이 코드를 좀 더 간결하게 표한하기 위해, 같은 promise에서 사용할 then, catch함수를 다음과 같이 하나로 만들 수 있는데 이것을 Promise 체이닝이라고 한다.
4. async / await
promise는 콜백지옥이 생기지 않도록, 코드를 읽기 쉽게 바꾸지만 그렇다고 체이닝을 사용해서 계속 연결할 경우, 콜백지옥처럼 코드가 복잡해 질 수 있음
- 함수를 선언 할 때 함수 앞에 asyne를 붙여서 선언하면 그 함수 안에서는 await를 붙여서 비동기 처리가 가능
4-1. await 예약어
자바스크립트에서 비동기 코드를 실행할 때 유용하게 사용하지만 async 함수에서만 사용 가능
( 즉 await를 사용하기 위해서는 async function을 만들어야 함 )
1) init함수 안에서 비동기 처리를 할 것이므로 init함수 선언 앞 부분에 async를 붙임
2) 에크마스크립트 2015 이후 등장한 fetch 함수는 네트워크를 통해 서버의 자료를 가져옴, 서버에서 자료를 가져오면 아무래도 시간이 걸리기 때문에 fetch 앞어 await를 붙여 시간이 얼마나 걸리든 자료를 가져오기가 끝난 후에 다음코드로 넘어가도록 설정
3)responese.json 함수는 서버에서 가져온 프라미스 객체를 프로그램에서 사용할 수있는 객체로 변환, 이 과정도 시간이 걸릴 수 있기 때문에 await를 붙임 ( response 변수에는 프라미스 객체가 할당 됨)
4) 변환된 객체 users를 터미널 창에 표시
