[CS] 데이터 교환형식 - JSON, 직렬화/역직렬화, XML

안녕하세요! 하마코입니다. 😊

 

평소에 프론트엔드 개발을 하며 API로 정보를 JSON 형태로 받아오는데, 자세하게 공부한 적은 한 번도 없는 것 같아요.

그래서 오늘은 데이터 교환형식을 공부해보겠습니다!

---

JSON

JSON은 JavaScript Object Notation의 줄임말입니다. 직역하면 "자바스크립트 객체 표기법"이네요!

JavsScript 객체 문법으로 구조화된 데이터교환 형식이며, Python, JS, JAVA 등 여러 언어에서 데이터 교환형식으로 쓰이고 있어요.

객체문법 말고도 단순 배열, 문자열로도 표현이 가능합니다!

 

JavaScript 객체 문법

객체 문법은 키(key)와 값(value)로 구성되어 있는 구조를 갖고 있어요. {key:value}

이미 존재하는 키를 중복선언하면 나중에 선언한 해당 키에 대응한 대응한 값이 덮어쓰이게 됩니다.

• JSON을 JavaScript 세계에서 쓰기 위해 -> JS Object로 변환 ( JSON.parse() 사용 )
• JSON을 Python 세계에서 쓰기 위해 -> dictionary 타입으로 변환 ( json.loads() 사용 )

// 1개
{
	"name" : "hamaco.dev",
	"index" : 1
}
// 2개
[
	{
        "name" : "hamaco.dev",
        "index" : 1
    },
    {
    	"name" : "dev.hamaco",
        "index" : 2
    }
]

 

2개가 있는 JSON에서 "hamaco.dev"를 가져오려면 아래 형태로 가져올 수 있습니다.

const a = // JSON 위치에서 가져오는 코드 (API 연결, 파일 등)
const b = JSON.parse(a)
console.log(b[0]["name"]) // b[0].name 도 가능

 

만약 name 안에서도 firstname, lastname이 나뉘어있다면 표기와 불러오는 방법은 아래와 같습니다.

// JSON
[
	{
        "name" : {
        	"firstname" : "hamaco",
            "lastname" : "dev"
        },
        "index" : 1
    },
    ...
]

// 불러오기
const a = // JSON 위치에서 가져오는 코드 (API 연결, 파일 등)
const b = JSON.parse(a)
console.log(b[0].name.firstname) // b[0].name 도 가능

 

데이터 + 교환형식

데이터는 추상적인 아이디어에서부터 시작해 구체적인 측정에 이르기까지 다양한 의미로 쓰입니다.

실험, 조사, 관찰 등으로 부터 얻은 사실이나 자료 등을 의미합니다.

데이터는 항상 양식에 맞춰서 교환되어야 하고, 이 과정에서 JSON을 많이 사용합니다.

 

언어는 항상 업데이트 되는 반면, JSON은 독립적으로 작용합니다. (JS가 업데이트 된다고 JSON이 업데이트 되는 것은 아니에요!)

이러한 특징 때문에 각 언어들에서 객체, 해시테이블, 딕셔너리 등으로 변환되어 쓰이고, 프레임워크에도 독립적이어서

서로 다른 시스템 간에 데이터를 교환하기에 좋습니다. (주로 API 반환 형태, 시스템 구성하는 설정 파일(package.json) 등에 활용)

 

그리고 위에 언급한대로 객체 문법뿐 아니라 단순 배열, 문자열 표현에도 사용 가능합니다.

// JSON 예시
"hamaco.dev's post is best!"
[1,2,3,4,5]
{"a" : "b"}

 

JSON 타입

JSON 타입은 JavaScript Object와 유사하지만 undefined, 메서드 등을 포함하지 않습니다.

• 수 Number
• 문자열 String
• 참/거짓 Boolean
• 배열 Array
• 객체 Object
• null

JavaScript Object와 다른점

• JSON은 속성 표기 시 반드시 큰 따옴표("") 사용해야함
• JS Object는 함수(function), undefined, Symbol 포함 가능

 

JSON의 직렬화, 역직렬화

직렬화란 외부 시스템에서도 사용할 수 있도록 바이트(byte) 형태로 데이터를 변환하는 기술이고, 역직렬화는 반대를 의미합니다.

• 직렬화 : JS 객체 -> JSON 문자열로 변환 => JSON.parse() (parse 했을 때 타입은 object)
• 역직렬화 : JSON 문자열 -> JS 객체로 변환 => JSON.stringify() (stringify 했을 때 타입은 string)

 

XML

XML은 Extensible Markup Language의 줄임말입니다. Extensible은 '늘릴 수 있는' 이라는 뜻을 갖고 있어요.

Markup(마크업)은 태그 등을 이용하여 문서나 데이터의 구조를 나타내는 방법입니다.

 

XML에는 버전, 인코딩이 들어간 프롤로그 / 단 하나의 루트 요소 / 하위 요소들이 필요한데요. 아래와 같이 작성할 수 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<Post>
	<title>WELCOME HAMACO!</title>
    <sub>오신 걸 환영해요.</sub>
</Post>

 

🧐 이러면 HTML과 뭐가 다르지?

웹사이트를 만드는 HTML도 Markup 언어인 만큼 XML과 구조가 유사하지만,
HTML의 용도는 데이터 표시이고 XML은 데이터를 저장 및 전송하는데 사용됩니다.

또한, HTML에는 미리 정의된 태그들이 있지만 XML에서는 사용자가 고유한 태그를 만들고 정의할 수 있어요.

XML은 대/소문자를 구분하지만 HTML은 구분하지 않는다는 차이점도 있어요!

 

🧐 JSON vs XML

JSON과 비교했을 때 XML은 닫힌 태그가 들어가기 때문에 더 무거워요!

또, JavaScript Object로 변환할 때 JSON은 JSON.parse()만 해주면 되지만 XML은 더 많은 노력이 필요합니다.

 

XML이 많이 사용되는 곳은 SEO(검색 엔진 최적화)를 위한 sitemap.xml인데요!

Google 같은 검색 엔진에 있는 크롤링봇이 글을 알고리즘에 올릴 수 있도록 url 등을 첨부해서 올리는 구조입니다!

---

 

정말 많이 사용되는 JSON과 XML의 구조를 이해해보았습니다!

CS 기초 지식이 중요한 만큼 앞으로 공부한 내용들을 정리해보겠습니다.

도움되셨다면 좋아요, 댓글 남겨주세요!

 

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

HAMACO