자바스크립트의 비동기 처리

비동기 처리란??

특정 코드의 연산이 끝날때까지 코드의 실행을 멈추지 않고 원하는 코드를 실행하는 자바스크립트의 특성이다.
이 특성을 통해 코드의 실행중에 원하는 function을 불러와 실행가능하다.
이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리다.

자바스크립트의 특성들은 다음과 같다.

- 자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다.
- 객체로 다루기 때문에 함수를 변수 or 다른 함수의 변수처럼 사용할 수 있다. 
- 객체로 다루기 때문에 함수의 인자를 callback, finishFunc 로 사용할 수 있다.
- 비동기 처리를 통해 코드 중간에 객체인 메소드를 추가하여 실행가능하다.

비동기처리로써 사용되는 예제는 다음과 같다.

- Ajax 
- setTimeout
- callback
- promise
- async & await

 

비동기 처리 Ajax 

웹 서비스를 개발할 때 ajax 통신은 자주 사용되다. 
화면의 이동없이 원하는 데이터를 동적으로 출력하고 싶을때, 원하는 데이터를 서버에서 불러오거나 서버에 입력할때 사용할 수 있다.

비동기 처리 setTimeout

WebAPI의 한 종류로써 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다.
setTImeout에 즉시실행함수(IIFE)를 조합하여, 시간차를 두고 작성 가능하다.

비동기 처리 callBack

콜백 함수란 파라미터로 함수를 전달하는 함수다.
즉 함수로써 객체인 인자를 callback이라 쓰고, 호출도 callback으로 호출한다.
var i나 j처럼 원하는 이름으로 인자의 이름을 정할 수 있으나 보통 callback으로 쓰고 호출한다.
 

비동기 처리 promise

주로 서버에서 데이터를 불러오고 화면에 표시할 때 사용한다.
3가지 처리 상태를 이용하여 불러오는 상황에 맞춰 원하는 결과를 표시 할 수 있다.
데이터를 불러오기 실패한 경우에 대한 처리도 가능하다.

비동기처리 async & await

async는 function 앞에 붙여 사용하며, 함수의 리턴을 반드시 promise형태로 한다.
promise형을 리턴하는 함수가 필요할때 도움이 되며, await는 async함수 안에서만 동작한다.
특정 라인의 promise가 진행될때까지 기다리도록 하는 명령어이다.