동기, 비동기
ajax와 axios는 비동기처리가 가능한 통신 방법입니다. 여기서 비동기란? 무엇인가 부터 알고가겠습니다. 그럼 동기, 비동기란? 간단하게 말하자면 어떤 음식점에 10명의 손님이 왔는데 주문을 1명의 주문을 받고 음식을 다 만들고 다음 2번째 손님의 주문을 받고 음식을 만들고 3번째... 이런식으로 하나의 주문을 받고 음식이 완성될 때까지 다음 손님은 기다리는게 동기 방식 즉 하나의 요청을 처리하고 응답을 줬을때 다음 작업을 할 수 있다.그리고 비동기는 10명의 주문을 한번에 받아 음식이 나오는 대로 손님한테 주는것이 비동기 처리이다.
ajax??
ajax는 Asyncronouse Javascript and XHTTPrequest의 약자이며 http통신을 비동기적으로 할 수 있게 하는 방식의 하나이며 데이터가 업데이트 될 때마다 페이지 전체를 받아오는 대신 화면에서 표시되는 일부 필요한 부분의 데이터에 대해서만 받아와서 업데이트하기 위해 도입 되었다.
예시코드
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200 || xhr.status === 201) {
console.log(xhr.responseText);
} else {
console.error(xhr.responseText);
}
}
};
xhr.open('GET', 'http://localhost');
xhr.send();위 코드는 전통적인 ajax의 사용코드이며 위 코드는 구글링으로 복사해온 코드입니다. 위 코드는 jQuery를 사용하지 않고 사용하여 복잡하기도 하고 가독성도 떨어져 보입니다. 그렇기 때문에 현재 사용을 안하는 코드다보니 저는 따로 사용은 하지않고 보여주는 식으로 했습니다. 그럼 현재에 사용하는 jquery ajax를 알아보자
jquery ajax
jquery는 ajax뿐만 아니라 HTML을 사용하며 그때 자바스크립트가 필요할때 사용하며 자바스크립트를 편리하게 사용할 수 있게한다. 지금은 ajax에 대해서만 알아보자. 전통방식의 코드와 비교해서 보자.
예시코드
$.ajax({
type:'post',
url: "https://api-sms.cloud.toast.com/sms/v3.0/appKeys/" + appkey + "/sender/sms",
headers: {
"Content-Type": "application/json;charset=UTF-8",
"X-Secret-Key": secretKey
},
data: JSON.stringify(data),
/* data */
error:function(e){
console.log(e)
},
success: function(res){
console.log(res)
let inputToken = $("#token").val(token)
alert("인증번호가 발송되었습니다. 확인해주세요.")
$("#checknumreceive").text("인증번호 재발급")
}
})
})위 코드는 제가 SMS인증번호 관련해서 만든 ajax를 활용한 문자 보내기 코드입니다. 위처럼 $.ajax $(달러)이게 jquery문법이며 jquery를 사용하겠다는 표시입니다. 그리고 type은 get post가있고, url은 내가 통신하겠다는 곳의 주소 headers는 request header(요청헤더)에 담길 내용들이며 data는 요청 받을 곳의 필요한 데이터를 넣어주는것이며 error success는 보이는 그래도 에러일때와 성공했을때에 들어오는 값을 볼 수 있다.이렇게 예전에 사용했던 거와 비교하면 좀 더 직관적이게 변했다.
axios
axios는 node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리이며 비동기로 HTTP통신을 할 수 있으며 return을 promise객체로 해주기 때문에 response데이터를 다루기 쉽습니다.
예제코드
export async function sendTokenToSMS(myphone, mytoken){
const appKey = ""
const XSecretKey = ""
const sender = ""
const result = await axios.post(`https://api-sms.cloud.toast.com/sms/v3.0/appKeys/${appKey}/sender/sms`,
{
body:`안녕하세요. 인증번호는 ${mytoken}`,
sendNo: sender,
recipientList:[{internationalRecipientNo: myphone}]
}, {
headers: {
"Content-Type" : "application/json;charset=UTF-8",
"X-Secret-Key": XSecretKey
}
}
)위 코드를 보면 ajax와 크게 다르지 않습니다. 위 코드는 node.js를 활용해서 한 것이며 입니다. 다른점이라면 자바에서는 안쓰는 async await가 있습니다. 아까 axios에서 promise객체로 return값을 준다고 했습니다. 그게 async await를 사용하면 비동기처리를 하게 됩니다. async await가 없다면 요청에 대한 응답은 promise가 반환되어 나올껍니다. 왜냐?? 아직 요청은 갔는데 응답은 준다고만한 상태이니까. 그래서 async await를 써주면 return 값이 promise가 아닌 결과값 성공이던 실패이던 나오게 됩니다.
