JSON와 JSON 메서드

1. JSON이란?

JSON 객체(JavaScript Object Notation)란, 속성-값 쌍 혹은 키-값 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 포맷이다. 

비동기 브라우저/서버 통신(AJAX)을 위해, 넓게는 XML을 대체하는 주요 데이터 포맷으로, 주로 인터넷에서 자료를 주고 받을 때 자료를 표현하는 방법으로 알려져 있다.

자바스크립트 객체에 기반하고 있으나, 프로그래밍 언어나 플랫폼에 독립적이므로 다양한 프로그래밍 언어에서 이용된다. 파일 확장자는 .json이다.

 

장점

• 텍스트로 이루어져 있으므로, 사람과 기계 모두 읽고쓰기 쉽다.
• 프로그래밍 언어와 플랫폼에 독립적이므로, 서로 다른 시스템간에 데이터 객체를 교환하기에 좋다.
• 자바스크립트의 문법을 기반으로 하고 있기 때문에, 자바스크립트에서 eval() 명령으로 곧바로 사용할 수 있다. 이런 특성은 자바스크립트를 자주 사용하는 웹 환경에서 유리하다. 

JSON은 두 가지 메서드를 가지고 있는데 이 메서드들을 제외하면 딱히 흥미로운 기능은 없다.

 

 

구조

• 속성-값 쌍으로 이뤄진다.
• 속성 이름이 반드시 큰따옴표("")로 둘러싸인 문자열이어야 한다.
• 쉼표(,)를 사용하여 여러 속성을 포함할 수 있다.
• 객체(object)는 중괄호({})로 둘러쌓아 표현한다.

JSON 객체의 구조

• 배열(array)는 대괄호([])로 둘러쌓아 표현한다.

JSON 배열의 구조

• 데이터값으로 숫자, 문자열, 불리언, 객체, 배열, NULL 타입이 올 수 있다.
• 후행 쉼표를 작성할 수 없다.
• 함수를 값으로 할당할 수 없다.

 

 

검증 사이트

아래는 JSON 데이터가 올바르게 작성되었는지 검증해주는 사이트이다.

jsonlint.com/

예제: 속성 이름을 작은 따옴표('')로 감쌌을 때

에러가 난다. 속성 이름 name을 다시 큰 따움표로 감싸면 다음과 같이 에러가 발생하지 않는다.

 

 

json 파일 작성

json 형식의 파일을 생성하고, 파일 내에 JSON 코드를 작성해보아도 구조를 잘 작성하였는지 잘못 작성하였는지 여부를 알 수 있다.

다음과 같이 속성명을 큰 따옴표로 감싸준 문자열을 작성하면 에러가 나지 않는다.

하지만 속성명을 작은 따옴표로 감싸준 문자열로 작성하면 잘못 작성하였다고 알려준다.

또한 후한 쉼표를 작성하였을 때에도 에러가 발생한다.

 

 

2. JSON 메서드

JSON 메서드

2.1 JSON.parse()

인수로 전달받은 문자열을 JSON으로서 구문 분석하고 자바스크립트 객체로 변환하여 반환한다.

여기서 해당 문자열은 반드시 JSON 형식의 문자열이어야만 한다. JSON 형식에 맞지 않는 문자열을 전달하면 오류가 발생한다.

예제

JSON.parse('{age: 2}'); // SyntaxError : Unexpected token a in JSON at position 1

JSON.parse에 넣어준 문자열이 JSON 형식의 문자열이 아니므로 에러가 발생한다.

JSON.parse('{"age": 2}');

다음과 같이 age 속성명을 큰 따옴표로 감싸주면 에러가 발생하지 위의 에러가 발생하지 않는다.

 

2.2 JSON.stringify()

인수로 전달받은 객체를 문자열로 변환하여 반환한다.

 

HTTP에서 메서드는 "문자열"로 전송이 된다. 따라서 상대방에게 전송을 할 때 JSON.stringify() 메서드를 호출하여 JSON을 문자열로 만든 데이터를 전송한다. 

 

 

예제 코드1 : 메서드 사용법

const data = { // JSON
    "name": 'nno3onn',
    "age": 26,
}

console.log(typeof(data));  // Object
console.log(data); // { name: 'nno3onn', age: 26 }
console.log('\n');

const jperson = JSON.stringify(data);
console.log(typeof(jperson)); // string
console.log(jperson); // {"name":"nno3onn","age":26}
console.log('\n');

// const Object = JSON.parse(data); // SyntaxError: Unexpected token o in JSON at position 1
const person = JSON.parse(jperson); // object
console.log("\n" + typeof(person)); // { name: 'nno3onn', age: 26 }
console.log(person);
console.log('\n');


console.log(jperson.name); // undefined
console.log(person.name); // nno3onn

콘솔 결과

객체를 생성할 때 속성 이름을 큰 따옴표로 둘러싼 문자열로 작성하여도 콘솔해보면 속성이 따옴표로 둘러싸여 있지 않다. 따라서 JSON으로 데이터를 전송할 때 반드시 JSON.stringify() 메서드를 이용하여 문자열로 변환시켜 주어야만 한다.

JSON Object에 JSON 메서드를 사용했을 때

 

SyntaxError : Unexpected token o in JSON at position 1

data가 이미 자바스크립트 객체인데 이를 JSON.parse() 메서드를 사용하여 자바스크립트 객체로 변환하려고 시도했기 때문에 발생하는 오류이다.

 

예제 코드2 : AJAX 활용

HTTP에서 메시지는 "문자열"로 전송이 된다.따라서 반드시 JSON.stringify() 메서드를 사용하여 JSON을 문자열로 변환한 데이터를 전송해야 한다.

function signup() {
    var member = {
    "email": "test@naver.com",
    "password": "1234"
};

$.ajax({
    url : '/account/signup',
    dataType : 'json',
    type : 'POST',
    data : JSON.stringify(member), //그냥 member 사용하면 error 발생!
    contentType : 'application/json; charset=UTF-8',
    success : function(result) {
        console.log(result);
    }
});

이 데이터를 받으면 다시 JSON으로 변환하기 위해 JSON.parse() 메서드를 호출하고, 이 데이터를 JS Object의 값으로 할당하면 Object가 된다.

 

여기서 말하고자 하는 것은, 자바스크립트 Object로 HTTP를 통신하는 것이 아니라 JSON으로 서버와 클라이언트가 데이터를 주고 받는다는 것이다. 또 JSON을 자바스크립트 객체로 파싱하기 위해 필요한 메서드는 JSON.parse() 메서드라는 것이다.

 

 

 

---

참고 자료

코딩교육 티씨피스쿨

Javascript JSON.parse(), JSON.stringify() 사용하는법

[ javascript 코딩 ] JSON 이란?