JSON) 개념부터 변환까지 이해하기

1. JSON이란?

: JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하는 데 사용되는 경량 데이터 형식

: 주로 웹 애플리케이션에서 서버와 클라이언트 간의 데이터 교환을 위해 사용

JSON 특징

- key-value 형식으로 데이터를 저장 (JavaScript 객체와 유사)

- 문자열(" "), 숫자, 불리언(true, false), 배열([ ]), 객체({ })를 지원

- 가독성이 좋고, 데이터 구조가 단순하여 사용하기 편리함

- 언어에 독립적이며 대부분의 프로그래밍 언어에서 지원

---

2. JSON과 배열 비교

배열 방식

let array = ["홍길동", 24, 172.1];
console.log(array[0]);  // 홍길동
console.log(array[1]);  // 24
console.log(array[2]);  // 172.1

문제점: 배열은 값만 저장할 뿐, 각 값이 무엇을 의미하는지 직관적으로 알긴 어렵다.

JSON 방식 (단일 데이터)

let json = { "name": "홍길동", "age": 24, "height": 172.1 };
console.log(json.name);   // 홍길동
console.log(json.age);    // 24
console.log(json.height); // 172.1

장점: 데이터의 의미를 명확히 구분할 수 있습니다.

---

3. 다수의 데이터 표현 (JSON 배열)

let studentJson = [
    { "name": "홍길동", "age": 24, "address": "서울시" },
    { "name": "성춘향", "age": 15, "address": "남원시" },
    { "name": "일지매", "age": 22, "address": "부산시" }
];

console.log(studentJson[0].name);  // 홍길동
console.log(studentJson[1].age);   // 15
console.log(studentJson[2].address); // 부산시

document.getElementById("demo").innerHTML = studentJson[1].name;
document.getElementById("demo").innerHTML = studentJson[2].age;

장점: 여러 개의 객체를 하나의 배열로 관리할 수 있습니다.

---

4. JSON 데이터 변환

문자열 → JSON 객체 변환 (JSON.parse)

let text = '{ "name": "정수동", "age": 26, "address": "춘천시" }';
let jsonObj = JSON.parse(text); 

console.log(jsonObj.name);   // 정수동
console.log(jsonObj.age);    // 26
console.log(jsonObj.address); // 춘천시

설명: 서버에서 문자열 형태(JSON String)로 데이터를 받아올 경우, JSON.parse()를 이용해 JSON 객체로 변환

JSON 객체 → 문자열 변환 (JSON.stringify)

let jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);  
// {"name":"정수동","age":26,"address":"춘천시"}

설명: JSON 데이터를 다시 문자열로 변환할 때 사용합니다.
사용 예시: 데이터를 로컬 스토리지에 저장하거나, 서버에 전송할 때 필요합니다.

---

개선한 사항

1. document.getElementById("demo").innerHTML을 여러 번 사용하면 마지막 값만 남습니다.
    → 하나의 문자열로 합쳐서 출력하는 방식으로 변경

2. console.log() 활용하여 브라우저 콘솔에서 결과 확인

let studentJson = [
    { "name": "홍길동", "age": 24, "address": "서울시" },
    { "name": "성춘향", "age": 15, "address": "남원시" },
    { "name": "일지매", "age": 22, "address": "부산시" }
];

// JSON 데이터를 HTML에 표시
let output = `
    1번째 학생 이름: ${studentJson[0].name} <br>
    2번째 학생 나이: ${studentJson[1].age} <br>
    3번째 학생 주소: ${studentJson[2].address} <br>
`;
document.getElementById("demo").innerHTML = output;

// 문자열 → JSON 변환
let text = '{ "name": "정수동", "age": 26, "address": "춘천시" }';
let jsonObj = JSON.parse(text);

// JSON 데이터를 HTML에 추가 표시
document.getElementById("demo").innerHTML += `
    <br> 변환된 JSON 데이터: <br>
    이름: ${jsonObj.name} <br>
    나이: ${jsonObj.age} <br>
    주소: ${jsonObj.address} <br>
`;

// JSON 객체 → 문자열 변환
let jsonStr = JSON.stringify(jsonObj);
console.log("JSON 문자열:", jsonStr);

개선된 부분:

: 여러 innerHTML 호출을 하나로 합침

: +=을 이용해 기존 내용에 추가하여 정보가 사라지지 않도록 처리

: console.log()로 디버깅 활용