Axios가 뭐였지?

테스팅을 하면서 벽에 부딪히면서 뭐가 문제였지 이유를 생각해보게 됐다.

근데 막상 생각해보니 Vue와 Node 사이를 연결해주는 Axios에 대해서 확실히 이해하지 않았다.

벽에 부딪히고 나니 바닥부터 다시 하나하나 다지고 넘어가야함을 느꼈다.

그럼 본질적으로 돌아가보자

우리는 이번 프로젝트에서 axios를 이용해서 frontend(vue)에서 backend(express)로 데이터 통신을 했었다.

main.js에 axios를 import했고

import axios from 'axios'
...
Vue.prototype.$http = axios

Client에서 데이터를 보내주면

this.$http.post("/api/show/tt", {
        student_id: this.$session.get("student_id"),
        tt_name: this.tt_name
    })
    .then(response => {
        if (response.status === 200) {
            console.log(response.data);
        }
});

다음과 같이 Server에서 해당하는 정보를 보내주었다.

router.post('/tt', function(req, res, next) {
    console.log(req.body.ttname);
    var student_id = req.body.student_id;
    var ttname = req.body.ttname;
    var ttshow_query = `SELECT code, color, course_name, credit, day, k_start, height, professor, size, start, time FROM user WHERE student_id=${student_id} and ttname='${ttname}';`
    console.log(ttshow_query);
    connection.query(ttshow_query, function(err, results, fields) {
        if(err) console.log(err);
        res.send(results);
    });
});

근데 막상 생각해보니 원리에 대해서 확실히 이해하지 않았다. 벽에 부딪히고 나니 바닥부터 다시 하나하나 다지고 넘어가야함을 느꼈다.

먼저 axios를 보면서 우리가 접했던 내용들을 최대한 이해하고 넘어가자.

Axios란?

HTTP 클라이언트 라이브러리 중 하나로

Vue에서 Ajax 요청을 하도록 도와주는 것이다.

Ajax는 뭔데 그럼…? ㅋㅋㅋㅋ

Ajax란?

Ajax는 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자로

XMLHttpRequest 객체를 이용해서 데이터를 로드하는 기법 이며 

JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 한다.

흐음.. XMLHttpRequest도 모르겠다..ㅋㅋ

XMLHttpRequest란?

xml은 html과 매우 비슷한 문자 기반의 마크업 언어이다.

xmlhttpRequest는 웹 브러우저와 서버 사이에 메소드가 존재해서 데이터를 전송하는 객체 폼의 API이다!

(api가 어려운 사람은 api에 대한 설명을 참고하길 바란다.)

http란?

인터넷에서 데이터를 주고받을 수 있는 프로토콜(컴퓨터 사이에서 메세지를 주고 받는 양식과 규칙)이다.

결론

조금 명확해졌다.

현재 backend에 있는 API가 XMLHttpRequest를 기다리고 있는데

Vue에서 해당 API에게 Request를 요청하게 해주는 것이 Axios다.

그리고 이 요청을 Ajax 요청이라고 한다..!!

Axios는 back과 front의 통신이 가능하게 해준 고마운 친구였다!