[자바스크립트] JSON

데이터 교환 방식

• 서버와 클라이언트 간에 자료를 주고받기 위해 양쪽 모두 이해할 수 있는 형식을 사용해야 함

1) XML은 컴퓨터에서 처리하는 모든 문서의 표준 형식이기 때문에 웹에서 사용 가능
2) 최근에는 JSON 형식을 더 많이 사용함!

 

---

JSON의 특징

• 텍스트로만 구성되었기 때문에 서버와 클라이언트 사이에 주고 받을 때 전송 속도가 아주 빠름
• JSON은 프로그래밍 언어나 플랫폼에 대해 독립적, C++, 자바, 자바스크립트, 파이썬 등 많은 언어에서 사용 가능
• 자바스크립트 사용자라면 누구나 알고 있는 표기법 사용, 읽기도 쉽고 자바스크립트 객체로 변환하기도 쉬움

---

JSON의 형식

• 중괄호 { }사이에 ‘이름’과 ‘값'으로 구성됨
• JSON에서는 ‘이름’ 부분에 반드시 큰따옴표를 붙이는 것이 큰 차이점

{
    "이름" : 값,
     ...... 
}

 

---

JSON의 ‘이름’

• 반드시 큰따옴표(“ “)로 묶어야 함
• 큰 따옴표가 없는 이름은 사용할 수 없음

{ "name" : "도레미" } // O
{ 'name' : "도레미" } // X
{ name : "도레미" } // X

 

• JSON 이름에는 공백space이나 하이픈(-), 언더바(_)를 함께 사용할 수 있음

{ "full name" : "도레미" }
{ "full-name" : "도레미" }

 

• 그러나 이름에 공백이나 하이픈이 있을 경우 프로그램을 통해 그 이름에 접근하기 쉽지 않음
  → 둘 이상의 단어로 된 이름을 사용한다면 언더스코어(_)를 사용하는 것이 좋음

 { "full_name" : "도레미" }

 

---

JSON의 ‘값’

• JSON의 ‘값’에는 숫자, 문자열, boolean, null, 배열만 사용할 수 있고, 함수는 사용할 수 없음
  • 숫자형 : 정수와 실수 모두 사용할 수 있지만, 8진수나 16진수를 사용한 표기법 지원X
  • 문자열 : 항상 큰따옴표(“ ”)로 묶어야 함
  • 논릿값과 null : true/false 값을 가지는 논리형을 사용할 수도 있고 null 유형도 사용할 수 있음
  • 문자열, 배열 : JSON 문자열 안에 또다른 JSON 문자열을 넣을 수도 있으며, 배열에 대괄호([ ]) 사용

---

JSON 문자열

• JSON 문자열 안에 또 다른 JSON 문자열을 지정할 수 있음
  예) 신청한 과목의 이름과 주당 시간을 새로운 JSON 문자열로 사용

{
    "name" : "도레미",
    "major" : "컴퓨터 공학",
    "grade" : 2,
    "course" : {
        "title" : "웹 기초", 
        "timePerWeek" : 3
    }
}

 

 

• 여러 개의 JSON 문자열을 배열 형태로 저장할 수 있다.

