FrontEnd/Vue.js

XML, JSON, YAML

M00NPANG 2023. 4. 29. 01:44

 JSON, XML, YAML는 모두 데이터를 표현하는 형식


XML(Extensible Markup Language)
정보 전달

데이터를 표현하기 위해 많이 사용해온 방식이며 플랫폼 간 데이터를 주고 받을 때 사용하는 마크업 언어

HTML과 흡사한 구조를 가짐

XML이 가지는 고유한 문법이 있다는 점에서 소프트웨어 및 하드웨어에 대하여 독립적으로 데이터를 처리

XML은 트리(Tree) 계층 구조를 가지고 있습니다. 루트(Root) 요소부터 시작해 여러 개의 자식을 계층적으로 포함

 

장점 : 시작되는 곳과 끝나는 곳을 표시하여 데이터의 구조 명확히 표현

단점 : 반복되는 텍스트가 많아 코드 전체 길이가 길어져 읽기가 어려움 (가독성 떨어짐)

<?xml version="1.0" encoding="UTF-8"?>

<users>
  <user>
    <name>홍길동</name>
    <score>95</score>
    <hobby>
      <element>Soccer</element>
      <element>Ninza</element>
    </hobby>
  </user>
  
  <user>
    <name>이순신</name>
    <score>100</score>
    <hobby>
      <element>Sing</element>
      <element>Dancing</element>
    </hobby>
  </user>

코드블록은 사람이 작성할 때알아보기 좋도록 들여쓰기를 사용하나 컴퓨터는 한 줄로 인식

 

유효성 검증(Validation)을 통해서 올바르게 작성되었는지 확인 가능

XML 유효성 검증 사이트: https://www.xmlvalidation.com/

XML 선언
XML 문서는 기본적으로 <xml> 태그를 이용해서 XML 문서임을 명시할 수 있음

- version: XML 문서의 버전을 명시합니다.
- encoding: XML 문서의 문자 셋(Character Set)을 명시합니다. 일반적으로 UTF-8을 사용합니다.
- standalone: XML 문서 외부 소스 데이터에 의존하는지의 여부를 명시합니다.
XML 문법
시작 태그와 종료 태그로 구성
태그는 꺽쇠(<>)를 이용해 명시하고 닫는 태그에는 슬래시(/)를 사용

// 시작태그와 종료 태그는 대소문자까지 모두 동일
<TITLE>내용</TITLE>​

// 태그 안에 속성을 명시할 때는 따옴표 사용
<TITLE color="red" type="bold">내용</TITLE>​

// 주석
 <!-- 주석 내용 -->​

JSON(JavaScript Object Notation)
정보 전달

일반적으로 서버와의 통신 규약인 REST API를 사용할 때 가장 많이 사용

사실상 모든 프로그래밍 언어에서 JSON을 지원 → XML과 YAML에 비해서 채택률↑

 

장점 : 구문이 간단하고 높은 가독성 지님

단점 : 문법 오류에 취약 → 따옴표나 괄호가 하나라도 빠지면 문서 전체 읽을 수 없고, 주석 사용X

{
	"users": {
		"1": {
			"name": "홍길동",
			"score": 95,
			"hobby": ["Soccer", "Ninza"]
		},

		"2": {
			"name": "이순신",
			"score": 100,
			"hobby": ["Sing", "Dancing"]
		};
	}
}

JSON 또한 유효성 검증 사이트에서 그 문법적 유효성을 검증 가능

XML 유효성 검증 사이트: https://www.xmlvalidation.com/

JSON 문법
꺽쇠가 사용되지 않고 대괄호({})와 큰 따옴표를 이용해 계층형 구조를 형성

// 주석 사용 X
// 문자열 : 유니코드 문자로 구성. 백슬래시(\) 이스케이프 문자를 사용
{ "name": "홍길동" }​

 

// 숫자 : JavaScript의 배정도수 부동소수점 형식
{
  "number_1" : 210,
  "number_2" : 215,
  "number_3" : 21.05,
  "number_4" : 10.05
}​

 

// 부울 값 : 참 또는 거짓 둘 중 하나로 지정. 부울 값은 따옴표로 묶이지 않으며 문자열 값으로 취급.
{ "AllowPartialShipment" : false }​

 

// Null : 빈 값. 키에 어떤 값도 할당되어 있지 않은 경우 Null로 취급
{ "Special Instructions" : null }​

 

// 객체 데이터 : {}(중괄호) 사이에 삽입된 한 쌍의 이름 또는 값. 키는 문자열이어야 하며 쉼표로 구분
{
  "Influencer" :   { "name" : "Jaxon" ,  "age" : "42" ,  "city" ,  "New York" }
}​

YAML(YAML Ain't Markup Language)
개발자가 편리하게 읽고 작성하기 위한 용도

태그를 사용하지 않고 공백 위주로 데이터를 구분 → 한 줄 작성 불가

일반적으로 API를 만들 때에는 JSON을 사용하며, YAML은 설정 파일을 작성할 때 가장 많이 사용된다는 특징

개행, 공백으로 블록을 인식하고 주석 사용 가능. 

위에서 아래로 직렬적으로 작성되어 있다는 점에서 [데이터 직렬화 형식]이라고도 부름

 

장점 : 한글과 같은 유니코드를 그대로 사용 가능.  상속(Inherit) 등의 기능도 적용 가능 (효율성)

단점 : 태그를 사용하지 않고 들여쓰기로 구조화된 데이터 정의해 한 줄 작성 불가하고 구문 및 유효성 검사 오류가 발생하기 쉬움. 디버깅 어려움(YAML의 선언적 특성). 중단점 및 유사 기능 존재X

users:

  1:
    name: 홍길동
    score: 95
    hobby:
      - Soccer		// 하이픈(-) : 배열 표시
      - Ninza

  2:
    name: 이순신
    score: 100
    hobby:
      - Sing
      - Dancing

YAML 또한 유효성 검증 사이트에서 그 문법적 유효성을 검증 가능

YAML 유효성 검증 사이트: http://www.yamllint.com/

'FrontEnd > Vue.js' 카테고리의 다른 글

GitHub Workflow  (1) 2023.04.29
Git/GitHub  (0) 2023.04.29
MPA/SPA  (2) 2023.04.23
CSR/SSR  (2) 2023.04.23
Interface  (2) 2023.04.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2026/01   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함