[JavaScript] 동기통신 vs 비동기통신 /xml vs json /Ajax 개념 및 jQuery Ajax vs Fetch vs axios에 대해서

☆작성 이유!☆

우리가 프로그래밍을 공부하거나 개발을 할 때 XML, JSON이라는 단어를 한 번쯤은 보게 되는데 이 두 가지의 개념과 차이점에 대해서 모르는 상태로 웹 개발을 했었다. 누가  xml은 뭐고 json은 뭐야? 왜 xml이 아니라 json을 사용해?라는 질문을 받았을 때 여기에 대한 질문에 대답할 수가 없었다. json형식이 뭐가 좋길래 xml이 아니라 주로 json형식을 사용하는지, 차이점은 무엇인지, jQuery vs fetch에 대해서 작성하려고 한다.

우선 ajax나 fetch에 대해서 설명하기 전에

동기 통신과 비동기 통신의 개념 및 이해를 하고 나서
xml과 json, yaml에 대한 기본 개념 및 차이점, 

마지막으로 jQuery Ajax와 Fetch 차이점에 대한 설명을 하고 마치겠음.

구글링을 통해 ajax나 fetch에 대한 설명으로 대부분 "비동기 HTTP 통신 방법을 쓴다."라고 적혀있는 문장을 볼 수 있다.
나는 이 문장을 읽고 제일 먼저 드는 의문이 "동기 통신은 뭐고 비동기 통신이 뭔데?" 였다.
그래서 동기 통신과 비동기 통신에 대해서 알아보려고 한다.

 

☆동기 통신 vs 비동기 통신

・동기 통신(Synchronous)

동기 통신은 간단하게 이야기하자면 페이지가 전체로 리로딩되는 것.

즉, 통신을 하는 동안은 다른 처리를 아무것도 못하고 통신에만 집중(single-thread)하는 것이다.

대표적인 예로 페이지를 이동할 때 페이지가 로딩되는 게 끝날 때까지 기다려야 하는 상황!

 

・비동기 통신(Asynchronous)

비동기 통신은 페이지는 가만히 있고 일부만 리로딩되는 것.

즉, 통신을 하면서 다른 처리를 동시에 병렬적으로 처리(multi-thread)를 할 수 있는 것이다.

대표적인 예로 데이터가 로딩되는 와중에 버튼을 클릭한다거나 다른 페이지로 이동하는 것과 같이 

통신 중인데도 기다릴 필요 없이 다른 처리를 하는 것!

 

・비동기 통신이 왜 생기고 왜 좋을까?

예전에는 동기 통신밖에 없었는데 동기 통신의 단점을 보완하기 위해서 비동기 통신이 생겼다.

동기 통신은 위에서 말했듯이

"통신 처리가 끝날 때까지 아무것도 못하고 가만히 기다려야 한다"라는 점과

"페이지를 새로 고침을 하기 때문에 유저가 수정한 부분이나 설정한 부분이 초기화가 된다."라는 단점 때문에 비동기 통신이 생겼다.

 

여기서 비동기 통신의 장점!

비동기 통신을 사용하면

"유저가 조작한 상태는 그대로 유지하면서 일부분만 데이터를 받아올 수 있다"

"통신 처리가 끝나지 않더라도 다른 작업을 할 수 있다."라는 장점이 있어서 비동기 통신을 사용하는 것이다.

 

하지만, 비동기 통신은 단점도 있다.

단점으로는 처리하는 순서를 제어할 수가 없어서 원하는 결과가 안 나오는 경우가 있을 것이다.

이럴 때는 async/await을 사용해 동기 통신으로 처리 순서를 제어를 해줄 필요가 있다.

 

예를 들어 아래의 코드를 실행해보자.

// getter 설정
get dataList() { return this._dataList }
private _dataList: UserInfoDto[] // 전체 유저 정보 저장할 리스트
// setter 설정
set dataList(v: UserInfoDto) { this._dataList = v }

// getter 설정
get data() { return this._data }
private _data: UserInfoDto // 추출한 유저 정보 저장 변수
 // setter 설정
set data(v: UserInfoDto) { this._data = v }