예시 : https://jsonplaceholder.typicode.com/users

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157",
      "geo": {
        "lat": "-68.6102",
        "lng": "-47.0653"
      }
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info",
    "company": {
      "name": "Romaguera-Jacobson",
      "catchPhrase": "Face to face bifurcated interface",
      "bs": "e-enable strategic applications"
    }
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "Julianne.OConner@kory.org",
    "address": {
      "street": "Hoeger Mall",
      "suite": "Apt. 692",
      "city": "South Elvis",
      "zipcode": "53919-4257",
      "geo": {
        "lat": "29.4572",
        "lng": "-164.2990"
      }
    },
    "phone": "493-170-9623 x156",
    "website": "kale.biz",
    "company": {
      "name": "Robel-Corkery",
      "catchPhrase": "Multi-tiered zero tolerance productivity",
      "bs": "transition cutting-edge web services"
    }
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "Lucio_Hettinger@annie.ca",
    "address": {
      "street": "Skiles Walks",
      "suite": "Suite 351",
      "city": "Roscoeview",
      "zipcode": "33263",
      "geo": {
        "lat": "-31.8129",
        "lng": "62.5342"
      }
    },
    "phone": "(254)954-1289",
    "website": "demarco.info",
    "company": {
      "name": "Keebler LLC",
      "catchPhrase": "User-centric fault-tolerant solution",
      "bs": "revolutionize end-to-end systems"
    }
  },
  {
    "id": 6,
    "name": "Mrs. Dennis Schulist",
    "username": "Leopoldo_Corkery",
    "email": "Karley_Dach@jasper.info",
    "address": {
      "street": "Norberto Crossing",
      "suite": "Apt. 950",
      "city": "South Christy",
      "zipcode": "23505-1337",
      "geo": {
        "lat": "-71.4197",
        "lng": "71.7478"
      }
    },
    "phone": "1-477-935-8478 x6430",
    "website": "ola.org",
    "company": {
      "name": "Considine-Lockman",
      "catchPhrase": "Synchronised bottom-line interface",
      "bs": "e-enable innovative applications"
    }
  },
  {
    "id": 7,
    "name": "Kurtis Weissnat",
    "username": "Elwyn.Skiles",
    "email": "Telly.Hoeger@billy.biz",
    "address": {
      "street": "Rex Trail",
      "suite": "Suite 280",
      "city": "Howemouth",
      "zipcode": "58804-1099",
      "geo": {
        "lat": "24.8918",
        "lng": "21.8984"
      }
    },
    "phone": "210.067.6132",
    "website": "elvis.io",
    "company": {
      "name": "Johns Group",
      "catchPhrase": "Configurable multimedia task-force",
      "bs": "generate enterprise e-tailers"
    }
  },
  {
    "id": 8,
    "name": "Nicholas Runolfsdottir V",
    "username": "Maxime_Nienow",
    "email": "Sherwood@rosamond.me",
    "address": {
      "street": "Ellsworth Summit",
      "suite": "Suite 729",
      "city": "Aliyaview",
      "zipcode": "45169",
      "geo": {
        "lat": "-14.3990",
        "lng": "-120.7677"
      }
    },
    "phone": "586.493.6943 x140",
    "website": "jacynthe.com",
    "company": {
      "name": "Abernathy Group",
      "catchPhrase": "Implemented secondary concept",
      "bs": "e-enable extensible e-tailers"
    }
  },
  {
    "id": 9,
    "name": "Glenna Reichert",
    "username": "Delphine",
    "email": "Chaim_McDermott@dana.io",
    "address": {
      "street": "Dayna Park",
      "suite": "Suite 449",
      "city": "Bartholomebury",
      "zipcode": "76495-3109",
      "geo": {
        "lat": "24.6463",
        "lng": "-168.8889"
      }
    },
    "phone": "(775)976-6794 x41206",
    "website": "conrad.com",
    "company": {
      "name": "Yost and Sons",
      "catchPhrase": "Switchable contextually-based project",
      "bs": "aggregate real-time technologies"
    }
  },
  {
    "id": 10,
    "name": "Clementina DuBuque",
    "username": "Moriah.Stanton",
    "email": "Rey.Padberg@karina.biz",
    "address": {
      "street": "Kattie Turnpike",
      "suite": "Suite 198",
      "city": "Lebsackbury",
      "zipcode": "31428-2261",
      "geo": {
        "lat": "-38.2386",
        "lng": "57.2232"
      }
    },
    "phone": "024-648-3804",
    "website": "ambrose.net",
    "company": {
      "name": "Hoeger LLC",
      "catchPhrase": "Centralized empowering task-force",
      "bs": "target end-to-end models"
    }
  }
]

- 전체가 하나의 배열로 묶여 있고 그 안에 여러 사용자 정보가 들어 있음
- 각 사용자 정보의 ‘address’나 ‘company’ 이름 부분 : 주소와 회사 정보가 또 다른 JSON 문자열로 구성되어 있음
- 하나의 JSON 문자열 안에 얼마든지 많은 정보를 저장할 수 있음

 

---

객체를 JSON 형식으로 변환하기

• 클라이언트에서 정보를 처리할 때는 객체를 사용함
• 객체를 JSON 형식으로 저장하거나, JSON 형식을 요구하는 서버로 넘기려면 객체를 JSON 형식으로 변환 해야함
• 이것을 직렬화(stringify)라고 함

JSON.stringify(객체)

 let student = {name:"도레미", major:"컴퓨터 공학", grade:2}
 let json = JSON.stringify(student)

 

---

JSON 을 객체로 변환하기

• 서버에서 가져온 JSON 자료를 사용하려면 객체 형태로 변환해야 함
• 이것을 파싱(parsing)이라고 함

 JSON.parse(JSON 문자열)

let member = '{"name" : "백두산", "age" : 30,  "hobby" : "swimming" }’
let member_obj = JSON.parse(member)