그럼에도 불구하고

👨‍💻

[JavaScript] JSON / XML 본문

JavaScript/JavaScript basics

[JavaScript] JSON / XML

zenghyun 2022. 11. 11. 22:48

JSON에 대해 알아보자

 

 

 

[ JSON 이란? ] 

 

JSON은 JavaScript Object Notation의 약자로 name - value 한쌍으로 이루어진 네트워크를 통해

데이터를 주고받는 데 자주 사용되는 경량의 데이터 형식이다.

JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 특히 용량이 적어서,

최근에는JSON이 XML을 대체해서 데이터 전송 등에 많이 사용된다. 

JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위해 고안되었다. 

또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있다.

 

 

 

※ XML이란?

XML은 EXtensible Markup Language의 약자이다.

이런 XML은 HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based-markup language)이다.

이 언어는 사람과 기계가 동시에 읽기 편한 구조로 되어있다.

XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌다.

또한, XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있다.

 

[ JSON과 XML의 공통점 ]

JSON과 XML은 다음과 같은 공통점을 갖고 있다.

 

1. 데이터를 저장하고 전달하기 위해 고안되었다.

2. 기계뿐만 아니라 사람도 쉽게 읽을 수 있다.

3. 계층적인 데이터 구조를 가진다.

4. 다양한 프로그래밍 언어에 의해 파싱 될 수 있다.

5. XMLHttpRequest 객체를 이용하여 서버로부터 데이터를 전송받을 수 있다.

 

[ JSON과 XML의 차이점 ]

JSON과 XML은 다음과 같은 차이점을 갖고 있다.

 

1. JSON은 종료 태그를 사용하지 않는다.

2. JSON은 구문이 XML의 구문보다 더 짧다.

3. JSON 데이터가 XML 데이터보다 더 빨리 읽고 쓸 수 있다.

4. XML은 배열을 사용할 수 없지만, JSON은 배열을 사용할 수 있다.

5. XML은 XML 파서로 파싱되며, JSON은 자바스크립트 표준 함수인 eval() 함수로 파싱 된다.

 

 

 

XML 예제 

 

1
2
3
4
5
6
<dog>
    <name>식빵</name>
    <family>웰시코기<family>
    <age>1</age>
    <weight>2.14</weight>
</dog>
cs

 

 

JSON 예제

 

1
2
3
4
5
6
{
    "name": "식빵",
    "family": "웰시코기",
    "age": 1,
    "weight": 2.14
}
cs

 

[ JSON의 특징 ] 

 

1. JSON은 자바스크립트를 확장하여 만들어졌다.

2. JSON은 자바스크립트 객체 표기법을 따른다.

3. JSON은 사람과 기계가 모두 읽기 편하도록 고안되었다.

4. JSON은 프로그래밍 언어와 운영체제에 독립적이다.

 

 

[ JSON의 사용 범위 ]

XML 문서는 XML DOM(Document Object Model)을 이용하여 해당 문서에 접근한다.

 

하지만 JSON은 문자열을 전송받은 후에 해당 문자열을 바로 파싱 하므로, XML보다 더욱 빠른 처리 속도를 보여준다.

 

따라서 HTML과 자바스크립트가 연동되어 빠른 응답이 필요한 웹 환경에서 많이 사용된다.

 

하지만 JSON은 전송받은 데이터의 무결성을 사용자가 직접 검증해야 한다.

 

따라서 데이터의 검증이 필요한 곳에서는 스키마를 사용하여 데이터의 무결성을 검증할 수 있는 XML이 아직도 많이 사용되고 있다.

 

 

 

JSON 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
 var p = {'name':'일길동', 'age' : '30', 'tel: ' : '010-2323-2323'};
 /* 콜론을 기준으로 key값과 value값을 나눠서 가진다. */
 document.write("이름: "+ p.name + "<br>나이: " + p.age +"<br>");
/* JSON 배열  */
 var p_arr = [{'name':'1길동','age':'20'},{'name':'2길동', 'age':'30', 'tel':'010-0000-0000'}];
 document.write(p_arr[0].name + " / " +p_arr[0].age +"<br>");
 
 /* JSON 다차원 배열 */
 var course = {'name' : '웹개발', 'start' : '2022-08-01', 'end' : '2023-01-01', 'sub' : ['java','web','android'], 
         'student' : [{'name':'hong','age':'20', 'hobby':['a','b']},{'name':'kim','age':'25'}] };
 document.write("과목명 : " + course.name + "<br>");
 document.write("sub : " + course.sub[0] + " / " + course.sub[1] + " / " + course.sub[2] + "<br>");
 document.write(course.student[0].name + " / " + course.student[0].age + "<br>");
 document.write(course.student[0].hobby[0]);
 
</script>
</head>
<body>
<!-- JSON(JavaScript Object Notation) : 서로 다른 플랫폼에서 데이터를 쉽게 교환하기 위한 표기법 -->
 
 
</body>
</html>
cs

 

 

결과

 

참고: http://www.tcpschool.com/json/intro

 

 

'JavaScript > JavaScript basics' 카테고리의 다른 글

[JavaScript] 데이터 타입  (0) 2022.12.12
[JavaScript] 표현식과 문  (0) 2022.12.12
[JavaScript] 변수 선언 / 변수 호이스팅 / 값의 할당  (2) 2022.12.08
[JavaScript] 변수란 무엇인가?  (0) 2022.12.08
[JavaScript] Ajax (Asynchronous JavaScript and XML)  (0) 2022.11.11
'JavaScript/JavaScript basics' Related Articles more
Comments