[PART2] 네트워크/통신/데이터 - TERMS 9

[ TERMS 09 ] JSON / XML

XML과 JSON의 형태를 비교하는 이미지(출처 : https://commons.wikimedia.org/wiki/File:JSON_vs._XML.png)

1. JSON(JavaScript Object Notation) / XML(eXtensible Markup Language)의 정의

 JSON/XML은 브라우저와 서버 간(프론트엔드와 백엔드)의 자료를 통신할 때 사용하는 표준화된 데이터 포맷이다.

 

2. JSON / XML 은 어디서 접하게 될까?

>  REST API

 JSON/XML이 가장 대표적으로 사용되는 경우는 브라우저와 서버 간의 통신이다. REST API는 앱이 거대해지는 것을 막기 위해 고안된 데이터 통신 방법으로 무거운 HTML 혹은 이미지 파일을 보내는 것 대신 실제로 필요한 데이터만 보내는 방식이다. 

영화진흥위원회에서 제공하는 일일 박스오피스 API를 간소화하여 표현
JSON 형식 응답	XML 형식 응답
{     "boxOfficeResult" : {          "boxofficeType" :  "일별 박스오피스",          "showRange" : "20211112~20211112",          "dailyBoxOfficeList" : [                {                    "runm" : "1",                    "rank": "1",                    "movieNm" : "이터널스",                    "openDt" : "2021-11-03",                }           ]       } }	<boxOfficeResult>     <boxofficeType>일별 박스오피스</boxofficeType>     <showRange>20211112~20211112</showRange>     <dailyBoxOfficeList>         <dailyBoxOffice>               <runm>1</runm>               <rank>1</rank>                <movieNm>이터널스</movieNm>                <openDt>2021-11-03</openDt>         </dailyBoxOffice>     </dailyBoxOfficeList> </boxOfficeResult>

 

>  데이터 통신 외에 XML이 사용되는 예

 안드로이드 개발에서 기능은 Java혹은 Kotlin을 활용하지만 레이아웃 혹은 속성 정보등의 리소스 파일들 대부분은 XML로 작성된다.필요한 데이터만 보내는 방식이다. 개발자들은 XML을 통해 레이아웃을 재사용여 뷰와 로직을 분리할 수 있다. XML을 사용해 레이아웃을 작성하면 하나의 레이아웃을 하나의 파일로 관리할 수 있으며 구조적, 계층적이기 때문에 한눈에 이해하기 쉽다.

안드로이드 스튜디오 공식 홈페이지에서 제공하는 레이아웃 작성 코드

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"                           android:layout_width="match_parent"                           android:layout_height="match_parent"                           android:orientation="vertical">         <TextView android:id = "@+id/text"                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:text="Hello, I am a TextView"   />         <Button     android:id = "@+id/button"                           android:layout_width="wrap_content"                           android:layout_height="wrap_content"                           android:text="Hello, I am a Button"   />      </LinearLayout>

 

>  데이터 통신 외에 JSON이 사용되는 예

 개발 과정에서 많이 사용하는 비주얼 스튜디오 코드(Visual Studio Code)에 Extension을 설치하거나, 폰트 및 폰트 크기를 설정하려면 설정파일을 건드려야 하는데, 이때 사용하는 파일 형식이 JSON이다. 개발도구의 환경 설정 정의, 패키지 정의, 외부 사용 모듈 정의 등 다양한 설정에 JSON이 사용된다.

비주얼 스튜디오 코드의 설정 파일

{     "workbench.iconTheme" : "material-icon-theme",     "editor.fontFamily" : "Fira Code, Menlo, Monaco, 'Courier New', monospace",     "editor.fontLigatures" : true,     "terminal.integrated.fontFamily" : "MesloLGS NF",     "terminal.integrated.fontSize" : 13,     "editor.defaultFormatter" : "esbenp.prettier-vscode",     "editor.formatOnSave" : true,     "bracketPairColorizer.depreciation-notice" : false,     "workbench.colorTheme" : "Default Light+", }

 

3. JSON / XML 알아보기

>  XML

 XML은 확장 가능한 마크업 언어이다. HTML도 마크업 언어의 일부이기에 XML과 HTML은 비슷한 생김새를 가졌다. 하지만 데이터를 보여 주지 않고 전송하는 것이 목적이라는 차이점이 존재한다.

영화 순위 데이터 XML 형식으로 작성

<?xml version="1.0" encoding="utf-8"?> <영화순위>     <영화>         <순위>1</순위>         <이름>스파이더맨</이름>         <관객수>276062</관객수>     </영화>     <영화>         <순위>2</순위>         <이름>엔칸토</이름>         <관객수>9821</관객수>     </영화>     <영화>         <순위>3</순위>         <이름>듄</이름>         <관객수>9333</관객수>     </영화> </영화순위>

 

>  JSON

 자바스크립트의 객체 문법을 사용하는 데이터 포맷이다. JSON은 XML의 단점을 해결하기 위해 고안된 데이터 형식으로 키(Key)와 값(Value)의 쌍으로 이루어져 있다. 자바스크립트의 객체 속성과 동일하고, 다른 언어에서도 파이썬의 Dictionary 혹은 자바의 Map 등 키와 값을 사용하는 자료형과 상당히 유사하다 JSON형식은 태그 대신 { } 혹은 [ ] 같은 괄호를 사용하여 각각의 데이터를 묶어 주고 있다. 또한 순위 혹은 이름과 같은 키가 앞에 나와 어떠한 속성인지 표현한다.

영화 순위 데이터 JSON 형식으로 작성

{     "영화순위": {          "영화": [                {                    "순위" : "1",                    "이름" : "스파이더맨",                    "관객수" : "276062",                },                {                    "순위" : "2",                    "이름" : "엔칸토",                    "관객수" : "9821",                },                {                    "순위" : "3",                    "이름" : "듄",                    "관객수" : "9333",                },           ]      } }

 

>  XML과 JSON의 공통점과 차이점

구분	JSON	XML
목적	데이터를 전송하기 위한 수단
사용 언어	어떠한 언어를 사용해도 상관없음
속도	빠름	느림
길이	짧다	길다
종료 태그	사용하지 않음	사용함
안정성	낮음	높음
인코딩	UTF-8	다양한 인코딩 지원

 JSON은 길이가 짧고 종료 태그가 없어 상당히 빠르지만, 안정성이 떨어지고 인코딩 형식이 다양하지 않다는 단점이 존재한다. 하지만 빠른 속도가 우선시 되어 현재는 XML보다 JSON을 많이 사용하는 추세이다.

JSON과 XML의 차이를 비교하는 이미지(출처 : https://www.crio.do/blog/what-is-json-2024/)

 

4. JSON / XML 을 사용하는 이유

 브라우저에서 사용하는 자바스크립트와 서버에서 사용하는 자바, 파이썬의 데이터 타입들은 다르지만 원하는 데이터를 보여 주려면 둘 간의 데이터 통신이 필요하다. 이를 위해 JSON 혹은 XML과 같은 데이터 포맷이 필요하다.

 

5. JSON / XML 더 알아보기

>  다양한 데이터 포맷

• JSON
• XML
• CSV(Comma Separated Value)
• YAML(YAML Ain't Markup Language)
• Plain Text

>  실제로 사용되는 데이터 포맷 예시

• Maven 프로젝트의 'pom.xml'
• 자바스크립트 프레임워크의 'jsconfig.json'
• Sublime Text의  'preferences.sublime-setting.json'
• Node 프로젝트의 'package.json'

>  함께 알아두면 좋은 용어

• REST API
• 인코딩
• HTTP