JSON 구조

JSON 은JavaScript Object Notation의 약자입니다. JSON은 Javascript 데이터의 구조를 쉽게 표현하기 위한 문자 기반의 표준 포맷입니다. JSON은 다양한 형태의 데이터를 일관된 규격에 맞게 정리하기 쉬우며, 이러한 데이터를 묶어서 저장하거나 전송하기 편리하기 때문에 JavaScript 의 핵심 데이터 구조로 활용되고 있습니다.

API Drag 의 메모리 구조는 JSON의 구조로 운영이 되기 때문에, 아래 설명을 잘 읽고 이해해 주세요.

Map

JSON 구조에서 가장 중요한 개념입니다.

Map을 간단히 설명드리자면 출석부와 같습니다. 선생님이 출석부에서 여러분의 이름을 호명하면, 여러분은 자동으로 "네!" 하고 대답을 할 것입니다. Map 데이터구조에도 이름표가 있어서 호출만 하면 자동으로 이름표에 연결되어 있는 데이터가 튀어나옵니다.

아래 Map 예제를 보겠습니다.

let product = {
    "color":"red",
    "width":200,
    "height":150,
    "price":35000,
    "model":"mod-0001",
};

위에서 보시는 것과 같이 product 라는 변수에서 원하는 이름표 즉, color 를 호출하면 "red" 라는 값이 즉시 튀어나오게 되어 있습니다. 여기에서 color 는 Key 가 되고 red 는 Value가 됩니다. 이러한 Key와 Value 가 한 쌍을 이룬 데이터 구조를 Map 이라고 합니다.

Array

JSON은 Map 구조로 부터 시작을 하지만 그 내부에 Array 가 포함될 수 있으며, 자주 활용되기 때문에 같이 설명을 드리겠습니다.

Array는 순서대로 데이터가 나열되어 묶인 구조입니다. 그리고 데이터를 꺼내오기 위해서는 데이터가 위치한 Index를 활용합니다. Map이 이름표를 이용해서 호출했다면 Array는 번호를 호출하는 방식으로 이해하시면 쉬울 것 같습니다.

코딩에서 문법적으로 Array는 아래와 같이 사용합니다.

let productList = [
    "prod-0001",
    "prod-0002",
    "prod-0003",
    "prod-0004",
    "prod-0005"
];

위 예제를 보시면 문자열 값의 연속이라는 것을 아실 수 있습니다. 이러한 데이터 구조에서 "prod-0003" 을 찾기 위해서는 productList[2] 로 값을 꺼내올 수 있습니다. 하지만 우리가 목록 내부에 어떤 값이 들어있는지 알 수 없기 때문에, 반복문을 이용해서 Index 0번 부터 마지막 Index 까지 반복 확인하는 작업을 통해 원하는 값이 들어있는 Index를 확인해야 합니다.

"prod-0003"을 찾는 코드를 한번 보시겠습니다.

for(let i=0; i<productList.length; i++){
    if(productList[i] == "prod-0003"){
        console.log("Find prod-0003");
        break; //원하는 값을 찾았으니 반복문 블록 밖으로 이동.
    }
}

복합 데이터 구조

JSON은 처음 시작을 Map으로 하지만 그 내부에 담을 수 있는 값은 다양합니다.

Map의 Key는 문자열이어야 하지만 Value에 해당하는 부분은 string, number, boolean, Map, Array 등 다양한 데이터가 위치할 수 있습니다.

아래 JSON의 다양한 구조를 보겠습니다.

let products = {
    "pencil":{
        "model-1":{
            "color":"red",
            "price":2000,
            "stocks":[
                {"serial":"a-001", "stock-date":"2023.04.01"},
                {"serial":"a-002", "stock-date":"2023.04.01"},
                {"serial":"a-003", "stock-date":"2023.04.01"}
            ]
        },
        "model-2":{
            "color":"orange",
            "price":2300,
            "stocks":[
                {"serial":"bc-001", "stock-date":"2023.03.10"},
                {"serial":"bc-002", "stock-date":"2023.03.10"},
                {"serial":"bc-003", "stock-date":"2023.03.10"}
            ]
        }
    },
    "remover":{
    ...
    },
    "note":{
    ...
    }
}

위 예제를 보시면 Map 안에 Array가 위치하고, Array 안에 Map이 위치하는 복잡한 구조를 하고 있습니다.

하지만 이런 복잡한 구조를 가장 잘 표현하고 쉽게 사용할 수 있도록 하는 것이 JSON 입니다.

JSON 데이터 활용하기

이번에는 JSON 데이터를 이용하여 값을 꺼내오고 변경하는 방법을 알아보겠습니다.

Map 구조 활용하기

Map 구조는 키와 값의 쌍으로 구성된다고 설명하였습니다. 위 예제코드에서 products 를 활용해서 값을 가져오고 새로운 값을 넣는 방법을 알아보겠습니다.

let products = ...

console.log(products.pencil.model-1.color); // red 로 출력됨

products.pencil.model-1.color = "yellow"; // color를 yellow 로 바꿈

console.log(products.pencil.model-1.color); // yellow 로 출력됨

products.pencil.model-1.length = 20; // 길이 라는 새로운 Map을 추가함

console.log(products.pencil.model-1.length); // 20 이 출력됨

Array 구조 활용하기

이번에는 어떻게 Array 에 값을 넣고 빼는지 알아보겠습니다.

let products = ...

console.log(products.pencil.model-2.stocks[0].stock-date); // 2023.04.01 가 출력됨

products.pencil.model-2.stocks[0].stock-date = "2023.01.15" // stock-date 를 변경

console.log(products.pencil.model-2.stocks[0].stock-date); // 2023.01.15 가 출력됨

products.pencil.model-2.stocks.push({"serial":"a-004", "stock-date":"2023.04.05"});
//새롭게 Array가 추가됨

console.log(products.pencil.model-2.stocks[3].stock-date); // 2023.04.05 가 출력됨