JSON

✨ React.js, 스프링 부트, AWS로 배우는 웹 개발 101

---

🔅 01. 개발을 시작하기 전에

---

🔅 1.2 배경 지식

1.2.1 하이퍼텍스트 트랜스퍼 프로토콜
✔1.2.2 자바스크립트 오브젝트 노테이션
1.2.3 서버란?
1.2.4 정적 웹 서버
1.2.5 동적 웹 서버
1.2.6 자바 서블릿 컨테이너/엔진

🚩 1.2.2 자바스크립트 오브젝트 노테이션 (JSON)

🐳 JSON과 Object

JSON(JavaScript Object Notation)은 "오브젝트(Object)"를 표현하는 문자열이다.

❓ 왜 오브젝트를 문자열로 표현해야할까?

이를 고민해보기 전에 오브젝트가 무엇인가 알아보자.

오브젝트(Object)란 메모리상에 존재하는 어떤 자료 구조이다.

public class TodoItem{
	String title;
    boolean done;
    
    public TodoItem(String title, boolean done) {
    	this.title = title;
        this.done = done;
    }
}

위의 예시는 자바 클래스의 예로 이 클래스를 이용해 오브젝트를 생성하면 아래와 같다.

new TodoItem("myTitle", false);

이렇게 생성한 오브젝트는 메모리상에 다음 그림과 비슷한 형태로 존재할 것이다.

실제로 오브젝트가 메모리상에 어떻게 존재하는지는 아키텍처와 언어에 따라 다른데 메모리상의 오브젝트는 인간이 읽기 힘들다.

그래서 인간이 알아보기 쉽도록 오브젝트를 문자열로 표현하는 것이다.

🐳 서로 다른 애플리케이션으로 데이터를 전달하는 방법

서로 다른 애플리케이션으로 데이터를 전달하는 방법을 예시 상황을 만들어서 쉽게 알아보자.

🔹상황
App1에서 App2로 인터넷을 통해 TodoItem(오브젝트)을 전송해야 함

🔹가정
App1과 App2는 언어도 다르고, 아키텍처도 다름

🔹데이터를 전달하는 방법
A: JSON(JavaScript Object Notation)으로 직렬화하여 보낸다.

💡직렬화(serialization) 하기

• 오브젝트를 전송하려면 App1과 App2 둘 다 이해할 수 있는 형태로 오브젝트를 변환해야 함
• 직렬화(serialization) : 저장 또는 전송을 위해 메모리상의 오브젝트를 다른 형태로 변환하는 작업
  (반대 작업은 역직렬화(deserialization)이라 함)

❓ 어떤 형태로 오브젝트를 직렬화 해야할까?
A: JSON(JavaScript Object Notation)

💡JSON(JavaScript Object Notation)이란?
키(key)-값(value) 형태로 오브젝트를 표현한 문자열

💡JSON 형태의 TodoItem 오브젝트

"title":"myTitle"
"done":false

💡JSON에서 각 자료형을 표현하는 방법

자료형/구조	표현 방법
Boolean	true 또는 false
숫자	쌍따옴표 없는 숫자 (ex. 100, 12.35 )
문자열	쌍따옴표로 감싼 형태 (ex. "sunny", "hello" )
오브젝트	소괄호로 감싼 형태 (ex. {"title":"myTitle"} )
배열	대괄호로 감싼 형태 (ex. ["abc","efg","hi"] )

💡JSON에서 각 자료형을 표현한 예제

{
	"myString":"hello", // 문자열
    "number":100,  // 숫자
    "myStringArray": [  // 배열  
    	"abc",
        "efg",
        "hi"
    ],
    "myObject":{ // 오브젝트
    	"title":"myTitle"
    }
}

🔹JSON을 이용한 데이터를 전달

1. APP1에서 오브젝트를 JSON 형태의 문자열로 변환
2. APP1에서 HTTP 요청의 바디부분에 변환한 JSON을 넣어 요청을 전송
3. 요청을 받은 APP2는 HTTP 요청의 바디 부분에서 JSON을 꺼냄
4. TodoItem으로 변환해 사용