웹사이트 검색

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

소개

JSON은 JavaScript 프로그래밍 언어에서 파생되었기 때문에 JavaScript에서 데이터 형식으로 사용하는 것은 자연스러운 선택입니다. JavaScript Object Notation의 줄임말인 JSON은 일반적으로 \Jason이라는 이름처럼 발음됩니다.

일반 용어로 JSON에 대해 자세히 알아보려면 "JSON 소개\ 자습서를 읽어보세요.

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

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

이 자습서에서는 JavaScript에서 JSON을 사용하는 방법을 소개합니다. 이 소개를 최대한 활용하려면 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 
}

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

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

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

JSON의 일반적인 형식과 이를 .json 파일로 보거나 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

여기에서 sammy JSON 개체의 first_name 키와 연결된 값을 성공적으로 호출했습니다.

대괄호 구문을 사용하여 JSON에서 데이터에 액세스할 수도 있습니다. 이를 위해 키를 대괄호 안에 큰따옴표로 묶습니다. 위의 sammy 변수의 경우 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"
    }
  ]
}

문자열 facebook에 액세스하려면 점 표기법 컨텍스트 내에서 배열의 해당 항목을 호출할 수 있습니다.

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

Output
facebook

중첩된 각 요소에 대해 추가 점을 사용합니다.

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

JSON 작업을 위한 함수

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

JSON.문자열화()

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.구문 분석()

문자열은 전송에 유용하지만 클라이언트 및/또는 서버 측에서 JSON 객체로 다시 변환할 수 있기를 원할 것입니다. JSON.parse() 함수를 사용하여 이를 수행할 수 있습니다.

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

var o = JSON.parse(s)

그런 다음 obj 개체와 동일한 o 개체를 작업하게 됩니다.

자세히 살펴보기 위해 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 문자열 s가 점 표기법을 통해 JSON에 액세스하여 페이지의 최종 렌더링에서 검색할 수 있는 개체로 어떻게 변환되는지 확인할 수 있습니다.

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

결론

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

JSON은 가볍고 프로그래밍 언어와 시스템 간에 쉽게 전송되기 때문에 Twitter API를 비롯한 API에서 JSON 지원이 증가했습니다.

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