자바스크립트 비동기 통신 (Ajax,axios,async await)

일단 비동기 통신이 무엇인지 알고 넘어가면 더 이해가 빠를거라고 생각합니다.

 

일반적으로 주어진 프로그램은 한 번에 한 가지만 발생하며 실행됩니다. 함수가 다른 함수의 결과에 의존하는 경우 다른 함수가 완료되고 반환 될 때까지 기다려야하며 그 때까지 전체 프로그램은 기본적으로 사용자의 관점에서 중지됩니다.

다른 작업이 다른 프로세서 코어로 이동하도록하고 작업이 완료되면 알려줄 수있을 때 무언가를 기다리는 것이 의미가 없습니다. 이를 통해 그 동안 비동기 프로그래밍 의 기초가되는 다른 작업을 수행 할 수 있습니다. 

 

페이지가 호출됬을때에 한가지만 발생하지 않고 여러프로그램들이 백그라운드에서 돌아가는 것을 의미합니다.

현대의 소프트웨어 디자인은 프로그램이 한 번에 두 가지 이상의 작업을 수행 할 수 있도록 비동기 프로그래밍을 사용하는 방식으로 점차 발전하고 있습니다.

 

 

예를 들면 네이버 바이브라는 음악페이지를 보시면

 

 

바이브는 Vue를 기반으로 제작이 됬는데 여러개의 컴포넌트를 사용해서 페이지를 만든 모양입니다.

보시면 실제로 버튼들을 눌러보면 페이지가 이동되는것 처럼 보이지만 이건 한페이지에서 모두 일어나는 일입니다.

음악을 재생하고 재생목록을 띄울수 있으며 메뉴별 페이지도 각각 이동이 가능합니다. 

 

 

 

개발자 창을 보시면 수 많은 네트워크통신들을 보시면 많은 작업들이 이뤄진다는걸 확인할수 있습니다.

 

새로고침이 안되며 여러개의 웹화면을 보여주고 변경할수있습니다. 페이지의 한부분만 불러와서 쓸수 있기때문에 속도도 빠르고 필요없는 리소스데이터도 낭비 안할수 있습니다.

 

장점이 있으면 단점도 있겠죠? 따로 히스토리데이터가 남지않습니다.

페이지가 이동되지않기때문에 보안에도 위협이 있을수 있습니다. 그리고 연속으로 큰 데이터를 전송하다보면 부화가 걸릴수도 있습니다. 이와 같기 때문에 상황에 맞게 동기와 비동기식 통신을 같이 사용하면 더 좋은 웹페이지를 만들수 있을것같습니다. 

 

 

일단 언어는 PHP와 프레임워크는 라라벨을 사용했습니다.

서버에 통신을 보내고 그에 대한 응답을 받는것으로 테스트를 진행해봤습니다. 제일 많이 사용하는 세개라고 생각되서 이렇게 세개를 준비했습니다. axios나 async await같은 경우에 Promise는 Promise기반으로 생각되어서 제외했습니다 

 

 

 

Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)

 

일단 제일 기본적으로 제일 많이 사용하는 Jquery의 Ajax 통신을 알아보겠습니다.

자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다.라고 생각하시면 쉬울것같습니다. 그리고 Ajax는 자바스크립트의 라이브러리 중 하나입니다. 하지만 jquery를 쓰는 이유는 

자바스크립트로 ajax를 사용할때보다 코딩량이 현저히 적기 때문입니다.그리고 브라우저마다 구현방법이 다른 단점이 있는데 jquery는 다른 브라우저들에서도 같은 동작을 할 수 있게 됩니다.  

 

코드를 볼까요? 처음보면 진짜 복잡하다고밖에 생각이 안드네요.

쉽게 설명하면 전송타입을 설정하고 dataType 을 설정하고 url에 보낼주소를 적고

data에 전송할 데이터를 전송한다. 라고 생각하시면 됩니다. 

 

듣기엔 간단하지만 실제 작성하고 진행할때는 어려웠던 기억이 있네요.

success는 말그대로 통신에 성공했을때를 나타내는 것이고

error는 실패했을때 나타나는 상황입니다. 

 

만약에 이대로 진행한다면 console.log(data) 가 먼저 출력될까요 ? 아니면 ajax를 빠져나가고 test가 출력될까요.

정답은 test가 출력되고 data가 출력됩니다. 서버에 통신하는동안 다음스크립트는 진행이 됩니다. 이것을 막기위해 방법이 ajax도 있습니다async라는 속성을 줘서 먼저 실행되어야 다음으로 넘어가게끔 하는 속성이 있네요. 

 

 

 

Axios

 

엑시오스는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 제가 Vue를 사용하다 보니 요즘 제일 많이 접하는 라이브러리네요.  이것도 ajax랑 같은 비동기 처리방식이기 때문에 요청후 결과값을 받아서 처리를 하는 형식으로 작성하시면 됩니다. 제일 편한 점은 JSON 데이터 자동변환이라고 생각됩니다.

 

axios의 코드를 볼까요? 

 

정말 간단하지 않나요?? 일단 제일 큰점은

ajax같은경우에는 사이트 간요청 위조 (XSRF)를 막아주기 위해 라라벨은 csrf 토큰을 사용하며 헤더에 붙혀서 작성해야됬는데

axios는 따로 설정부분에 설정을해서 제외하고 작성을 해주며 코드의 가독성이 좋아집니다.

엄청 간단하죠? 기본적으로 JSON 으로 전송받기 때문에 따로 타입은 없습니다.

 

getMsg라는 주소에 보내고 then으로 받습니다. 

Post전송시에는 axios.post로 가능합니다. 다만 node.js를 사용해야 하고 설치를 해야되는 단점이 있습니다. 브라우져의 호환성도 좋기때문에 프레임워크 사용시에는 쓰는게 정말 좋을 것같습니다.

 

 

 

Async await

 

async/await는 ECMAScript 2017(ES8)에 추가된 새로운 방법으로 IE를 포함한 오래된 브라우저는 지원하지 않습니다.

async/await를 사용할 경우 함수 또는 메서드 앞에 async 키워드를 사용하고 내부에 async 키워드를 사용해 비동기 통신 요청을 처리합니다. async/await는 오류 디버깅을 위해 try...catch 구문을 사용합니다.

 

 

아까 ajax에서 사용했던 속성과 같은 async 함수라고 생각하시면 됩니다. 비동기 통신이 완료되고 나서 다음 코드가 시작됩니다.일반 함수도 비동기적으로 사용할수 있기때문에 굉장히 유용할것같습니다. await는 async 함수 안에서만 돌아갑니다. 

 

이와말고도 Fetch API도 있고 그냥 Promsie만 사용해서 하는 것들도 있습니다만 의미는 비슷하기 때문에 제외했습니다.비동기 통신을 사용하면서 더욱 더 반응있고 빠른 사이트를 만들어보시면 좋을 것같습니다. 감사합니다.