// 유저정보 가져오기
private getUserInfo()
{
	const userId = 1
    // 전체 유저리스트 취득
	this.dataList = this.Fetch.getUserInfoDto()
    // 취득한 리스트에서 userId가 1인 데이터를 찾아서 저장
	this.data = this.dataList.find(data => data.userId === userId)
}

내가 원하는 처리 순서는

1. 전체 유저 정보를 취득 요청 (request)

2. 취득 요청 종료 (response)

3. 취득한 유저 정보 리스트에서 userId가 1인 데이터를 추출해 this.data라는 변수에 저장

이지만 실제로 데이터를 가지고 오는 시간이 오래 걸린다고 가정을 하면 아래와 같은 순서가 된다.

 

1. 전체 유저 정보를 취득 요청(response)

2. 취득한 유저 정보 리스트에서 userId가 1인 데이터를 추출해 this.data라는 변수에 저장

3. 취득 요청 종료 (response)

라는 상황이 생길 수 있다.

 

이런 경우는 async/await을 사용해 동기 통신으로 해준다.

・async/await?

async는 얘는 비동기를 동기식으로 처리할 거야!라는 의미이고,

await은 이 메소드 안에서 await이 붙은 처리가 끝나야 다음 처리를 실행할거야!라는 의미다.

이 두 개를 사용하면 아래와 같은 코드가 된다.

// getter 설정
get dataList() { return this._dataList }
private _dataList: UserInfoDto[] // 전체 유저 정보 저장할 리스트
// setter 설정
set dataList(v: UserInfoDto) { this._dataList = v }

// getter 설정
get data() { return this._data }
private _data: UserInfoDto // 추출한 유저 정보 저장 변수
 // setter 설정
set data(v: UserInfoDto) { this._data = v }

// 유저정보 가져오기
private async getUserInfo() // 여기서 async! 동기 통신으로 처리 순서 제어할거야!
{
	const userId = 1
    // 전체 유저리스트 취득
	this.dataList = await Fetch.getUserInfoDto() // 여기서 await! 이거 끝나야 밑에 처리를 실행할거야!
    // 취득한 리스트에서 userId가 1인 데이터를 찾아서 저장
	this.data = this.dataList.find(data => data.userId === userId)
}

위의 코드를 실행하면 내가 생각했던 것과 같이

this.data라는 변수에는 userId가 1인 유저 정보가 저장된 것을 확인할 수 있다.

 

!여기까지가 동기/비동기 통신에 대한 설명!

---

그럼 동기/비동기 통신에 대해서 알아봤으니 이제 xml과 xml과 json이 무엇이고  어떻게 사용하는지 알아보자.

ajax와 fetch에선 "반환 값에 대해 객체로 사용하기 위해서는 json() 메서드를 사용"이라는 말이 있다.

이걸 봤을 때 기초지식이 얕으면 json..? 대충 느낌은 아는데 정확하게는 모르겠넹 ㅎ..라는 생각이 든다.

 

그래서 이번에는 서버에 데이터를 전달하는 데이터형식인 xml, json, yaml에 대해서 알아보려고 한다.

 

☆xml vs json vs yaml

테이블과 같이 어떤 구조를 가진 정보를 한줄의 텍스트로 표현해서 서버에 전달하는 데이터 형식.
즉, 서버와 주고받는 적합한 데이터 형식인 텍스트를 기술하기 위한 데이터 형식이다.

복잡한 데이터(구조화된 데이터)를 다룰 때 이용한다.
한줄로 작성하기 때문에 인간은 읽기 어렵지만 컴퓨터 입장에서는 읽기 쉽다.
(개발툴에서 인덴팅으로 사람이 읽기 쉽게 할 수는 있지만 실제로 컴퓨터가 받아들일 때는 한줄로 넘어간다.)

※ 구조는 문자열 숫자 등의 순수값, 여러 데이터들이 나열된 배열, 항목들과 데이터로 이루어진 테이블 형태일 수도 있다.

 

・xml(Extensible Markup Language)

