차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:json_intro [2021/06/02 20:29]
emblim98 만듦
+++ wiki:javascript:javascript_note:json_intro [2023/01/13 18:44] (현재)
@@ 줄 4: / 줄 4: @@
   * author      : 오션
   * email       : shlim@repia.com
-  * lastupdate  : 2021-06-02
+  * lastupdate  : 2022-12-09 Fri
 </WRAP>
 <WRAP clear></WRAP>
@@ 줄 11: / 줄 11: @@
 [[https://www.w3schools.com/js/js_json_intro.asp|JSON - Introduction]]\\
-  JSON: JavaScript Object Notation.(자바스크립트 객체 표기법)
+  JSON은 JavaScript Object Notation(자바스크립트 객체 표기법)을 의미합니다.
-  JSON은 데이터를 저장, 교환하기 위한 문법(구문, Syntax)입니다.
+  JSON은 데이터를 저장, 전송하기 위한 텍스트 형식입니다.
-  JSON은 자바스크립트 객체 표기법으로 작성된 텍스트입니다.
+  JSON은 자체 서술적(self-describing)이며, 이해하기 쉽습니다.
-=====Exchanging Data=====
+===== JSON Example =====
-브라우저와 서버 간에 데이터를 교환할 때, 텍스트만이 데이터가 될 수 있습니다.\\
+아래의 예제는 JSON string입니다.\\
-\\
-%%JSON%%은 텍스트이며, 모든 %%JavaScript%% 객체를 %%JSON%%으로 변환하고, %%JSON%%을 서버로 보낼 수 있습니다.\\
-\\
-서버에서 받은 모든 %%JSON%%을 %%JavaScript%% 객체로 변환할 수도 있습니다.\\
-\\
-이렇게 하면, 복잡한 구문 분석(parsing) 및 번역 없이 %%JavaScript%% 객체로서의 데이터로 작업할 수 있습니다.\\
-=====Sending Data=====
-%%JavaScript%% 객체에 데이터를 저장할 경우, 객체를 %%JSON%%으로 변환하여 서버로 보낼 수 있습니다.\\
-====Example====
 <code javascript>
-<body>
+'{"name":"John", "age":30, "car":null}'
-  <h2>Convert a JavaScript object into a JSON string, and send it to the server.</h2>
-  <!--
-  demo_json.php:
-  John from New York is 31
-   -->
-  <script>
-    var myObj = { name: "John", age: 31, city: "New York" };
-    var myJSON = JSON.stringify(myObj);
-    window.location = "demo_json.php?x=" + myJSON;
-  </script>
-</body>
 </code>
+개의 속성을 가진 객체를 정의합니다.\\
+  * name
+  * age
+  * car
-=====Receiving Data=====
+각각의 속성은 값(value)을 가집니다.\\
-JSON 포맷으로 데이터를 받는 경우, %%JavaScript%% 객체로 변환할 수 있습니다.\\
+JavaScript 프로그램으로 JSON string을 구문분석(parse)하면, 객체로서의 데이터에 접근할 수 있습니다.\\
-====Example====
 <code javascript>
-<body>
+let personName = obj.name;
+let personAge = obj.age;
+</code>
-  <h2>Convert a string written in JSON format, into a JavaScript object.</h2>
+===== What is JSON? =====
+  * JSON은 JavaScript Object Notation(자바스크립트 객체 표기법)을 나타냅니다.
+  * JSON은 경량의 데이터 교환 형식입니다.
+  * JSON은 자바스크립트 객체 표기법으로 쓰인 평문입니다.
+  * JSON은 컴퓨터 간 데이터를 보내기 위해 사용됩니다.
+  * JSON은 언어 독립적입니다.
-  <p id="demo"></p>
+  JSON 구문은 자바스크립트 객체 표기법에서 유래되었지만, JSON 형식은 텍스트만으로 되어 있습니다.
+  JSON을 읽고 생성하는 코드는 많은 프로그래밍 언어에 존재합니다.
-  <script>
+JSON 포맷은 원래 Douglas Crokcford가 지정했습니다.\\
-    var myJSON = '{"name":"John", "age":31, "city":"New York"}';
-    var myObj = JSON.parse(myJSON);
-    document.getElementById("demo").innerHTML = myObj.name; // John
-  </script>
-</body>
+===== Why Use JSON? =====
-</code>
+JSON 포맷은 구문적으로 JavaScript 객체를 생성하기 위한 코드와 유사합니다.\\
+이 때문에 JavaScript 프로그램은 JSON 데이터를 JavaScript 객체로 쉽게 변환할 수 있습니다.\\
+\\
+JSON 포맷이 텍스트로만 되어있어, JSON 데이터를 컴퓨터 간에 쉽게 전송할 수 있으며\\
+모든 프로그래밍 언어에서 사용할 수 있습니다.\\
+\\
+JavaScript에는 JSON 문자열을 JavaScript 객체로 변환하는 내장 함수가 있습니다:\\
+\\
+**''JSON.parse()''**\\
+\\
+JavaScript에는 객체를 JSON 문자열로 변환하는 내장 함수도 있습니다.\\
+\\
+**''JSON.stringify()''**\\
+\\
+  서버에서 순수 텍스트를 받아 JavaScript 객체로 사용할 수 있습니다.
+  JavaScript 객체를 순수한 텍스트 포맷으로 서버에 보낼 수 있습니다.
+  복잡한 구문 분석 및 번역 없이, 데이터를 JavaScript 객체로 사용할 수 있습니다.
-=====Storing Data=====
+===== Storing Data =====
-데이터를 저장할 때, 데이터는 특정 형식이어아 하고, 저장 위치 선택과 관계없이 텍스트는 항상 정상적인(legal) 형식 중 하나입니다.\\
+데이터를 저장할 때 데이터는 특정 형식이어야 하며\\
+저장 위치에 관계없이 텍스트는 항상 허용되는 포맷 중 하나입니다.\\
 \\
-%%JSON%%을 사용하면 %%JavaScript%% 객체를 텍스트로 저장할 수 있습니다.\\
+JSON을 사용하면 JavaScript 객체를 텍스트로 저장할 수 있습니다.\\
-====Example====
+====== JSON 객체 ======
-데이터를 로컬 저장소에 저장하기\\
+자바스크립트 배열과 객체를 활용해 자료를 표현하는 방식\\
+자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify()메소드를 사용합니다.\\
+\\
 <code javascript>
-<body>
+const data = [
+    {
+        name : '혼자 공부하는 파이썬'
+        , price : 18000
+        , publisher : '한빛미디어'
+    }
+    ,
+    {
+        name : 'HTML5 웹 프로그래밍 입문'
+        , price : 20000
+        , publisher : '한빛아카데미'
+    }
+]
-  <h2>Store and retrieve data from local storage.</h2>
+console.log(JSON.stringify(data));
+console.log('+++++++++++++++++++++++++++');
-  <p id="demo"></p>
+console.log(JSON.stringify(data, null, 2));
-  <script>
-    var myObj, myJSON, text, obj;
-    // Storing data:
-    myObj = { name: "John", age: 31, city: "New York" };
-    myJSON = JSON.stringify(myObj);
-    localStorage.setItem("testJSON", myJSON);
-    // Retrieving data;
-    text = localStorage.getItem("testJSON");
-    obj = JSON.parse(text);
-    document.getElementById("demo").innerHTML = obj.name; // John
-  </script>
-</body>
 </code>
-=====What is JSON?=====
-  JSON은 JavaScript Object Notation을 나타냅니다.
-  JSON은 경량의 데이터 교환 형식입니다.
-  JSON은 "자체 설명"이며 이해하기 쉽습니다.
-  JSON은 언어 독립적입니다*
-  JSON은 JavaScript 구문을 사용하지만 JSON 형식은 텍스트 전용입니다.
-  모든 프로그래밍 언어에서 텍스트를 읽고 데이터 형식으로 사용할 수 있습니다.
-  JSON 형식은 원래 Douglas Crockford가 지정했습니다.
-=====Why use JSON?=====
-%%JSON%% 형식은 텍스트 전용이므로, 서버와 쉽게 주고받을 수 있으며, 모든 프로그래밍 언어에서 데이터 형식으로 사용할 수 있습니다.\\
 \\
-%%JavaScript%%에는 %%JSON%% 형식으로 작성된 문자열을 네이티브 %%JavaScript%% 객체로 변환하는 내장 함수가 있습니다.\\
+**결과 : **\\
+<code javascript>
+[{"name":"혼자 공부하는 파이썬","price":18000,"publisher":"한빛미디어"},{"name":"HTML5 웹 프로그래밍 입문","price":20000,"publisher":"한빛아카데미"}]
++++++++++++++++++++++++++++
+[
+  {
+    "name": "혼자 공부하는 파이썬",
+    "price": 18000,
+    "publisher": "한빛미디어"
+  },
+  {
+    "name": "HTML5 웹 프로그래밍 입문",
+    "price": 20000,
+    "publisher": "한빛아카데미"
+  }
+]
+</code>
 \\
-''%%JSON.parse()%%''\\
+<code javascript>
+console.log(JSON.stringify(data));  // 매개변수를 하나만 넣으면 한 줄로 반환됩니다.
+</code>
 \\
-따라서 서버에서 %%JSON%% 형식으로 데이터를 수신하면, 다른 %%JavaScript%% 객체와 마찬가지로 사용할 수 있습니다.\\
+<code javascript>
+console.log(JSON.stringigy(data, null, 2));
+//null : 2번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을 때 사용하나, 거의 사용하지 않으며, 일반적으로 null(아무 것도 없음)을 넣습니다.\\
+//2: 들여쓰기 2칸으로 설정합니다.\\
+//--출처 : [혼자 공부하는 자바스크립트]
+</code>

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구