[JSON] JSON과 직렬화, 파싱, 데이터 유형

JSON

JavaScript Object Notation의 약어로, 데이터 구조와 실제 데이터를 다른 언어 및 플랫폼에서 해석 가능한 형식으로 전송할 수 있게 하는 데이터 교환 포맷입니다.

JSON이 개발자들 사이에서 인기를 얻게 된 이유는 인간이 읽을 수 있는 간결한 구문으로 이루어졌기 때문입니다. 또한 코딩도 더 적게 필요하고, 처리 속도가 빠른, 경량 언어입니다.

---

JSON 구조

JSON 데이터는 이름-값 쌍의 집합으로 구성됩니다. 각 이름-값 쌍은 콜론(:)으로 구분되며, 각 쌍은 쉼표(,)로 구분됩니다. 데이터 객체는 중괄호({})로 묶이고, 데이터 배열은 대괄호([])로 묶입니다.

{
    "이름": "제이슨",
    "나이": 30,
    "사용자": true,
    "취미": ["프로그래밍", "여행"]
}

 

---

Axios를 사용하여 JSON을 서버에 보내기

1. JSON 직접 작성하여 전송

axios.post("/main37/sub1", '{"name":"jones"}', {  
        headers: {  
            "content-type": "application/json"  
        }  
    })

• 위 예제에서는 config를 지정하였습니다.
• 헤더에 content-type을 명시하여 데이터의 형식이 JSON임을 서버에 알립니다.

 

2. 객체를 사용하여 전송

axios.post("/main37/sub1", {name: "jones"})

• 위 예제에서는 config를 따로 지정하지 않았습니다.
• Axios는 자동으로 content-type을 "application/json"으로 설정하고, 객체를 JSON 문자열로 변환하여 서버에 보냅니다.

---

직렬화(serialize)

• 직렬화는 JavaScript나 Java와 같은 프로그래밍 언어의 객체를 JSON 형식의 텍스트로 변환하는 과정입니다.
• 직렬화는 객체의 데이터를 문자열로 변환하여 다른 시스템 또는 플랫폼 간에 데이터를 교환하는 데 사용됩니다.
• axios를 사용하여 JSON 데이터를 서버로 보내는 예시입니다.

// JSON 형식으로 직렬화한 데이터
const jsonData = {
  name: "Lee",
  age: 33,
  score: 8.9,
};

// axios를 사용하여 JSON 데이터 전송
axios.post("/main37/sub1", jsonData, {
  headers: {
    "Content-Type": "application/json",
  // 다른 헤더 설정 가능
  },
});

• axios.post() 메서드를 사용하여 JSON 데이터를 서버로 보내고, 요청 헤더에 JSON 데이터임을 명시했습니다.

 

파싱 (parse, 역직렬화/deserialization)

• 파싱은 JSON 형식의 텍스트를 JavaScript나 Java와 같은 프로그래밍 언어의 객체로 변환하는 과정입니다.
• 파싱은 JSON 문자열에서 데이터를 추출하여 다른 시스템에서 사용할 수 있는 형식으로 변환하는 데 사용됩니다.

// axios를 사용하여 JSON 데이터 수신
axios.get("/main37/sub1")
  .then((response) => {
    // JSON 데이터 파싱
    const receivedData = JSON.parse(response.data);
    // 파싱된 데이터 활용
    console.log("Received Data:", receivedData);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

• axios.get()을 사용하여 /main37/sub1 엔드포인트에서 JSON 데이터를 수신하고, .then() 블록에서 JSON 데이터를 파싱 하여 사용할 수 있도록 했습니다.

---

JSON 데이터 유형

• JSON은 아래와 같이 다양한 데이터 유형을 표현할 수 있습니다.
• 문자열은 쌍 따옴표(")로 둘러싸여 있습니다.
• 객체는 중괄호 {}로 둘러싸인 키-값 쌍의 집합입니다.
• 배열은 대괄호 []로 둘러싸인 항목의 목록입니다.

axios.post("/main37/sub4", {  
    // 1. 문자열(String)
    city: "paris",
    // 2. 숫자(Number)
    age: 30,
    // 3. 불리언(Boolean)
    married: true,
    // 4. Null  
    car: null,
    // 5. 객체(Object)  
    home: {  
        address: "seoul",  
        price: 1000  
        },
    // 6. 배열(Array)
    foods: [  
        "pizza",  
        "burger",  
        "부침개"  
        ]  
    })

 

Reference

https://www.oracle.com/kr/database/what-is-json/