Javascript 통신(AJAX)

목차

1. AJAX

2. AJAX의 원리

3. 코드로 보는 AJAX

4. AJAX의 발전과정(Fetch, Axios)

5. AJAX의 단점

---

1. AJAX

 

Asynchronous JavaScript and XML의 약어로써 자바스크립트와 XML을 이용한 비동기적 통신 방법이다.

 

X가 XML을 의미하긴 하지만 요즘에는 XML대신 JSON을 사용한다.

 

AJAX라는 말은 비동기 통신이라는 고유명사라고 봐도 무방하다.

 

 

---

2. AJAX의 원리

 

 

먼저, 브라우저는 어느 사이트에 접속과 동시에 서버에 화면을 그릴수 있도록 요청을 한다.

요청을 받은 서버는 브라우저에게 사이트의 화면의 기본 구조를 그린 템플릿을 전달한다.

 

<그림 1> AJAX의 원리 1

 

응답을 받은 브라우저는 템플릿(HTML과 CSS)을 해석하여 기초 화면을 그린다.

HTML에는 <script>라는 요청태그가 있으며, 그로인해 서버에서 JavaScript파일을 불러온다.

 

<그림 2> script로 인해서 서버로부터 JS파일을 불러온다

 

브라우저는 JavaScript 파일을 해석하여, 코드를 토대로 서버에 추가 데이터를 요청한다.

요청을 받은 서버는 응답으로 데이터를 보내주고, 브라우저는 받을 데이터로 화면을 그린다.

(받은 데이터를 해석하여 템플릿에 끼워 넣는다고 생각하자)

 

<그림 3>

 

 

---

3. 코드로 보는 AJAX

 

 

AJAX는 XMLHttpRequest를 이용해서 발달해왔다.

 

XMLHttpRequest를 이용한 코드를 보고, 단점을 파악하여 어떻게 발전해왔는지 알아보자.

 

const request = ({ method, path, body }) => {
    return new Promise((resolve, reject) => {
        const host = `http://localhost:3000`
        const xhr = new XMLHttpRequest()
        xhr.open(method, `${host}${path}`)
        xhr.setRequestHeader(`Content-type`, 'application/json')
        xhr.send(JSON.stringify(body))

        xhr.onload = () => {
            if(xhr.readyState === 4 && xhr.status === 200) {
                resolve(JSON.parse(xhr.response))
            } else {
                reject('error')
            }
        }
    })
}

 

 

XMLHttpRequest의 동작 코드이다.

 

매번 요청을 보내기위해 이러한 코드를 작성해야만 했다.

이렇게 길게 코드를 작성하지 않도록, 좀 더 간편하게 사용하기 위해 Axios나 Fetch라는 라이브러리들이 등장했다.

 

 

---

4. AJAX의 발전(Fetch, Axios)

 

위에서 봤듯이 AJAX를 사용하기 위해 너무 번거로운 코드를 항상 작성해야했다.

 

 

이를 보완하기 위해서 라이브러리(Axios)가 등장하고,

 

나중에서는 Fetch라는 비동기(Promise)방식의 Fetch API가 등장했다.

 

 

Fetch

 

내장 라이브러리 Fetch를 한번 코드로 알아보자.

 

// Fetch Javascript 내장
// url 주소를 전부 받는다
// return : response메시지를 객체화해서 보여준다
const response = await fetch('http://localhost:3000/comments', {
    method: 'get',
    headers: {
        "Content-type": "application/json",
    },
    body:null,
})

const body = await response.json()

 

 

 

Axios

 

외장 라이브러리인 Axios는 Fetch와는 다르게 HTML에서 <script> 태그로 요청을 해야 사용할 수 있다.

 

// axios 외부에서 만듬, XMlHttpRequest 기반
// <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// https://axios-http.com/kr/docs/example

const res = await axios.get(`http://localhost:3000/comments`)
const resPost = await axios.post(`http://localhost:3000/comments`, {
    content: "POST로 데이터 넣기"
})

 

 

---

5. AJAX의 단점

 

단점이 여러가지 있겠지만, 대표적으로 첫 페이지를 그릴때 복잡한 템플릿이라면 시간이 오래걸릴수 있다.

(CSR, 클라이언트 사이드 렌더링)

 

그리고 요청과 응답을 진행한 후에 통신 소켓을 닫아버리는 문제점도 있다.

이를 보완하기 위한 기술로 웹 소켓이라는 새로운 기술이 구현되었다.