사용자 도구

사이트 도구


wiki:javascript:javascript_note:json_intro

JavaScript Json Intro

  • description : JavaScript JSON - Introduction
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2022-12-09 Fri


The source of this article

JSON - Introduction

JSON은 JavaScript Object Notation(자바스크립트 객체 표기법)을 의미합니다.
JSON은 데이터를 저장, 전송하기 위한 텍스트 형식입니다. 
JSON은 자체 서술적(self-describing)이며, 이해하기 쉽습니다.

JSON Example

아래의 예제는 JSON string입니다.

'{"name":"John", "age":30, "car":null}'

3개의 속성을 가진 객체를 정의합니다.

  • name
  • age
  • car

각각의 속성은 값(value)을 가집니다.
JavaScript 프로그램으로 JSON string을 구문분석(parse)하면, 객체로서의 데이터에 접근할 수 있습니다.

let personName = obj.name;
let personAge = obj.age;

What is JSON?

  • JSON은 JavaScript Object Notation(자바스크립트 객체 표기법)을 나타냅니다.
  • JSON은 경량의 데이터 교환 형식입니다.
  • JSON은 자바스크립트 객체 표기법으로 쓰인 평문입니다.
  • JSON은 컴퓨터 간 데이터를 보내기 위해 사용됩니다.
  • JSON은 언어 독립적입니다.
JSON 구문은 자바스크립트 객체 표기법에서 유래되었지만, JSON 형식은 텍스트만으로 되어 있습니다.
JSON을 읽고 생성하는 코드는 많은 프로그래밍 언어에 존재합니다. 

JSON 포맷은 원래 Douglas Crokcford가 지정했습니다.

Why Use JSON?

JSON 포맷은 구문적으로 JavaScript 객체를 생성하기 위한 코드와 유사합니다.
이 때문에 JavaScript 프로그램은 JSON 데이터를 JavaScript 객체로 쉽게 변환할 수 있습니다.

JSON 포맷이 텍스트로만 되어있어, JSON 데이터를 컴퓨터 간에 쉽게 전송할 수 있으며
모든 프로그래밍 언어에서 사용할 수 있습니다.

JavaScript에는 JSON 문자열을 JavaScript 객체로 변환하는 내장 함수가 있습니다:

JSON.parse()

JavaScript에는 객체를 JSON 문자열로 변환하는 내장 함수도 있습니다.

JSON.stringify()

서버에서 순수 텍스트를 받아 JavaScript 객체로 사용할 수 있습니다.
JavaScript 객체를 순수한 텍스트 포맷으로 서버에 보낼 수 있습니다.
복잡한 구문 분석 및 번역 없이, 데이터를 JavaScript 객체로 사용할 수 있습니다.

Storing Data

데이터를 저장할 때 데이터는 특정 형식이어야 하며
저장 위치에 관계없이 텍스트는 항상 허용되는 포맷 중 하나입니다.

JSON을 사용하면 JavaScript 객체를 텍스트로 저장할 수 있습니다.

JSON 객체

자바스크립트 배열과 객체를 활용해 자료를 표현하는 방식
자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify()메소드를 사용합니다.

const data = [
    {
        name : '혼자 공부하는 파이썬'
        , price : 18000
        , publisher : '한빛미디어'
    }
    ,
    {
        name : 'HTML5 웹 프로그래밍 입문'
        , price : 20000
        , publisher : '한빛아카데미'
    }
]
 
console.log(JSON.stringify(data));
console.log('+++++++++++++++++++++++++++');
console.log(JSON.stringify(data, null, 2));


결과 :

[{"name":"혼자 공부하는 파이썬","price":18000,"publisher":"한빛미디어"},{"name":"HTML5 웹 프로그래밍 입문","price":20000,"publisher":"한빛아카데미"}]
+++++++++++++++++++++++++++
[
  {
    "name": "혼자 공부하는 파이썬",
    "price": 18000,
    "publisher": "한빛미디어"
  },
  {
    "name": "HTML5 웹 프로그래밍 입문",
    "price": 20000,
    "publisher": "한빛아카데미"
  }
]


console.log(JSON.stringify(data));  // 매개변수를 하나만 넣으면 한 줄로 반환됩니다.


console.log(JSON.stringigy(data, null, 2));
//null : 2번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을 때 사용하나, 거의 사용하지 않으며, 일반적으로 null(아무 것도 없음)을 넣습니다.\\
//2: 들여쓰기 2칸으로 설정합니다.\\
//--출처 : [혼자 공부하는 자바스크립트]
/var/services/web/dokuwiki/data/pages/wiki/javascript/javascript_note/json_intro.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)