개요

웹 개발에서 서버와 데이터를 주고받을 때 가장 흔한 포맷이 JSON이고, 프론트엔드에서는 이를 “객체로 변환(파싱)”해서 화면에 뿌리거나, 반대로 “객체를 JSON 문자열로 변환(직렬화)”해서 서버에 전송한다.
이번 실습은 아래 3단계를 목표로 한다.

• JSON 문자열을 객체로 변환하기: JSON.parse()
• JS 객체를 JSON 문자열로 만들기: JSON.stringify()
• 변환된 데이터를 DOM에 반영하기(동적 렌더링)

• https://jiyean99.github.io/HTML-CSS-Javascript/13.js_json.html
• 실습 시트 전체 : https://jiyean99.github.io/HTML-CSS-Javascript/

---

JSON 파싱/직렬화 기본

파싱: JSON → 객체 (JSON.parse())

JSON.parse()는 JSON 문자열을 JS 객체로 바꾼다.
보통 GET 요청으로 받은 응답이 JSON 문자열이라고 생각하면 된다.

실습 함수:

const parsing1 = () => {
  const jsonData = '{"id":0, "name": "홍길동", "email": "hong@nvaer.com"}';
  const obj1 = JSON.parse(jsonData);
  console.log(obj1);
}

버튼을 누르면 콘솔에 {id: 0, name: "...", email: "..."} 형태의 객체가 출력된다.

직렬화: 객체 → JSON (JSON.stringify())

JSON.stringify()는 객체를 JSON 문자열로 바꾼다.
보통 POST/PUT 요청에서 body에 JSON을 담아 보낼 때 많이 사용한다.

실습 함수:

const stringify = () => {
  const obj1 = { id: 1, name: "홍길동", email: "hong@naver.com" };
  const jsonData = JSON.stringify(obj1);

  console.log(obj1);
  console.log(typeof obj1);     // object
  console.log(jsonData);
  console.log(typeof jsonData); // string
}

여기서 핵심은,

• obj1은 object
• jsonData는 string
  이라는 점을 typeof로 확실히 확인하는 것이다.

---

HTML 요소 동적 세팅(리스트 추가)

DOM을 동적으로 바꾸는 방식은 크게 2가지로 자주 비교한다.

방법 1) innerHTML로 문자열 누적

간단하지만 문자열 조립이 많아지면 실수하기 쉽고, 기존 DOM을 다시 파싱하게 될 수 있다.

// target.innerHTML += '<li>추가된 리스트</li>';

방법 2) createElement + appendChild

조금 더 코드가 길어지지만, 구조적으로 안전하고 확장성이 좋다.

실습에서는 방법 2를 사용:

const addElem = () => {
  const target = document.getElementById("target");

  const liElem = document.createElement('li');
  liElem.textContent = "추가된 리스트";
  target.appendChild(liElem);
}

버튼 클릭할 때마다 <ul id="target"> 안에 항목이 계속 추가된다.

---

단일 JSON 데이터 → 테이블 세팅

“객체 1개”를 파싱해서 테이블 한 줄에 꽂는 방식이다.

실습 함수:

const parsing2 = () => {
  const jsonData = '{"id":0, "name": "홍길동", "email": "hong@nvaer.com"}';
  const obj1 = JSON.parse(jsonData);

  document.getElementById("id").innerHTML = obj1.id;
  document.getElementById("name").innerHTML = obj1.name;
  document.getElementById("email").innerHTML = obj1.email;
}

포인트:

• JSON → 객체로 만든 뒤
• 객체의 필드를 DOM 요소(id/name/email)에 직접 주입한다.

---

n개 JSON 데이터 → 테이블 세팅(반복 렌더링)

이번 예제의 하이라이트는 “객체 배열(JSON 배열)”을 파싱해서 테이블의 <tbody>를 동적으로 채우는 파트다.

1) JSON 배열 준비: [{},{},...]

const jsonData = '[{"id":0, "name": "홍길동1", "email": "hong1@nvaer.com"}, ... ]';

2) 파싱 후 반복 처리

const users = JSON.parse(jsonData);

3) tbody 초기화 후 row를 생성해서 append

const tbodyId = document.getElementById("tbodyId");
tbodyId.innerHTML = ""; // 초기화

users.forEach(user => {
  const row = document.createElement('tr');

  const idCell = document.createElement('td');
  idCell.textContent = user.id;
  row.appendChild(idCell);

  const nameCell = document.createElement('td');
  nameCell.textContent = user.name;
  row.appendChild(nameCell);

  const emailCell = document.createElement('td');
  emailCell.textContent = user.email;
  row.appendChild(emailCell);

  tbodyId.append(row);
});

포인트:

• tbodyId.innerHTML = ""로 이전 렌더링을 지우지 않으면 버튼을 여러 번 눌렀을 때 행이 계속 누적된다.
• 문자열로 <tr>...</tr>을 만드는 것보다 createElement 방식은 DOM 구조가 명확해서 실습 단계에서 특히 좋다.