JSON stringify 란?

jQuery Ajax를 사용하면서 json 형식으로 데이터를 주고받는 일이 빈번하게 발생했고 단순한 데이터,

예를 들어 아래와 같은 json 형태를 주고 받는데 있어서는 어려움이 전혀 없었습니다.

{
    id : 'min.c00',
    name : '정민창',
}

내가 마주했던 문제는 아래의 상황처럼 하나의 key에 array형태로 데이터를 전송해야 했습니다.

{
	list : ['....', '....', ...]
}

이 문제를 해결하고자 찾은 방법이 JSON stringity라는 기술입니다.

JSON stringify 란?

먼저 JSON은 일반적으로 데이터를 저장하거나 전송할 때 많이 사용되는 데이터 교환 방식인데 Javascript에서 객체를 만들 때 사용하는 표현식을 의미합니다.

json 형태로 데이터를 생성하고 console.log()를 찍어보면 Object 가 찍히고 Object라는 객체 안에 저장한 데이터들이 있는 것을 확인할 수 있습니다.

JSON stringify는 이런 객체를 json 문자열로 변환하는 역할을 합니다.

사용 방법은 다음과 같습니다.

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

JSON.stringify 메서드 안에 넣고 싶은 javascript 값이나 객체를 넣으면 JSON 형태의 문자열 값을 반환해 줍니다.

JSON.stringify라는 메서드는 무엇이고 사용방법을 알았다면 위에서 언급했던 하나의 key로 array데이터를 전송하려는 경우 JSON.stringify로 어떻게 해결했는지 궁금하실 것 같습니다.

먼저 제가 만났던 문제에 대한 설명을 간략히 하자면 아래의 형식에 맞춰 데이터를 전달해야 하는 상황이 발생했고

article_list라는 json 객체를 value값으로 사용해야 하는 상황이 발생했습니다.

var article_list = {
    title1 : [...], 
    desc1 : [...],
    title2 : [...],
    desc2 : [...]
}

var paramObj = {
	...
    article_list : article_list,
    ...
}

JSON.stringify는 이 문제를 한 번에 해결해 주었는데

var paramObj = {
	...
    article_list : JSON.stringify(article_list),
    ...
}

이렇게 단순 key(string) : value(string) 형태의 json 객체로 만들 수 있었습니다. 때문에 데이터의 전송이 원활하게 진행될 수 있었습니다.

하지만 곧이어 두 번째 문제가 발생했습니다. JSON.stringify 는 String 타입의 데이터를 반환하기 때문에 다시 JSON으로 변환하는 과정이 필요했습니다. 저는 이 과정을 jQuery가 아닌 spring 딴에서 즉, Java 코드 상에서 진행을 해야 하는 상황이 생겼고 이후에 Java에서 JSON.stringify로 전달받은 데이터를 어떻게 다시 JSON 데이터로 변환할수 있는지 보겠습니다.

JSON parse 란?

JSON.stringify는 객체를 json 형태의 문자열로 변환하는 메서드라고 했습니다. 그럼 이 변환된 문자열을 다시 json 객체로 변환해주는 역할은 JSON.parse 메서드가 담당합니다.

'parse'의 사전적 의미는 '구문을 분석하다'라는 뜻인데 그 뜻 그대로 json 형태의 문자열의 구문을 분석해 Json 객체로 반환해 줍니다.

javascript에서의 사용방법은 다음과 같습니다.

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

그럼 자바에서 JSON parse는 어떻게 사용할 수 있을까요?

제가 마주했던 문제를 해결하기 위해서는 자바에서 지원 JSON 라이브러리 3개가 필요 했습니다.

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;

자바에서 JSON.parse 이용하기

// 1. JSONParser 객체를 생성한다. 
JSONParser jsonParser = new JSONParser();	

// 2. Object 객체를 생성하고 jsonParser.parse 된 데이터를 저장한다. 
Object obj = jsonParser.parse(// JSON.stringify 로 변환된 String type 데이터 넣는곳);

// 3. JSONObject 객체로 변환한다. 
JSONObject article_list = (JSONObject) obj;

// 4. JSONArray 객체에 article_list의 key, 'title1' 에 해당하는 array value값을 저장한다.
JSONArray user_article_titles = (JSONArray) article_list.get("title1");

위의 4단계를 거쳐 문제를 해결했고 굉장히 뿌듯했다!

그냥 하는거지 뭐..

JSON stringify 란?

티스토리툴바