JS - JSON ?

1. JSON 이란?

   1-1. 정의

 

• JSON은 JavaScript Object Notation의 약자로, 데이터를 저장하거나 전송할때 자주 사용하는 경량화된(가벼운, 쉬운) 데이터 교환 형식입니다.
• 데이터 포맷일 뿐이며 통신 방법이나, 프로그래밍 문법이 아닌 단순히 데이터를 표시하는 표현 방법 입니다.

   1-2. 특징

 

• 서버와 클라이언트 간의 교류에서 일반적으로 자주 사용합니다.
• JavaScript의 문법과 유사하지만 단순 텍스트 형식입니다.
• 특정 언어에 종속되지 않습니다. 

2. JSON vs XML

   2-1. XML 이란?

 

• XML은 EXtensible Markup Language의 약자로, HTML과 유사한 문자 기반 마크업 언어입니다.
• 다른 시스템끼리 다양한 종류의 데이터를 쉽게 교환할 수 있도록 해줍니다.
• 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋습니다.
• 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어집니다.

   2-2. JSON과 XML의 차이점

 

• JSON은 종료 태그를 사용하지 않으며, XML의 구문보다 더 짧습니다. 또한 XML 데이터보다 더 빨리 읽고 쓰기가 가능합니다.
• XML은 배열을 사용할 수 없지만, JSON은 배열을 사용할 수 없습니다.

---

• JSON은 HTML과 자바스크립트가 연동되어 빠른 응답이 필요한 웹 환경에서 많이 사용합니다. ( XML 문서는 XML DOM을 이용하여 문서에 접근하지만 JSON은 문자열을 전송받은 후 해당 문자열을 바로 파싱하므로 XML보다 처리 속도가 빠르기 때문)
• XML은 스키마를 사용하여 데이터의 무결성을 검증할 수 있는 곳에서 많이 사용합니다. (JSON은 전송받은 데이터의 무결성을 사용자가 직접 검증해야하기 때문)

3. JSON 메서드

   3-1. JSON.stringify

 

• 객체를 JSON으로 변환합니다.

let Data = {
    name: 'user_tistory',
    age: '25',
    detail: {
        phoneNum: '01011112222',
        address: '서울시'
    }
}

let convertData = JSON.stringify(Data);
console.log(typeof convertData); // string
console.log(convertData);
// "{"name":"user_tistory","age":"25","detail":{"phoneNum":"01011112222","address":"서울시"}}"

/*  객체 전체를 문자열로 변환하는 것을 확인할 수 있습니다.  */

 

   3-2. JSON.parse

 

• JSON문자열을 객체로 변환합니다. 

let Data = '{"name":"user_tistory","age":"25","detail":{"phoneNum":"01011112222","address":"서울시"}}';

let convertData = JSON.parse(Data);
console.log(typeof convertData); // object
console.log(convertData);
/*
    {
    name: 'user_tistory',
    age: '25',
    detail: { phoneNum: '01011112222', address: '서울시' }
    }
*/

/*  문자열 전체를 객체로 변환하는 것을 확인할 수 있습니다. */

🤔  정리 !

• JSON은 데이터를 저장하거나 전달할때 사용하는 단순 텍스트형식의 데이터 표현 방식으로 주로 웹 환경에서 사용!
• JSON 메서드로 .stringify(), .parse() 함수가 있다!
  
  
  • .stringift() : 객체 to JSON
  • .parse() : JSON문자열 to 객체

 

 

🔗 참고한 글

JSON으로 작업하기 - Web 개발 학습하기 | MDN