Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

heenam

JSON 본문

Wep Programming/기타

JSON

znzltiq 2020. 7. 23. 03:08

JSON

  JSON은 텍스트-기반의 데이터 교환 형식이다. 이 형식은 사람도 읽을 수 있으며 컴퓨터도 쉽게 분석할 수 있다.

  JSON은 자바스크립 언어에서 유래하여 배열과 객체를 표현하는 양식에 토대를 두고 있다.

  JSON은 근본적으로 언어에 독립적이다. 따라서 어떤 언어에서도 읽고 쓰는 데 문제가 없다.

 JSON과 XML

  JSON과 XML은 경쟁자나 마찬가지이다. 둘 다 계층적으로 데이터를 구상할 수 있으며 프로그램으로 비교적 쉽게 구문

  분석할 수 있다. 하지만 XML과 달리 JSON은 종료 태그를 써줄 필요가 있다. 아주 작은 차이지만 JSON이 XML보다 

  간결하다. 따라서 빠르게 읽고 쓰는게 가능하다. 자바스크립트에서는 eval()을 사용해 쉽게 파싱할 수 있다. 배열도 사용

  할 수 있다.

 JSON의 구문

  가장 기본적으로 JSON 데이터는 이름/값 쌍으로 기록된다.

"name(이름)":"Hong(값)"

  위와 같이 "이름/값" 을 많이 모으면 JSON데이커가 된다. 여러 개의 "이름/ 값"을 묶는 방법으로 JSON은 자바스크립트

  에 있는 두 개의 구조를 기본으로 사용한다. 바로 객체와 배열이다.

  + 객체: 이름/값 형태를 갖은 쌍의 집합이다. 중괄호를 사용한다.

  + 배열: 값을 순서화된 리스트이다. 대괄호를 사용한다.

  객체

  객체는 이름과 값 쌍의 집합이다. 객체로 {로 시작하고 }로 종료된다. 각 쌍이 나오는 순서는 의미가 없다.

  배열

  배열은 대괄호 []로 나타낸다. 각 요소가 나타나는 순서에는 의미가 있다.

 JSON의 처리

  JSON의 가장 일반적인 용도 중 하나는 웹 서버에서 JSON 데이터를 가져오는 것이다. 애플리케이션은 JSON데이터를

  자바 객체로 변환하고 웹 페이지에 표시할 떄는 자바 객체를 사용한다. 편의상, 파일 대신 문자열을 입력으로 사용하여

  설명하자.

  JSON은 자바스크립트의 문법을 채용했기 때문에 자바스크립트를 자주 사용하는 웹 환경에서 eval 명령이 유리 하지만

  eval 명령은 외부에서 악성 코드가 유입될 수 있다. 따라서 이 방법보단 JSON 전용 파서를 사용하는 것이 안전하다.

  eval()을 사용하는 처리 방법

  JSON 텍스트 포맷은 자바스크립트 객체를 생성하기 위한 코드와 구문적으로 동일하다. 이 유사성 때문에, 전용 파서를

  사용하는 대신에 자바 프로그램에 내장된 eval()함수를 사용할 수 있다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h4>학생 명단</h4>
        <p style="background-color:yellow">
            이름: <span id="name"></span>&nbsp
            나이: <span id="age"></span>
        </p>
        <script>
            var s = '[' +
            '{"name":"Hong", "age":"21"},' +
            '{"name":"Kim", "age":"22"},' +
            '{"name":"Park", "age":"23"}]';
            var students = eval("("+s+")"); <-- *참조*

            students[1].name = "Lee";
            document.getElementById("name").innerHTML = students[1].name;
            document.getElementById("age").innerHTML = students[1].age;
        </script>
    </body>
</html>

  *참조*

  eval() 함수는 자바스크립트 컴파일러를 시용하여서 JSON텍스트를 구문 분석하고 자바스크립트 객체를 생성한다.

  구문 오류를 방지 하려면 텍스트는 괄호 안에 싸여 있어야 한다. 

 전용 파서를 사용하는 방법

  eval() 함수는 JSON 데이터 형식뿐만 아니라 모든 자바스크립트 문장을 컴파일하고 실행할 수 있다. 

  따라서 이것은 잠재적인 보안 문제를 일으킬 수 있다.

  따라서 보다 안전한 방법은 전용 JSON 파서를 사용하여 JSON 텍스트를 자바스크립트 객체로 변환하는 것이다.

  JSON파서는 JSON텍스트만을 인식하고 따라서 다른 문장은 컴파일하지 않는다. 또, 일반적인 경우, eval()보다 JSON 전

  용 파서가 더 빠르다.

var students = JSON.parse(s);

  앞의 예제에서 eval("("+s+")";을 JSON.parse(s)로 바꾸면 된다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h4>학생 명단</h4>
        <p style="background-color:yellow">
            이름: <span id="name"></span>&nbsp
            나이: <span id="age"></span>
        </p>
        <script>
            var s = '[' +
            '{"name":"Hong", "age":"21"},' +
            '{"name":"Kim", "age":"22"},' +
            '{"name":"Park", "age":"23"}]';
            var students = JSON.parse(s); <-- JSON 전용파서를 사용한다. 보다 안전하다.

            students[1].name = "Lee";
            document.getElementById("name").innerHTML = students[1].name;
            document.getElementById("age").innerHTML = students[1].age;
        </script>
    </body>
</html>

 

'Wep Programming > 기타' 카테고리의 다른 글

Ajax  (0) 2020.07.22
jQUERY  (0) 2020.07.20
'Wep Programming/기타' Related Articles more