[ javascript 코딩 ] JSON 이란?

안녕하세요. 제임스 입니다. 

이번에 포스팅할 내용은 JSON 입니다. 참 많이 들어 보고 써보기도 했었지만 막상 사용하고자 하면 기억이 안나고 그렇죠? JSON 에 대해 알기 쉽게 정리 해보겠습니다. 

■ JSON 이란? 

JSON은 JavaScript Object Notation 의 약자로 자바스크립트 객체의 형태를 가지는 문자열을 의미 합니다. 

JSON은 데이터를 저장하거나 주고 받기 위한 구문입니다. 

JSON은 javascript 구문을 사용하고 있으나 JSON 의 포맷은 text 형태를 취하고 있습니다. Text 는 어떤 프로그래밍 언어에서건 데이터 포맷으로 사용되기에 언어 독립적 입니다. 

Client (웹 브라우저) 와 Server 사이에서 데이터를 주고 받을 때, 이 데이터는 text 형태입니다. 

JSON 은 text 형이므로 최소한의 Client 와 Server 사이에서 통신을 위한 데이터 형으로는 적합합니다. 

어떠한 Javascript 객체라도 JSON 으로 변환 가능하며 이를 Sever 로 전송 가능합니다. 

반대로 Sever 로 부터 받은 어떠한 JSON 값도 Javascript 객체로 변환 가능합니다. 

■ Sending Data 

Javascript 객체에 저장된 데이터가 있다면 javascript 객체를 JSON 형으로 변환하여 sever 에 전송할 수 있습니다. 

var jsObj = { "name":"James", "occupation":"Developer", "city":"Seoul" };
var myJSON = JSON.stringify(jsObj);
window.location = "json_test.jsp?jsonParam=" + myJSON;

jsObj 라는 javascript 객체를 생성하여 JSON 의 stringify() 함수를 이용하여 json_test.jsp 에 jsonParam 이라는 key 값으로 맵핑하여 변환한 JSON 값을 전달하는 코드 입니다. 

2018/05/14 - [javascript] - [ javascript 코딩 ] JSON.stringify() 사용방법 - JSON 가독성 높이기

■ Receiving Data

전송과 달리 JSON 형이 데이터를 받았을 경우 JSON 을 javascript 객체로 변환 할 수 있습니다. 

var jsObj = jsonParam;
var myObj = JSON.parse(jsObj);
console.log('myObj.name = '+myObj.name);

Sending Data 샘플 코드에서 jsonParam 이라는 key 값으로 전달 한 값을 받는 형식으로 작성 했습니다. 

jsObj 는 JSON format 이므로 JSON 의 parse() 함수를 이용하여 javascript 객체로 변환 해줍니다. 

2018/05/11 - [javascript] - [ Javascript 코딩 ] JSON.parse() - JSON 문자열을 자바스크립트 객체로 변환하기

위 코드를 실행 하면 결과 값은 아래와 같습니다. 

myObj.name = James

만약 위 코드를 아래와 같이 작성 한다면 어떻게 될까요? 

var jsObj = { "name":"James", "age":30, "city":"Seoul" };
var myObj = JSON.parse(jsObj);
console.log('myObj.name = '+myObj.name);

jsObj 를 JSON 형을 취하고 있는 자바 객체로 제공할 경우 오류가 발생 합니다. 

Uncaught SyntaxError: Unexpected token o in JSON at position 1

이는 jsObj 가 이미 javascript 객체인데 이를 JSON 의 parse 함수를 이용하여 javascript 객체로 변환하려 시도 했기 때문에 발생하는 오류 입니다. 

이런 실수는 안하는 게 좋겠죠? 

JSON 을 설명하기 위해 stringify() 함수와 parse() 함수가 샘플 코드에 등장 했는데요. 

이 함수들은 별도 포스팅으로 정리 하겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D