비동기 통신 (fetch API, Ajax), 동기와 비동기

웹이나 앱개발을 하다보니 비동기, 동기에 대한 개념을 온전히 확립해야 겠다는 생각이 들었다.

때문에 비동기 통신에 대한 개념을 배우고 정리한다.

 

비동기 통신

비동기 통신에 대해 알아보기 전에 먼저 동기와 비동기에 대해서 알고 넘어가자.

동기

동기는 '동시에 일어난다(synchronous)'라는 뜻으로 시간이 오래 또는 짧게 걸리는 것과 관계없이 반드시 어떤 요청에 대한 결과가 동시에 일어나야 한다.

즉, 어떤 코드를 실행시키면 그 코드의 실행이 완전히 끝나기 전까지 다음 코드가 실행될 수 없다.

 

비동기

비동기는 '동시에 일어나지 않는다(Asynchronous)'라는 뜻으로 동기와 반대로 요청과 결과가 동시에 일어나지 않을 것이라는 약속이다. 요청과 결과가 동시에 일어나지 않아도 되기 때문에 요청만 발생하고 다음 코드로 넘어가 다른 코드를 실행할 수 있다. 즉, 요청에 대한 결과를 받길 기다리면서 다음 코드도 실행할 수 있는 것이다.

동기와 비동기

동기 방식은 설계가 간단하고 직관적이지만 요청에 대한 결과를 받기 전까지 작업이 지연되는 문제가 있다.

비동기 방식은 동기보다 복잡해 코드를 구현하는 것이 어려울 수 있지만 요청에 대한 결과를 받는 시간이 오래 걸리더라도 그 시간동안 다른 작업을 수행할 수 있기 때문에 자원을 효율적으로 사용할 수 있다는 장점이 있다. 또한 비동기 방식은 새로고침, 즉, 웹을 구성하는 많은 요소들을 다시 리로드하지 않아도 필요한 부분만을 불러와 사용할 수 있다.

 

동기와 비동기는 목적에 따라 다르게 사용하면 된다.

 

AJAX (Asynchronous Javascript And Xml)

에이잭스(ajax)는 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이다. 에이잭스 방식을 사용해서 비동기 방식으로 클라이언트에서 서버에게 데이터를 요청할 수 있다.

 

에이잭스는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 요청(Request)한다. 이 경우에는 JSON이나 XML의 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 절약할 수 있다.

 

AJAX (비동기 통신)의 방법

• XMLHttpRequest 객체
• fetch API (ES06)
• Axios 라이브러리
• jQuery

에이잭스라는 기술을 사용하기 위해 위와 같은 다양한 방법 또는 라이브러리들을 사용할 수 있다.

 

AJAX 실습

AJAX, 비동기 통신을 실습해보자. AJAX를 가장 쉽게 실습하기 위해 fetch API를 사용하겠다.

<script>
	fetch("hi.txt").then(function(response) {
    		response.text().then(function(text){
        		alert(text)
        })
    })
</script>

위 코드와 같이 html의 script 태그 안에 javascript 코드를 작성했다.

• hi.txt라는 파일을 불러오기 위해 fetch 함수를 사용했다.
• fetch함수는 then이라는 메서드를 지원한다. then이라는 메서드를 사용해서 비동기 방식을 사용할 수 있다.
• hi.txt라는 파일을 불러온 결과를 then안에 있는 함수의 인자로 넘긴다.
• 이때 then 안의 함수는 콜백(callback)함수라고 부른다. 콜백 함수는 반환값을 인자로 받기 때문에 callback 함수라고 불린다.
• 결과적으로 fetch와 then을 사용해 비동기 통신을 구현했다.

 

코드 정리

<script>
	fetch("hi.json").then(function(response) {
    	return response.json()
    }).then(function(data) {
    	return data.id
    }).then(function(data) {
    	console.log(data)
    })
</script>

• 위 코드는 ajax 설명 예시 코드를 조금 다르게 변형한 것이다.
• hi.json 파일을 가져와 비동기 방식으로 구현했다.
• hi.json 파일을 읽어와 response로 callback 함수에 넘기고 callback 함수는 response를 .json() 메서드로 json화한다.
• 이후 반환된 json형식의 데이터는 다음 콜백함수로 넘어가 data의 id를 반환하도록 한다.
• 또 다시 반환된 id는 data라는 이름으로 다음 콜백함수로 넘어가 console.log를 실행한다.
• 위 방식은 fetch.then().then().then()으로, 콜백함수를 내부로 겹쳐쌓는것이 아니라 바깥에서 받을 수 있도록 했다.