[JavaScript] JSON 알아보기

 

JSON(JavaScript Object Notation)이란?

• 경량의 데이터 교환 형식이다.
• 텍스트 기반의 형식으로, 인터넷에서 데이터를 주고받을 때 많이 사용된다.
• JSON은 JavaScript에서 객체를 만들 때 사용하는 문법을 기반으로 만들어졌다.

👉🏼 즉, 자바스크립트 객체 문법에 토대를 둔 문자 기반의 데이터 교환 형식이다.

 

 

 

---

JSON 구조

{
  "name": "Alice",
  "age": 25,
  "isStudent": true,
  "courses": ["Math", "Science", "History"],
  "address": {
    "city": "New York",
    "state": "NY"
  }
}

 

• 일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. (key-value 쌍의 집합)
• 자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다.
• 다만 자바스크립트 객체 형태와 완전히 같지는 않다. 또한 작은 따옴표 ('') 가 아닌 끝 따옴표 ("") 만 허용된다.
• 마지막 요소에 , 를 넣으면 객체가 깨질 수 있기 때문에 유의해야 한다.

 

 

 

---

메서드

• JSON → 문자열 형태 → 서버-클라이언트 간 데이터 전송 시 사용한다.
• 하지만, 다음의 두 경우를 위해 파싱(parsing) 과정이 필요하다.
  　👉🏼 JS 객체를 JSON 형태로 전송
  　👉🏼 JSON 형태를 JS 객체 형태로 사용

 

 

 

stringify()

• 자바스크립트 객체를 JSON 문자열로 변환한다.
• 네트워크를 통해 객체를 JSON 문자열로 변환할 때 주로 사용한다.

 

const person = {
    name: "Alice",
    age: 25,
    isStudent: true,
    courses: ["Math", "Science", "History"],
    address: {
      city: "New York",
      state: "NY"
    }
  };

  const jsonString = JSON.stringify(person);
  console.log(jsonString);
  // 출력 결과: {"name":"Alice","age":25,"isStudent":true,"courses":["Math","Science","History"],"address":{"city":"New York","state":"NY"}}

 

 

 

parse()

• JSON 문자열을 자바스크립트 객체로 변환한다.
• 네트워크 통신의 결과를 통해 받아온 JSON 문자열을 프로그램 내부에서 사용하기 위해 JS 객체로 변환할 때 사용한다.

 

const jsonString = '{"name":"Alice","age":25,"isStudent":true,"courses":["Math","Science","History"],"address":{"city":"New York","state":"NY"}}';

const person = JSON.parse(jsonString);
console.log(person);
  // 출력 결과: { name: 'Alice', age: 25, isStudent: true, courses: [ 'Math', 'Science', 'History' ], address: { city: 'New York', state: 'NY' } }

 

 

 

JSON 문자열이란?

• 데이터를 교환하기 위한 표준 형식 중 하나로, 텍스트 기반 형식의 데이터 교환 방식이다.
• 서버에서 데이터를 전송할 때 JSON 형식으로 이루어진 문자열을 사용하면 다양한 언어 및 플랫폼에서 호환성이 좋아지며, 서로 다른 시스템 간의 데이터 교환을 보다 간편하게 할 수 있다.

 

 

 

❓ 서버에서 데이터를 받을 때 JSON 형식으로 이루어진 문자열만 읽을 수 있는지?

💡 서버와 클라이언트 간 데이터 교환을 위해 일반적으로 사용되는 데이터 형식 중 하나일 뿐, 개발자나 기술 스택에 따라 선택은 다를 수 있다.

💡 서버와 클라이언트 모두에서 JSON 형식을 처리할 수 있는 라이브러리나 모듈을 사용해 데이터를 변환하고 처리할 수 있다.

 

 

 

---

JSONPlaceholder

 

• 가짜 서버! (=mock API Server)
• 아래의 API를 통해 JSON 기반 DB 통신을 진행할 수 있다.

 

 

 

❓ [chatGPT에 질문] mock API Server는 데이터 통신 학습을 위한 건지 아니면 실제 서비스에서도 사용하는지?

💡 주로 데이터 통신 학습을 위해 사용되지만 실제 서비스에서도 가끔 사용하긴 한다.
💡 개발자가 프로토타입을 만들거나 기능 구현 전 API 응답을 테스트할 때 사용한다.
💡 또한 다양한 상황에서의 데이터 요청 및 응답 시뮬레이션에도 사용한다.

fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
    .then((json) => console.log(json));​

 

 

 

---

[참고 자료]

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON

JSON으로 작업하기 - Web 개발 학습하기 | MDN

http://www.tcpschool.com/json/json_basic_structure

코딩교육 티씨피스쿨