개발 언어/JavaScript

Json 이란? (Json 파싱 방법 / 자바스크립트)

빛의 개발자 2024. 3. 22.

회사에서 Json의 개념에 대해 이해하기 어려우신 분들이 있으시 길래 정리해봅니다.

 

저도 안드로이드, 웹 개발을 하면서 당연하게 사용해왔던 개념이라, 간단하게 설명이 안되었는데,

이번기회에 정리하며, 간단하게 설명할 수 있는 기회겠네요.

 

 

핵심


Json의 구조는  키:값 입니다.

 

 

Json 데이터 형식

Json은 JavaScript Object Notation의 약자입니다.  직역하면 자바스크립트 객체 표기법(?) 인거 같습니다. 

서버 - 클라이언트 사이의 데이터 통신에서 주고받는 형식이라고 이해하시면 됩니다.

 

{ "name" : "철수", "name" : "영희" }

키는 말그대로 데이터를 찾을수 있는 문자열입니다.

위의 예시에서는 name이 키 값이고, 철수, 영희가 값입니다.

 

근데 위의 예시는 좀 이상한 예시같지 않나요? 

키값이라면, 고유한 값을 찾을 수 있도록 되어야하는데, 철수, 영희의 키값이 모두 name으로 같습니다.

 

이 경우, 자바스크립트 JSON 파서로 name을 파싱하게 되면, 마지막 값을 찾아오게됩니다. 

(참고로 파싱 = 해석 쯤으로 아시면 됩니다.)

var JsonStr = '{ "name" : "철수", "name" : "영희" }';
var parseJson = JSON.parse(JsonStr);
console.log(parseJson.name);

 

 

그렇기 떄문에 1개의 json object에는 고유한 key로 명명해야합니다.

비지니스 로직에 따라 key에 같은 값을 넣어주는 경우도 있을 것 같습니다만.. 

일반적인 방법은 아닌 것 같습니다.

 

 

- 아래의 사이트에서 돌려보면서 실습하시면 이해가 빠를거에요!

https://www.mycompiler.io/ko/new/nodejs

 

Json object/array (오브젝트(객체) / 어레이(배열))

Json 안의 데이터 형식은 크게 Json object,  Json array로 나뉩니다.

제가 이 두가지만 알고 있을 수도 있는데.. 제가 아는 영역에서는 이 두가지 형식으로 거의 모든 데이터가 표현이 가능합니다. 

 

일단 간단하게 설명하자면 아래와 같습니다.

1. Json object 

{ "name" : "철수", "name2" : "영희" }

 - { } 중괄호 안에 key : value 형식 (콤마로 데이터를 나열) 

 

- json object 파싱은 위에서 했던것 처럼하면됩니다. 

(name2라는 키값으로 value를 찾음)

var JsonStr = '{ "name" : "철수", "name2" : "영희" }';
var parseJson = JSON.parse(JsonStr);
console.log(parseJson.name2);

결과: 영희

 

2. Json array

[ "철수", "영희" ]

- 대괄호 안에 value 형식 (콤마로 데이터를 나열) 

 

var JsonStr2 = '[ "철수", "영희" ]';
var parseJson = JSON.parse(JsonStr2);
console.log(parseJson[1]);

결과: 영희

 

 

차이점은 Json array는 키값이 없고 배열 순서로 나열된다는 점입니다.

 

 

Json object/array 실무에서 보통 어떻게 쓰이나?

클라이언트에서 서버로 요청할 때,

서버에서 클라이언트에게 응답을 줄때 모두 json이 사용됩니다.

 

그중에, 서버에서 클라이언트에게 응답을 주는 상황을 간단하게 설명하겠습니다.

 

서버에서 요청을 받으면 (철수, 영희 나이를 알려달라는 요청)

DB에서 조회를 해서 리턴을 줄겁니다.

 

DB에는 아래와 같이 데이터가 들어가있습니다.

아래와 같이 서버에서 json 데이터를 만들어 클라이언트에게 보내줍니다.

[{"name" : "철수","age": 20}, {"name" : "영희","age": 22}]

 

클라이언트에서 파싱은 아래와 같이 하면됩니다.

var JsonStr = '[{"name" : "철수","age": 20}, {"name" : "영희","age": 22}]';
var parseJson = JSON.parse(JsonStr);
for(var i = 0; i < JsonStr.length; i++){
    console.log(parseJson[i].name + "/"+ parseJson[i].age);
}

 

결과: 

철수/20

영희/22

 

 

언어 마다 방법이 조금씩 다르겠지만, 위와같이 많이 사용합니다.

 

데이터 row(줄)은 Json array로 구성하여 for문을 돌리고, 안의 데이터는 Json Object로 구성하여 컬럼(key) 값으로 찾아서 파싱합니다.

 

 

 

 

긴글 읽어 주셔서 감사합니다.

더 궁금하신 사항은 댓글로 문의해주시면 빠르게 답변드리겠습니다.

 

 

댓글