ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • JSON이란?
    웹 프로그래밍/FE(Front-End) 2021. 7. 5. 22:52

    JSON은 JavaScript Object Naotation의 약어로 말 그대로 번역해 보면 자바스크립트에서의 객체 표기법으로 작성된 텍스트이다.

    이러한 JSON은 데이터 저장 및 교환을 위한 개방형 표준 포맷으로 사용되고도 하고 넓은 범위로는 AJAX를 위해 XML을 대체하는 데이터 포맷으로 사용되기도 한다.

     

    자바스크립트 개게 표기법 구문에서 파생된 JSON의 구문은 다음과 같다.

    - 데이터는 이름/값(속성-값 쌍 또는 키-값쌍)이다.

    - 데이터는 쉼표로 구분되다.

    - 중골호는 객체를 유지한다.

    - 대괄호는 배열을 유지한다.

     

    JSON에서의 값(value)은 문자열, 숫자, 객체(JSON 객체), 배열, Boolean, null 중 하나이여한다.

    JSON 안에 있는 값(value)에 접근하기 위해서는 도트(.) 표기법과 대괄호([ ]) 표기법을 사용하면 된다.

    <script>
        var Json, x, y;
        Json = {"name":"Ratel", "age":null, "city":"jungle"};
        
        x = Json.name; 
        // 결과: Ratel
        
        y = Json["name"];
        // 결과: Ratel
    </script>

    도트(.) 표기법과 대괄호([ ]) 표기법을 사용하면 JSON의 값(value)를 수정할 수도 있다.

    <script>
        var Json, x, y;
        // JSON의 값으로 문자열뿐만 아니라 새로운 객체, 배열도 가능.
        Json = {"name":"Ratel", "age":null, "cars":["Genesis", "kia", "BMW"],
                "cities":{"city1":"Seoul", "city2":"Suwon"}
        };
        
        Json.name = "blog"; 
        // 결과:  Json = {"name":"blog",...};
        
        Json[cars][0] = "Benz";
        // Json = {..., "cars":["Benz", "kia", "BMW"], ...};
        
        Json.cities["city1"] = "Jeonju";
        // Json = {..., "cities":{"city1":"Jeonju", "city2":"Suwon"}};
    </script>

     

     

    JSON의 장점은 복잡한 파싱 및 번역 작업없이 데이터를 자바스크립트 객체로 처리할 수 있다는 것이다.

    브라우저와 서버 간에 데이터를 교환할 때 데이터는 텍스트뿐이다.

    JSON은 이러한 텍스트의 일종이며 모든 자바스크립트 객체를 JSON으로 변환하여 서버로 보낼 수 있다.

    또한, 서버에서 받은 JSON을 자바스크립트 객체로 변환할 수도 있다.

     

    자바스크립트 객체를 JSON으로 변환하여 서버로 보내는 코드를 봐보자.

    <script>
        var Obj = {"name":"Ratel", "hobby":"basketball", "city":"jungle"};
        var Json = JSON.stringify(Obj);
        window.location = "demo_json.php?x="+Json;
        
    </script>

    이런식으로 JSON.stringify()함수를 통해 자바스크립트 객체를 텍스트(JSON)으로 변환하여 데이터를 보낼 수 있다.

    만약, 서버로부터 JSON 형시의 데이터를 받았다면 JSON.parse()를 통해 손쉽게 자바스크립트 객체로 변환하여 데이터를 이용할 수 있다.

     

     

    JSON의 또 다른 장점은 JSON 형식이 텍스트 전용이라는 것이다.

    이것이 왜 장점일까?

    텍스트는 모든 프로그래밍 언어에서 데이터 형식으로 읽고 사용할 수 있기 때문에 언어에 독립적일 수 있다.

    즉, JSON이 자바스크립트 이외에 어떠한 언어에서도 읽고 쓰는데 문제가 발생하지 않는다.

    '웹 프로그래밍 > FE(Front-End)' 카테고리의 다른 글

    flex box layout (display : flex ;)  (0) 2021.07.08
    브라우저 객체(BOM)  (0) 2021.07.04
    form 태그 파헤치기  (0) 2021.07.01
    [에러 수정] Uncaught TypeError: $.ajax is not a function  (0) 2021.06.29
    JQuery 접해보기  (0) 2021.06.27

    댓글

Designed by Tistory.