Json
JavaScript Object Notation 의 약자로 JavaScript 에서 객체를 만들 때 사용하는 표현식을 의미한다.
Json표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 XML을 대체해서 데이터 전송 등에 많이 사용된다.
Json의 특징
- 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다.
- 자바스크립트 객체 표기법과 아주 유사하다.
- 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객채로 변환할 수 있는 이점이 있다.
- JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다.
- 자바스크립트의 문법과 굉장히 유사하지만 테그트 형식일 뿐이다.
- 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다.
- 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.
Json의 형식
1. Json의 형태는 키(Key)와 값(Value)의 쌍으로 이루어져 있는 구조이며 Key와 Value 사이에는 콜론(:)이 들어가며 여러 데이터를 나열할 경우 쉼표(,)를 사용한다.
- {key1 : value1 , key2 : value2}
2. 객체(Object)는 중괄호 ( {} )로 묶어서 표현하고 배열(Array)은 대괄호( [] )로 묶어서 표현한다.
- {"학생" : {"이름" : "철수" , "나이" : "23"} , "학과" : ["경영학", "세무학", "회계학", "경영정보"] }
3. 데이터의 값으로 다양한 타입을 사용할 수 있다.
- 숫자(number) - {key : 1}
- 문자열(String) - {key : "str"}
- 불린(boolean) - {key : true}
- 객체(object) - {key : {inKey : "value"} }
- 배열(array) - {key : ["하나", "둘"] }
- 널(null) - {key : null}
Json 형식 변환
- JSON.parse(arg) - JSON 형식의 텍스트를 자바스크립트 객체로 변환
- JSON.stringify(arg) - 문자열을 객체로 변환
// 객체 -> 문자열
var json = {"key" : "value"};
var incodingData = JSON.stringify(json);
// 문자열 -> 객체
var str = '{"key" : "value"}';
var parsingData = JSON.parse(str);
// JSON.parse() 사용 시 문자열이 반드시 JSON형식이어야 된다.
// JSON.parse() 오류
var str = "k : v";
JSON.parse(str);
Json의 문제점
AJAX 는 단순히 데이터만이 아니라 JavaScript 그 자체도 전달할 수 있다.
즉, JSON데이터라고 해서 받았는데 단순 데이터가 아니라 JavaScript가 될 수도 있고, 그게 실행 될 수 있다는 것 (데이터인 줄 알고 받았는데 악성 스크립트가 될 수 있습니다.)
위와 같은 이유로 받은 내용에서 순수하게 데이터만 추출하기 위한 JSON 관련 라이브러리를 따로 사용하기도 한다.
Json이 가져올 수 있는 데이터
- JSON으로 가져올 수 있는 데이터는 해당 자바스크립트가 로드된 서버의 데이터에 한정됩니다.(다음에서 구글 데이터를 불러온다거나 네이버 데이터를 불러온다거나 할 수 없다.)
- JSON은 단순히 데이터 포맷일 뿐이며 그 데이터를 불러오기 위해선 XMLHttpRequest()라는 JavaScript 함수를 사용해야 하는데 이 함수가 동일 서버에 대한 것만 지원하기 때문이다. ( JSONP 또는 프락시 역할을 하는 서버쪽 Script 파일로 가능하게도 할 수 있다.)
Json의 데이터 추가
// Json 객체 생성
var Students = [
{
'이름' : '김경영'
'나이' : '21'
'학과' : '경영학'
},
{
'이름' : '박세무'
'나이' : '20'
'학과' : '세무학'
}
]
// 데이터 추가
var Student = {
'이름' : '이회계'
'나이' : '24'
'학과' : '회계학'
}
Students.push(Student);
// 항목 추가 두가지 방법
Student.성별 = true;
Student.["성별"] = true;
// key를 동적으로 생성해야 할 경우
var key = "학점";
Student.key = 4;
// { 이름: "이회계", 나이: "24", 학과: "회계학", key: 4 } 식으로 'key'가 그대로 삽입
var key = "학점";
Student[key] = 4;
// { 이름: "이회계", 나이: "24", 학과: "회계학", 학점: 4 } 식으로 제대로 삽입 된다.
// 항목 삭제
delete Student.학점
// { 이름: "이회계", 나이: "24", 학과: "회계학"}
