정보실

웹학교

정보실

javascript JavaScript에서 JSON으로 작업하는 방법 - JavaScript guide

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 JSON으로 작업하는 방법 


소개 


JSON은 JavaScript 프로그래밍 언어에서 파생되므로 JavaScript에서 데이터 형식으로 사용하는 것이 좋습니다. JavaScript Object Notation의 줄임말인 JSON은 보통“Jason”이라는 이름으로 발음 됩니다.


일반적인 용어로 JSON에 대해 자세히 알아 보려면 “JSON 소개” 자습서를 읽으십시오.


JavaScript 프로그램에서 JSON을 사용할 수 있는 위치를 생각하기 위해 JSON의 일반적인 사용 사례는 다음과 같습니다.

  • 데이터 저장
  • 사용자 입력에서 데이터 구조 생성
  • 서버에서 클라이언트로, 클라이언트에서 서버로, 서버에서 서버로 데이터 전송
  • 데이터 구성 및 확인

이 학습서는 JavaScript에서 JSON 작업에 대한 소개를 제공합니다. 이 소개를 최대한 활용하려면 JavaScript 프로그래밍 언어에 익숙해야 합니다.


https://www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript 


JSON 형식 


JSON 형식은 JavaScript 객체 구문에서 파생되지만 완전히 텍스트 기반입니다. 일반적으로 중괄호로 렌더링 되는 키-값 데이터 형식입니다.


JSON을 사용하는 경우 .json 파일에 JSON 객체가 표시 될 수 있지만 프로그램 컨텍스트 내에서 JSON 객체 또는 문자열로 존재할 수도 있습니다. 구문과 구조에 대한 자세한 내용은 여기를 참조하십시오.


당신이 .json 파일을 작업 할 때, 그것은 다음과 같이 표시됩니다


