비동기 처리와 Axios

대부분 프로그래밍의 시작은 항상 동기화된 방식을 이용합니다.

동기화된 방식이라는 의미를 간단히 코드를 사용해서 알아봅시다

result1 = doA( ); result2 =doB(result1) result3 = doC(result2)

위의 코드는 흔하게 볼수있는 순차적으로 동기화된 코드입니다

doA를 실행해서 나온 결과로 result1을 이용해서 doB 를 호출하는 방식이므로 코드의 진행 순서는 

doA( )-> doB( ) -> doC( ) 의 순서대로 호출될 것을 알수 있습니다.

 

동기화된 방식의 단점은 doA( )의 실행이 완료 되어야만 doB( )의 실행이 가능하다는 점인데

doA ( ) 가 결과를 반환할 때까지 다른 작업은 실행되지 않기 때문에 동시에 여러 작업을 처리할 수 없다는 단점이 있습니다.

 동기화된 방식은 쉬운 예로들면 "점원이 한명뿐인 테이크아웃 카페" 와 같습니다 점원이 한명이기 때문에

여러 명의 손님이 오면 첫 번째 손님이 끝날때까지 다음 손님의 주문 처리는 불가능 합니다.

 

비동기 방식은 커피 가게에 여러 명의 점원이 있는 상항과 유사합니다.

점원이 여러명이면 한명은 주문을 계속 받고, 다른 점원은 계속해서 커피를 제조할 . 수있게 됩니다.

손님들은 대기하고 있다가 자신이 주문한 음료가 나왔다는 사실을 통보 받고 음료를 가져가게 됩니다

 

비동기 방식의 핵심은 통보에 있는데 비동기는 여러 작업을 처리하기 때문에 나중에 결과가 나오면 이를 통보

해주는 방식을 이용합니다 이러한 방식을 전문용어로는 콜백(callback)이라고 합니다

 비동기 방식은 doA ( ) 를 호출 할때 doB( )를 해줄 것ㅇ르 같이 파라미터로 전달합니다.

이를 그림으로 표현하면 다음과 같은 구조가 됩니다

function doA( callback){ result1 = ... callback (result1) }

앞의 코드는 파라미터로 전달되는 콜백을 내부에서 호출하는데 자바 개발자들에게는 익숙하지 않은 코드입니다

자바에서 함수를 파라미터로 전달하는 개념은 JAVA8에서 람다식이 도입되면서 부터인데

자바 스크립트에서 함수는 '일급 객체 (first - class object)'로 일반 객체와 동일한 위상을 가지고 있으므로 

파라미터가 되거나 리턴타입이 될  수 있어서 앞의 그림과 같은 코드가 가능합니다

 

비동기 방식에서 콜백을 이용하는 것이 해결책이 되기는 하지만 동기화된 코드에 익숙한 개발자들에게는 조금만 단계가

증가해도 복잡한 코드를 만들어야 하는 불편함이 있습니다.

 

자바스크립트에서는 Promoise라는 개념을 도입해 비동기 호출을 동기화된 방식으로 작성 . 할수. ㅣㅆ는

문법적인 장치를 만들어 줬는데 Axios는 이를 활용하는 라이브러리 입니다

Axios : https://axios-http.com/kr/docs/intro 

시작하기 | Axios Docs

 

이 Axios를 이용하면 Ajax를 호출하는 코드를 작성할  때 마치 동기화된 방식처럼 작성할 . 수있어서

자바스크립트를 기반으로 하는 프레임워크(Angular)나 라이브러리들 (React,vue)에서 많이 사용되고 있습니다.