-  데이터 형식을  작성하는 방법 중 하나가 xml이다.
- HTML과 비슷하게 태그(<○○></○○>)를 사용한 데이터 형식을 사용한다.
  ※ but! HTML과 달리 태그내(< >←중첩)의 작성은 자유롭게 할 수 있다.
- xml은 일일히 태그를 열고 닫아야하고 ide 자동완성 기능이 없으면 같은 텍스트를 두번 쳐야해서 작성하기 번거롭다.
- 인뎅팅을 넣어준 정보를 봐도 한눈에 정보를 알아보기도 힘들어서 가독성이 그다지 좋지는 않다.
- 하지만 json과 다르게 xml은 주석을 달 수 있다는 강점이 있다.

<?xml version='1.0' encoding='utf-8'>
<root>
    <employee>
        <employ>
            <ID>111</ID>
            <Name>Mike</Name>
            <Country>USA</Country>         
        </employ>
        <employ>
            <ID>222</ID>
            <Name>Nancy</Name>
            <Country>Canada</Country>
        </employ>
    </employee>    
</root>

・json(JavaScript Object Notation)

- json 중괄호({}) 또는 더블 코테이션("")을 사용한 데이터 형식을 사용한다.

- json은 xml보다 간결한 형태로 구조화 된 정보를 표시하므로 같은 정보를 json으로 표시하면 코드량도 적고 한눈에 알아보기 쉽다.
- 공백이나 종료 태그로 인한 사이즈 낭비가 없기때문에 효율성 향상이나 파일 사이즈의 절약을 목표로 한 데이터에 적합하다.
- xml과 다르게 주석을 달 수 없다.

[
    {'ID': '111', 'Name': 'Mike', 'Country': 'USA'},
    {'ID': '222', 'Name': 'Nancy', 'Country': 'Canada'}
]

 

・yaml(YAML Ain't a Markup Language) ※ 마크업 언어는 아님

- xml과 비슷하지만 xml보다 간결하고 대부분이 실제 데이터이다.
- 공백으로 인덱스를 사용해 데이터의 계층 구조를 나타내는 표기 방법이 기본적이다.
- xml과 마찬가지로 주석을 달 수 있다.

-
  ID: 111 # 주석 달 수 있음
  Name: Mike
  Country: USA
-
  ID: 222
  Name: Nancy
  Country: Canada

 

<작성 방법 비교표 예제>

XML	JSON	YAML
<Servers>   <Server>     <name>Server1</name>     <owner>Sung</owner>     <created>123456</created>     <status>active</status>   </Server> </Servers>	{    Servers:[     {     name:Srver1,     owner:Sung,     created:123456,     status:active     }   ] }	Servers:   -             name : Server1      owner:Jhon      created:123456      status:active

 

==========================================================================================

                                                                  아래부터는 추후 공부하고 작성하기

==========================================================================================

이제 마지막으로  비동기 통신 방법들에 대해서 알아보자.

☆jQuery Ajax vs fetch vs axios 

 

 

・Ajax 【Asynchronous JavaScript + XML】

JavaScript를 이용해 클라리언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신이다.

XMLHttpRequest(XHR) 객체를 이용해 전체 페이지가 아닌 일부 필요한 데이터만 다시 가져올 수 있다.

즉, Ajax = JavaScript의 xml 비동기 HTTP 통신방법

 

<예제>

 

・jQuery Ajax?

jQuery는 javaScript를 더 편리하게 사용하기 위한 라이브러리이며,

jQuery의 편리한 기능 중 Ajax가 있는데 Ajax를 더 쉽게 사용할 수 있도록 도입된 메서드가 jQuery Ajax이다.

위에서 언급한 ajax방식보다 직관적인 코드의 작성이 가능하다.

 

<예제>

 

 

 

・fetch?

최근에는 사용방법은 비슷하나, 비 동신 통신을 편리하게 이용할 수 있는 Fetch API가 등장했다.

fetch API는 ES6에서 지원되는 비동기 통신을 위해 등장한 javaScript 내장 API이다.

 

<예제>

 

 

fetch와 axios는 모두 외부 자원을 가져오기 위한 라이브러리에서 비동기적으로 동작하기 때문에 promise형을 반환.

 

・axios?

<예제>