{ 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

대신 .js 또는 .html 파일에 JSON 객체가 있으면 변수로 설정된 것을 볼 수 있습니다.


var sammy = { 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

또한 JSON을 JavaScript 프로그램 파일 또는 스크립트의 컨텍스트 내에서 객체가 아닌 문자열로 볼 수 있습니다. 이 경우 한 줄에 모두 표시 될 수도 있습니다.


var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

JSON 객체를 문자열로 변환하면 데이터를 빠르게 전송하는 데 특히 유용 할 수 있습니다.


우리는 JSON의 일반적인 형식과 .json 파일 또는 JavaScript 내에서 객체 또는 문자열로 보는 방법에 대해 살펴 보았습니다.


JavaScript 객체와 비교 


JSON은 모든 프로그래밍 언어에서 사용하도록 개발되었으며 JavaScript 객체는 JavaScript 프로그래밍 언어를 통해서만 직접 작업 할 수 있습니다.


구문 측면에서 JavaScript 객체는 JSON과 유사하지만 JavaScript 객체의 키는 따옴표로 묶인 문자열이 아닙니다. 또한 JavaScript 객체는 값에 전달되는 유형 측면에서 덜 제한적이므로 함수를 값으로 사용할 수 있습니다.


현재 온라인 상태인 웹 사이트 사용자 Sammy Shark의 JavaScript 객체의 예를 살펴 보겠습니다.


var user = {
    first_name: "Sammy",
    last_name : "Shark",
    online    : true,
    full_name : function() {
       return this.first_name + " " + this.last_name;
    }
};

이것은 JSON 객체로서 매우 친숙하게 보이지만 키 (first_name, last_name, online 또는 full_name) 주위에는 따옴표가 없으며 마지막 줄에는 함수 값이 있습니다.


위의 JavaScript 객체의 데이터에 액세스하려면 점 표기법을 사용하여 user.first_name; 문자열을 가져 오지만 전체 이름에 액세스하려면 user.full_name(); 함수이기 때문입니다.


JavaScript 객체는 JavaScript 언어 내에서만 존재할 수 있으므로 다양한 언어로 액세스 해야 하는 데이터로 작업 할 때는 JSON을 선택하는 것이 가장 좋습니다.


JSON 데이터에 액세스 


JSON 데이터는 일반적으로 도트 표기법을 통해 Javascript로 액세스 됩니다. 이것이 어떻게 작동하는지 이해하기 위해 JSON 객체 sammy를 고려해 봅시다.


var sammy = { 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

값에 액세스하기 위해 다음과 같은 점 표기법을 사용합니다.


sammy.first_name
sammy.last_name
sammy.online

sammy 변수가 먼저 오고, 그 다음에 점이 오고, 액세스 할 키가 옵니다.


팝업에서 first_name 키와 연관된 값을 표시하는 JavaScript 경보를 작성하려면 JavaScript alert() 함수를 호출하여 수행 할 수 있습니다.


alert(sammy.first_name);
Output
Sammy

여기에서는 새미 JSON 객체에서 first_name 키와 관련된 값을 성공적으로 호출했습니다.


대괄호 구문을 사용하여 JSON의 데이터에 액세스 할 수도 있습니다. 그렇게 하기 위해, 우리는 대괄호 안에 큰 따옴표로 키를 유지합니다. 위의 새미 변수의 경우 alert() 함수에서 대괄호 구문을 사용하면 다음과 같습니다.

alert(sammy["online"]);
Output
true

중첩 배열 요소로 작업 할 때는 배열의 항목 번호를 호출해야 합니다. 아래의 JSON을 고려해 보겠습니다.


var user_profile = { 
  "username" : "SammyShark",
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

문자열 페이스 북에 액세스하기 위해 점 표기법의 맥락 내에서 배열의 해당 항목을 호출 할 수 있습니다.


alert(user_profile.social_media[1].description);
Output
facebook

중첩 된 요소마다 추가 점을 사용합니다.


점 표기법 또는 대괄호 구문을 사용하면 JSON 형식에 포함 된 데이터에 액세스 할 수 있습니다.


JSON 작업을 위한 함수 


이 섹션에서는 JSON을 문자열 화하고 구문 분석하는 두 가지 방법을 살펴 봅니다. JSON을 객체에서 문자열로 또는 그 반대로 변환 할 수 있으면 데이터를 전송하고 저장하는 데 유용합니다.


JSON.stringify() 


JSON.stringify() 함수는 객체를 JSON 문자열로 변환합니다.


문자열은 정보를 간단한 방식으로 저장하거나 전달하여 클라이언트에서 서버로 데이터를 전송하는 데 유용합니다. 예를 들어 클라이언트 쪽에서 사용자 설정을 수집 한 다음 서버로 보낼 수 있습니다. 나중에 JSON.parse() 메소드로 정보를 읽고 필요에 따라 데이터로 작업 할 수 있습니다.


변수 obj에 할당 한 JSON 객체를 살펴본 다음 obj를 함수에 전달하여 JSON.stringify()를 사용하여 변환합니다. 이 문자열을 변수 s에 할당 할 수 있습니다.


var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}

var s = JSON.stringify(obj)

이제 s로 작업하면 JSON이 객체가 아닌 문자열로 제공됩니다.


'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

JSON.stringify() 함수를 사용하면 객체를 문자열로 변환 할 수 있습니다. 그 반대의 경우 JSON.parse() 함수를 살펴 보겠습니다.


JSON.parse() 


문자열은 전송에 유용하지만 클라이언트 및 / 또는 서버 측의 JSON 객체로 다시 변환 할 수 있습니다. eval() 함수를 사용하여 텍스트를 객체로 변환 할 수 있지만 안전하지는 않으므로 JSON.parse() 함수를 대신 사용합니다.


위의 JSON.stringify() 섹션에서 예제를 변환하기 위해 문자열 s를 함수에 전달하고 새 변수에 할당합니다.


var o = JSON.parse(s)

그런 다음 o 객체를 사용하여 객체 obj와 동일하게 만듭니다.


더 자세히 살펴보기 위해 HTML 파일의 컨텍스트 내에서 JSON.parse()의 예를 고려해 보겠습니다.


<!DOCTYPE html>
<html>
<body>

<p id="user"></p>

<script>
var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

var obj = JSON.parse(s);

document.getElementById("user").innerHTML =
"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
"Location: " + obj.location;
</script>

</body>
</html>
Output
Name: Sammy Shark Location: Ocean

HTML 파일과 관련하여 점 표기법을 통해 JSON에 액세스하여 페이지의 최종 렌더링에서 검색 할 수 있는 객체로 JSON 문자열이 어떻게 변환되는지 확인할 수 있습니다.


JSON.parse()는 JSON 문자열을 구문 분석하고 객체로 변환하는 보안 함수입니다.


결론 


JSON은 JavaScript에서 사용할 수 있는 자연스러운 형식이며 널리 사용되는 많은 프로그래밍 언어에서 사용할 수 있는 많은 구현이 있습니다. 다른 프로그램 언어로 형식을 사용하려면 “JSON 소개” 사이트에서 전체 언어 지원을 볼 수 있습니다.


가볍고 프로그래밍 언어와 시스템간에 쉽게 전송되므로 JSON은 Twitter API를 포함하여 API에 대한 지원이 증가하고 있습니다.


자신의 .json 파일을 만들지 않고 다른 소스에서 조달 할 수 있습니다. 이러한 자료를 확인하여 다른 데이터 구조를 JSON으로 변환하는 방법을 배울 수 있습니다.



페이지 정보

조회 139회 ]  작성일19-10-28 11:57

웹학교