시작전에
오늘은 자바스크립트를 접하며 특히 더 많이 사용하게 된 JSON에 대해 알아봤습니다. 쓸모가 많고 많이 쓰이는만큼 좀더 잘 알고 쓰면 좋을 것 같다는 생각이 듭니다.
오늘은 위키, MDN 및 javascript.info를 참고했고 또 json.org라는 사이트도 있었습니다.
JSON(JavaScript Object Notation)이란
위키에서 정의하고 있는 JSON의 정의를 살펴보자.
속성-값 쌍 또는 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.
비동기 브라우저/서버 통신(AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다.
...
공식 인터넷 미디어 타입은application/json이고 확장자는.json이다.
프로그래머이자 기업가인 더글라스 크록포드가 처음으로 규정하고 보급한 데이터 전달 포맷이라고 볼 수 있겠다.
MDN의 설명도 살펴보자.
JSON은 객체, 배열, 숫자, 문자열, 불리언과 null을 직렬화하기 위한 구문으로, JavaScript 구문에 기반을 두고 있지만 분명한 차이점을 가지고 있습니다. 즉, 어떤 JavaScript는 JSON이 아닙니다.
- 객체와 배열
속성의 이름은 반드시 큰따옴표로 표시된 문자열이어야 합니다. 후행 쉼표는 허용하지 않습니다.- 숫자
선행 0은 허용하지 않습니다. 소숫점 뒤에는 적어도 한 자릿수가 뒤따라야 합니다. NaN과 Infinity는 지원하지 않습니다.- 모든 JSON 텍스트는 유효한 JavaScript 표현식...
...이지만, 모든 JSON 텍스트를 올바른 ECMA-262로 만드는 제안을 구현한 JavaScript 엔진에서만 그러합니다. 다른 엔진에서는, U+2028 LINE SEPARATOR와 U+2029 PARAGRAPH SEPARATOR를 JSON에서 스트링 리터럴과 속성의 키로 사용할 수 있지만, JavaScript 문자열 리터럴에서 사용하면 SyntaxError가 발생합니다.
여기서 후행쉼표(trailing comma)란, 간단하게 말하자면 배열이나 객체, 함수등에서 여러개의 속성을 계속 나열할때 콤마로 구분을 하는데 이때 마지막 속성 다음에 쉼표를 붙이는 것이다. 예를 들어
var arr = [
1,
2,
3,
];
arr; // [1, 2, 3]
arr.length; // 3이런식으로 [1,2,3]으로 쓸 것을 [1,2,3,]으로 써도 된다.
JSON에선 이렇게 쓰면 안된다고 얘기하고 있다. 실제 코드 작성시에 JSON 마지막 속성에 쉼표를 붙여도 잘 될때도 있다고 하는데 어떻게 문제가 될 지 모르니 잘 확인하는게 좋겠다. 이런 사소한 것으로 문제가 생기면 나중에 찾기는 더 힘들수도 있으니 말이다.
JSON의 사용
JSON의 사용법은 간단하다. json.org를 살펴보자
object는 name/value 쌍들의 비순서화된 SET이다. object는 좌 중괄호(
{)로 시작하고 우 중괄호(})로 끝낸다. 각 name 뒤에 콜론(:) 붙이고 쉼표(,)로 name/value 쌍을 구분한다.
array는 값들의 순서화된 collection이다. array는 left bracket(
[)로 시작해서 right bracket(])로 끝낸다. 쉼표(,)로 array값들을 구분한다.
value는 큰따옴표안에 string, number ,true ,false , null, object ,array이 올수 있다. 이러한 구조들을 포함한다.
주의할 점은 object는 비순서화된 SET이기때문에 담았던 순서대로 표시할 수는 없다. 이때는 array를 사용하자.
공백에 따라 의미가 달라지는 것 외에는 공백을 넣는것은 괜찮다.
중요하지 않은 공백은 JSONNumber(숫자에는 공백이 없어야 함) 또는 JSONString(문자열에서 해당 문자로 해석되거나 오류를 일으킴) 내를 제외하고 어디에나 존재할 수 있습니다.
javascript에서는 JSON문자열과 객체를 사용 할 수 있도록 메서드를 제공해준다.
JSON.parse()
문자열을 JSON으로서 구문 분석하고, 선택적으로 분석 결과의 값과 속성을 변환해 반환합니다.JSON.stringify()
주어진 값에 해당하는 JSON 문자열을 반환합니다. 선택 사항으로 특정 속성만 포함하거나 사용자 정의 방식으로 속성을 대체합니다.
예제
MDN에서 완벽히 올바른 형태의 JSON이라고 하는 예제를 살펴보자.
{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": [ "Radiation resistance", "Turning tiny", "Radiation blast" ] }, { "name": "Madame Uppercut", "age": 39, "secretIdentity": "Jane Wilson", "powers": [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] }, { "name": "Eternal Flame", "age": 1000000, "secretIdentity": "Unknown", "powers": [ "Immortality", "Heat Immunity", "Inferno", "Teleportation", "Interdimensional travel" ] } ] }배열의 요소(파싱된 버전)에 접근하기 위해서는 배열의 인덱스를 사용하면 된다. 점/브라켓(괄호) 표현법을 사용하면 된다.
예를 들어 위 객체를 로드하여 superHeroes라는 이름의 변수에 파싱하고 사용한다고 해보자. superHeroes의 두 번째 member의 세 번째 power에 접근하려면
superHeroes['members'][1]['powers'][2]또는superHeroes.members[1].powers[2]라고 사용하면 된다.
더 공부할것
-AJAX
