https://codepen.io/gaearon/pen/LzWZvb
JSON API는 아래와 같은 데이터를 반환합니다.
[
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];
JavaScript Object Notation (JSON)
Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷
웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용
JSON 데이터는 이름과 값의 쌍으로 이루어짐
"name": "식빵"
JSON 데이터는 쉼표(,)로 나열
객체(object)는 중괄호({})로 둘러쌓아 표현
{
"name": "식빵",
"family": "웰시코기",
"age": 1,
"weight": 2.14
}
배열(array)은 대괄호([])로 둘러쌓아 표현
"dog": [
{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14},
{"name": "콩콩", "family": "포메라니안", "age": 3, "weight": 2.5},
{"name": "젤리", "family": "푸들", "age": 7, "weight": 3.1}
]
JSON으로 작업하기 - Web 개발 학습하기 | MDN
우리가 할 첫 번째 일은 모든 컴포넌트(와 하위 컴포넌트)의 주변에 박스를 그리고 그 각각에 이름을 붙이는 것입니다.