JSON은 JavaScript Object Notation의 약자입니다. 키/값 쌍으로 데이터를 구성하는 JavaScript 개체입니다. 이러한 방식으로 데이터를 저장하면 이러한 개체가 가볍고 언어에 독립적입니다. 이것은 JSON이 대부분의 프로그래밍 언어에서 읽을 수 있음을 의미합니다.
JSON은 가볍고 사람과 기계가 쉽게 읽을 수 있기 때문에 일반적으로 서버에서 클라이언트 측으로 데이터를 검색하는 데 사용됩니다. API를 사용하는 세상에서 JSON은 서버에서 사용자에게 원하는 데이터만 추출할 만큼 충분히 유연합니다.
JSON 사용
JSON을 사용하면 서버에서 앱의 프런트 엔드로 전달된 데이터를 쉽게 저장할 수 있습니다. 대부분의 프로그래밍 언어에는 데이터를 즉시 JSON으로 변환하는 메서드가 있습니다. JavaScript 가져오기 요청에서 서버에서 전달된 데이터 응답은 json()을 호출하여 JSON으로 변환됩니다. 요청에 대한 방법. 여기에서 가져오기 요청에 대해 자세히 알아보세요.
어쨌든 응답을 JSON으로 변환하려는 이유는 무엇입니까? 응답은 장황하고 우리 인간에게는 해독하기 어렵습니다. 응답을 JSON으로 변환하여 데이터를 읽기 쉬운 키/값 쌍으로 구성합니다. 이렇게 하면 응답 데이터로 작업을 수행하기 위해 작성한 코드를 통해 데이터에 더 쉽게 액세스할 수 있습니다.
JSON 예제
먼저 JSON으로 변환된 응답이 어떻게 생겼는지 살펴보겠습니다. 아래 예에서 현재 우주에 얼마나 많은 우주 비행사가 있는지 알려주는 가져오기 요청을 API로 보내고 있습니다.
fetch('https://api.open-notify.org/astros.json').then(response => response.json()).then(data => console.log(data))
목적을 위해 콘솔에 JSON으로 변환한 응답을 기록합니다.
{ "message":"success", "number":7, "people":[ { "craft":"ISS", "name":"Sergey Ryzhikov" }, { "craft":"ISS" , "이름":"Kate Rubins" }, { "craft":"ISS", "name":"Sergey Kud-Sverchkov" }, { "craft":"ISS", "name":"Mike Hopkins" } , { "craft":"ISS", "name":"Victor Glover" }, { "craft":"ISS", "name":"Shannon Walker" }, { "craft":"ISS", "이름 ":"노구치 소이치" } ]}
이 객체 안에 "message", "number", "people"의 키가 있음을 알 수 있습니다. 메시지 키는 "성공"의 값을 가리킵니다. 이것은 우리의 요청 상태를 알려주는 좋은 메시지입니다.
다음으로 숫자 키가 값 7을 가리킵니다. 이것은 우주에 있는 총 사람 수입니다. 마지막으로 "사람" 키에 도달합니다. 이 키의 값은 배열입니다. 이 배열 내부에는 "craft" 및 "name" 키가 있는 더 많은 개체가 있습니다. 이 키에 대한 우리의 가치는 우주선과 탑승한 우주 비행사의 이름입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
JSON은 여러 번 중첩될 수 있습니다. 가져오기 요청의 이 단계에서 응답이 JSON으로 변환되었으며 이제 다음 단계는 해당 데이터로 작업을 수행하는 것입니다. 여기에서 이 데이터를 사용하여 각 우주 비행사에 대한 카드 행을 채울 수 있습니다. 데이터로 수행할 작업은 앱이 달성하기를 원하는 작업에 따라 결정됩니다.
결론
요약하자면, JSON이 데이터를 저장하는 데 사용되는 객체라는 것을 배웠습니다. 일반적으로 해당 데이터는 가져오기 요청의 응답으로 서버에서 가져옵니다. 우리는 또한 JavaScript가 json() 응답을 JSON으로 변환하는 메소드.
애플리케이션의 프런트 엔드가 서버의 데이터를 사용하려면 JSON 형식이어야 합니다. 응답을 JSON으로 변환한 후에는 해당 데이터를 중심으로 원하는 모든 것을 자유롭게 구축할 수 있습니다. json()으로 더 이동하려면 가져오기 요청의 방법은 이 가이드를 참조하세요.