23.06.08) JSON이란?

🤓오늘 공부한 내용

💡 JSON 정의

JSON은 JavaScript Object Notation의 약자: 대부분의 프로그래밍 언어는 JSON형식의 문자열을 읽어들이는 기능이 있는데, 네트워크를 통해서 각각의 프로그래밍 언어로 만든 데이터를 교환할 때 사용한다.

 

1. Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷 (=자바스크립트의 객체처럼 자료를 표현)

2. 데이터 유형은 문자열, 숫자, 불, Null, 객체, 배열이 있다

3. 문자열과 프로퍼티의 이름 작성시 반드시 큰따옴표로 만들어야 한다. (key에도 큰따옴표 사용)

4. JSON 데이터는 쉼표(,)로 나열

5. JSON 데이터는 이름과 값의 쌍, key : value 형식으로 구성, 중괄호({})로 둘러쌓아 표현

 

📌JSON 데이터형식

• 문자열 : 큰따옴표("")로 묶어준다

// JSON string(문자열) 
{ "name" : "Jones" }

• 숫자 : 정수 또는 부동소수여야 함

// JSON number(숫자) 
{
  "number_1" : 210,
  "number_2" : 215,
  "number_3" : 21.05,
  "number_4" : 10.05
}

• 불리언(boolean) :  값은 따옴표로 묶이지 않으며, 문자열 값으로 취급

// JSON boolean(불리언) 
{ "manager" : true }

• Null : 빈 값 = 키에 어떤 값도 할당되어 있지 않은 경우

// JSON Null
{ "Instructions" : null }

• 객체 :  { } 사이에 삽입된 한 쌍의 이름 또는 값 , 키는 문자열이어야 하며 쉼표로 구분

// JSON object(객체)
{"Influencer" :   { "name" : "alice" ,  "age" : "20" ,  "city" ,  "New York" }}

• 배열 : [ ]로 둘러쌓아 표현,  배열 값은 문자열, 숫자, 객체, 배열, 부울 또는 Null 유형

// JSON array(배열) 
{"Influencers" : [{ "name" : "alice", "age" : 20, "Works At" : "instagram"}] }

 

 

📌JSON.stringify()메소드

 : 자바스크립트 객체를 JSON 문자열로 변환할때 사용

const data = [
  {
    name: "혼자 공부하는 자바스크립트",
    author: "윤인성",
    publisher: "한빛미디어",
  },
  {
    name: "혼자 공부하는 파이썬",
    author: "윤인성",
    publisher: "한빛미디어",
  },
];

console.log(JSON.stringify(data));

  👇JSON.stringify() 메소드 출력

[{"name":"혼자 공부하는 자바스크립트","author":"윤인성","publisher":"한빛미디어"},{"name":"혼자 공부하는 파이썬","author":"윤인성","publisher":"한빛미디어"}]

 

 

📌JSON.parse()메소드

 : JSON 문자열을 자바스크립트 객체로 전개할때 사용 (매개변수에 JSON형식의 문자열을 넣으면 된다.)

const data = [
  {
    name: "혼자 공부하는 자바스크립트",
    author: "윤인성",
    publisher: "한빛미디어",
  },
  {
    name: "혼자 공부하는 파이썬",
    author: "윤인성",
    publisher: "한빛미디어",
  },
];

const json = JSON.stringify(data);

console.log(JSON.parse(json));

 👇JSON.parse() 메소드 출력

Array(2) [{…}, {…}]
0: {name: '혼자 공부하는 자바스크립트', author: '윤인성', publisher: '한빛미디어'}
1: {name: '혼자 공부하는 파이썬', author: '윤인성', publisher: '한빛미디어'}
length: 2
[[Prototype]]: Array(0)

 

 

📌참고자료

• https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
• https://www.oracle.com/kr/database/what-is-json/
• https://lxxyeon.tistory.com/153
• 혼자 공부하는 자바스크립트 책 - 윤인성