JSON (1)

◉ HTTP 프로토콜로 전송할 때 3가지 방법 

 

1. CSV

  - Comma Separated Values의 약자로 각 항목을 쉼표로 구분해서 데이터를 표현하는 방법 

  - 문법 

values1, values2, values3, …  // 값을 나열해서 사용하면 됨 

   • 용량이 적고, 간단해 보임 

      단, 각 데이터가 무엇을 의미하는지 알기 어려움 

      → 이 단점을 보완하기 위해 XML 등장 

  - 엑셀에서도 CSV 형식으로 내보낼 수 있어서 편리하게 사용 가능 

  - 엑셀에서 데이터 입력 후, 다른 이름으로 저장 시 [ csv ] 형식으로 변경 → 메모장으로 열어보면 데이터가 위와 같이 쭉 나열되어 있음 

 

 

2. XML 

  - eXtensible Markup Language의 약자로 HTML 형식처럼 태그로 데이터를 표현하는 방식 

  - XML 사용하기 전에 XML 선언해주어야 함 

<?xml version=“1.0” encoding=“UTF-8” ?>

  - HTML 태그 처럼 미리 지정되어 있지 않고, 사용자가 직접 정의 가능 

    즉, 앞에 적은 태그명 때문에 데이터에 대한 이해는 빠름 

  - 데이터가 어떤 것을 의미하는지 알 수 있지만, 여는 태그와 닫는 태그로 이루어져 용량을 많이 차지한다는 단점 있음 

  - 대부분의 정보 사이트에서 RSS로 데이터를 제공할 때 사용함 

 

 

3. JSON

  - 자바스크립트 객체 표기법으로 데이터를 전달할 때 사용하는 표준 형식 문법 

{ “key” : “value” } 

  - key명을 다 적어야 하므로, 데이터의 양이 많아지면서 데이터 추출 속도가 느리다는 단점 있음 

  - XML보다는 문법이 간결해짐 

 

---

 

◉ JSON 소개 

 

▪︎ JSON 

 - JavaScript Object Nation의 약자

 - 자바스크립트에서 객체 표기법을 나타내는 것을 의미 

 - 표기법만 자바스크립트에서 파생되었을 뿐, 자바스크립트가 아닌 경량 데이터 교환 형식 

 - 많은 언어들이 데이터 저장 및 전송을 하기 위한 용도로 사용하는 텍스트 형식의 데이터 

 - 서버에서 순수 텍스트를 받아 Javascript 객체로 사용 가능

 

 

---

◉ JSON 구문

 

▪︎ JSON 문법 

 - JSON 구문은 Javascript 구문의 하위 집합

 - 데이터 : 이름 / 값의 쌍으로 구성, 쉼표로 구분 

    중괄호 { } : 객체 

    대괄호 [ ] : 배열 

 - ( 예시 )

{ "key1" : value1, "key2" : value2 }

  ⇒ key명을 큰따옴표로 처리해주어야 함 

 

▪︎ JS 문법과 비교 

// JS
{ key1 : value1, key2 : value2 }

// JSON
{ "key1" : value1, "key2" : value2 }

  ⇒ key명에 큰따옴표를 처리하는가 / 하지 않는가의 차이 

 

 

▪︎ JSON의 value (값)의 데이터 유형 

 - 문자열, 숫자, 객체, 배열, true/false, null

 

 ① JSON 문자열 

  - 큰 따옴표로 묶어야 함 

{ "name" : "구름" }

 

② JSON 숫자 

  - 따옴표 내에 적지 않고, 정수 또는 부동 소수점이어야 함 

{ "age" : 10 }

 

③ JSON boolean

  - 보통 결과가 true / false로 나오는 표현식을 의미 

  - true / false 키워드로만 작성해주면 됨, 따옴표 내에 적지 않음 

{ "email" : true }

 

④ JSON 객체 

  - JSON의 값으로 적는 객체는 자바스크립트 문법이 아닌 JSON 문법으로 작성해야 함 

     → 즉, key 명에 큰 따옴표로 처리해야 함 

{ 
	"member" : { "name" : "구름", "age" : 10 } 
}

 

⑤ JSON 배열 

{ 
	"member" : [ "구름", "하늘", "산", "바다" ]
}

 

⑥ JSON null 

  - JSON의 값은 null 키워드를 통해 비워둘 수 있음 

[
	{ "name" : "구름", "age" : 10 }
    { "name" : "하늘", "age" : null }
]

 

---

◉ JSON의 parse() 메서드 

 

▪︎ JSON.parse()

 - JSON을 사용하는 이유 : 웹 서버와의 데이터를 교환하기 위해서!  = Restful 

 - 웹 서버에서 데이터를 수신할 때 데이터는 항상 문자열 형태 

 - data를 분석할 때, JSON.parse() 사용 → 자바스크립트 객체로 바꿈 

    즉, JSON의 데이터를 자바스크립트 객체로 바꿀 때 사용 

 

 

❶ JSON 순수 데이터 타입 알아보기 

 - 예시 데이터 

{ "name" : "하늘", "age" : 10, "birth" : 2000 }

  • 웹 서버에서 위와 동일한 데이터를 가져왔다고 가정해보자 

    데이터는 큰 문자열로 담겨서 오게 됨 

 

 - console창에서 작업해보기 

    : <script> 태그 안의 내용만 입력하면 됨

 - typeof()를 이용해 타입 알아보기 

 

 

❷ JSON 문자열을 JS 객체로 변경 

  - JSON.parse() 메서드 사용 : 문자열 → JS 객체로 변경 

 

 

❸ JSON 데이터 일부 속성 호출 

 - 데이터가 JS 객체로 변경되었기 때문에, 각각의 속성 호출 가능  

 

 

---

◉ JSON.parse()로 배열 데이터 가져오기 

 

 - JSON에서 배열로 데이터를 사용하는 경우, JS 객체 대신 배열로 값을 가져옴 

 - 배열로 가져온 것은 객체가 아닌 배열이기 때문에, 값 선택 시 배열명[ 인덱스번호 ]로 선택해야 함 

 - <ul> 태그 안에 작성할 <li> 태그를 담을 변수를 만들어 반복문을 통해 값을 담아줌 

 

---

◉ JSON.parse() 예외 - 날짜 

 

 - 날짜 객체는 JSON에서 허용되지 않음 

 - 날짜를 문자열로 작성 후, 자바스크립트에서 다시 New Date()를 통해 날짜 생성해주어야 함