[JS] 데이터 전송 형식

1. CSV 형식

- CSV(Comma Separated Values)는 각 항목을 쉼표로 구분해 데이터를 표현하는 방법

<script>
	var input = '';
	input += '모던 웹 디자인을 위한 HTML5 + CSS3 입문, 한빛미디어, 윤인성, 30000원\n';
	input += '모던 웹을 위한 JavaScript + jQuery 입문, 한빛미디어, 윤인성, 32000원\n';
	input += '모던 웹을 위한 node.js 프로그래밍, 한빛미디어, 윤인성, 25000원';
	
	// 한 줄씩 자름
	input = input.split("\n");
	for(var i=0; i<input.length; i++){
		// 쉼표를 기준으로 자름
		input[i] = input[i].split(',');
		for(var j=0; j<input[i].length; j++){
			//각 데이터 양 옆의 공백을 제거함
			input[i][j] = input[i][j].trim();
		}
	}
</script>

- 많은 양의 데이터를 전송할 때 활용하면 좋지만 가독성이 떨이짐

---

2. XML 형식

- HTML 형식처럼 태그로 데이터를 표현

<?xml version="1.0" encoding="UTF-8"?>
<books>
	<name>모던 웹 디자인을 위한 HTML5 + CSS3 입문</name>
	<publisher>한빛미디어</publisher>
	<author>윤인성</author>
	<price>30000원</price>
</books>	
<books>
	<name>모던 웹을 위한 JavaScript + jQuery 입문</name>
	<publisher>한빛미디어</publisher>
	<author>윤인성</author>
	<price>32000원</price>
</books>	
<books>
	<name>모던 웹을 위한 node.js 프로그래밍</name>
	<publisher>한빛미디어</publisher>
	<author>윤인성</author>
	<price>25000원</price>
</books>	

- HTML처럼 각각의 태그에 사용자 정의 속성을 넣어 데이터를 표현할 수도 있으므로 복잡한 데이터를 전달할 수 있다

- 하지만 닫는 태그와 여는 태그 등이 쓸데 없이 용량을 차지하는 문제가 있음

---

3. JSON 형식

- CSV 형식과 XML 형식의 단점을 모두 극복한 형식이 JSON(JavaScript Object Notation) 형식

- 자바스크립트에서 사용하는 객체 형태로 데이터를 표현하는 방법

- Ajax를 사용할 때 거의 표준으로 사용되는 데이터 표현 방식

<script>
	[{
		"name": "모던 웹 디자인을 위한 HTML5 + CSS3 입문",
		"publisher": "한빛미디어",
		"author": "윤인성",
		"price": "30000원"
	}, {
		"name": "모던 웹을 위한 JavaScript + jQuery 입문",
		"publisher": "한빛미디어",
		"author": "윤인성",
		"price": "32000원"
	}, {
		"name": "모던 웹을 위한 node.js 프로그래밍",
		"publisher": "한빛미디어",
		"author": "윤인성",
		"price": "25000원"
	}]
</script>

- JSON에는 객체, 배열, 문자열, 숫자, 불, null만 들어갈 수 있음

- 문자열은 무조건 큰 따옴표를 사용

- CSV 형식과 달리 데이터의 가독성이 좋음

- XML 형식보다 적은 용량으로 데이터를 전달할 수 있으므로 최근 들어 가장 많이 사용되고 있는 데이터 전달 방식

- 하지만 데이터 양이 엄청나게 많아지면 데이터 추출 속도가 현저하게 떨어진다.