웹 개발자가 알아야 할 Notation

JSON - 자바스크립트 객체 표기법

소개

JSON, JavaScript Object Notation, 인터넷을 통해 데이터를 저장하고 검색하기 위한 경량 형식이며 API에서 데이터를 검색하는 데 가장 자주 사용됩니다. 오늘은 API에서 보내거나 검색하려는 JSON 데이터를 만들고 읽는 방법을 살펴보겠습니다.

시작하기

JSON을 어떻게 작성합니까?

JSON은 배열 또는 객체로 나타낼 수 있습니다. 다음은 JSON 개체의 예입니다.

{
    "f_Name":"john",
    "l_Name":"Doe",
    "age":24,
    "school":"UofT"
}

위의 JSON 개체는 다음 네 가지 속성이 있는 개체를 정의합니다.

이름

성

나이

학교명

JSON 개체가 JavaScript 개체와 동일하다는 주장을 할 수 있지만 이는 잘못된 것입니다. 유사점을 공유하지만 차이점도 있습니다.

We can say that a JSON object is very similar JavaScript object. The exception is that the keys for a JSON object must be a string that is enclosed with quotation marks.

JSON 파일 생성

파일 이름 끝에 .json 파일 확장자를 추가하여 JSON 파일을 만듭니다.

문자열, 숫자, 부울 등 우리가 이 JSON 파일에 넣는 핵심은 유효한 JSON이지만 데이터 한 조각을 저장하기 위해 전체 파일을 만들고 싶지는 않습니다. JSON 파일에 여러 데이터 항목을 저장하고 싶을 가능성이 높으며 다음 두 가지 방법 중 하나로 이를 수행할 수 있습니다.

여러 항목을 저장하는 배열을 만듭니다

.

객체 생성

JSON의 모양

때때로 "JSON의 모양을 가져와야 합니다"와 같은 용어를 듣게 될 것입니다. 이것은 실제 JSON 파일이 구조/구성되는 방식을 나타냅니다. API를 호출하면 거의 항상 해당 키의 값이 API 설계 방식에 따라 달라지는 data 개체가 표시됩니다.

대부분의 경우 하나의 키 값 쌍(키는 Data이고 값은 객체의 배열)이 있는 개체 형식의 JSON 데이터를 볼 수 있습니다. 다음과 같이 보입니다.

{
    "data":[
        {
            Name:"bob"
            Age:34,
        },
        {
            Name:"Smith"
            Age:32,
        },
        {
            Name:"Jane"
            Age:14,
        },
        {
            Name:"Julia"
            Age:24,
        },
    ]
}

데이터 값은 각 객체가 본질적으로 name 및 age 속성을 가진 사람인 객체 배열로 표현됩니다. 이와 같이 데이터를 저장하면 단일 개체의 여러 인스턴스를 저장할 수 있습니다.

웹사이트에 있는 모든 사용자의 모든 사용자 이름을 웹사이트에 표시하려는 경우 API는 배열의 각 개체가 특정 사용자인 위와 같은 구조를 반환할 가능성이 높습니다. . 이 개체에는 userName, email, Full Name 등과 같은 속성이 있을 수 있습니다. API에서 반환된 이 userObject는 다음과 같습니다.

{
    "userData":[
        {
            fullName:"Bob Ross"
            email:"[email protected]",
            userName:"bob21"
        },
        {
            fullName:"Jane Doe"
            email:"[email protected]",
            userName:"JaneDoe11"
        },
        {
            fullName:"Stephanie"
            email:"[email protected]",
            userName:"Stephanie--OK"
        },
        {
            fullName:"Julia"
            email:"[email protected]",
            userName:"Julia__Apple"
        },
    ]
}

JSON 메서드

데이터 검색

JSON의 일반적인 용도는 웹 API에서 데이터를 전송/검색하는 것이며 때로는 JSON 데이터가 문자열 형식으로 전송됩니다. 위의 사용자 예를 사용하면 API를 호출한 후 다음을 볼 수 있습니다.

`
{
    "userData":[
        {
            fullName:"Bob Ross"
            email:"[email protected]",
            userName:"bob21"
        },
        {
            fullName:"Jane Doe"
            email:"[email protected]",
            userName:"JaneDoe11"
        },
        {
            fullName:"Stephanie"
            email:"[email protected]",
            userName:"Stephanie--OK"
        },
        {
            fullName:"Julia"
            email:"[email protected]",
            userName:"Julia__Apple"
        },
    ]
}`

데이터를 문자열로 나타내면 JavaScript에서 여전히 사용할 수 있지만 유용한 정보를 얻으려면 문자열 조작을 사용하여 정보를 검색해야 합니다. 시간이 오래 걸리고 우리는 그렇게 하고 싶지 않습니다! 이것이 객체라는 것을 알고 있으므로 데이터에 대해 parse 메서드를 호출하여 JavaScript 객체로 변환할 수 있습니다.

다음과 같이 보입니다.

const res = `{
    "userData":[
        {
            fullName:"Bob Ross"
            email:"[email protected]",
            userName:"bob21"
        },
        {
            fullName:"Jane Doe"
            email:"[email protected]",
            userName:"JaneDoe11"
        },
        {
            fullName:"Stephanie"
            email:"[email protected]",
            userName:"Stephanie--OK"
        },
        {
            fullName:"Julia"
            email:"[email protected]",
            userName:"Julia__Apple"
        },
    ]
}`;

const resJSObj = JSON.parse(res);

여기서 우리는 변수resJSObj 안에 자바스크립트 객체를 저장하고 있으며, 이를 사용하여 원하는 대로 할 수 있습니다.

API로 데이터 보내기

데이터를 API로 보내려면 먼저 데이터를 문자열로 변환해야 합니다. 이것은 .stringify() 메서드를 호출한 다음 개체를 전달하여 수행할 수 있습니다. 다음과 같이 보세요.

const sendObj = JSON.stringify(resJSObj);

이제 문자열에 있으므로 API로 보낼 수 있습니다.

Turning your JSON data into a string can also be used for storage purposes. You can save data retrieved from an API in local/session storage. Not advisable but say you wanted to store your users information in local/session storage to keep track of authentication state or user preferences -- you would get the data back from the API, convert it into a string and then store it in local/session storage.

당신을 위한 질문

이제 이 작업이 완료되었으므로 JSON 형식을 사용하여 API에서 정보를 전송/검색할 수 있습니다.
이제 이 사실을 알고 나면 다음 질문이 있습니다. JSON을 구현하는 다른 방법은 무엇입니까?