Web(Front) - JSON

📒 JSON

1️⃣ JSON(JavaScript Object Notation)

• 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준
• 전달받은 데이터의 무결성을 직접 검증
• 텍스트 기반 → 프로그램에 독립적(어떠한 프로그래밍 언어와 플랫폼에서도 사용 가능)
• MIME 타입 : applicatoin/json

2️⃣ JSON과 XML 비교

	JSON	XML
종료 태그	없음	-
구문	짧다	길다
데이터 읽는 속도	빠름	느림
배열 사용	가능	불가능
파서	함수로 변환해 사용 가능	XML 파서 필요
처리 속도	빠름	느림

3️⃣ JSON 구조

• name - value 형태의 쌍으로 이루어진 collection 타입의 데이터
• 객체의 경우 : 중괄호 {}
• 배열의 경우 : 대괄호 []

4️⃣ JSON 자료형

• Number : 정수, 실수(고정, 부동 소수점)
• String : 유니코드, “”로 구분, \ 이스케이프 문법 지원
• Boolean : true, false
• Array
• Object
• null : 비어있는 값

5️⃣ JSON 사용 (JS)

• JSON.stringify (JSON 객체)
  • 직렬화
  • 전달받은 JS 객체 문자열로 변환
• JSON.parse (JSON 형식 문자열)
  • 역직렬화
  • 전달받는 문자열 JS 객체로 변환
  • argument로 받은 text 반드시 JSON 형식과 일치시켜야 함.
• toJSON()
  • Date 객체의 데이터 JSON형식의 문자열로 변환
  • Date.prototype 객체만 사용 가능

6️⃣ 브라우저 렌더링

• 서버로부터 요청해 받은 내용(HTML, CSS, JS) 브라우저 화면에 표시하는 작업
  브라우저 렌더링 순서와 원리
• SSR (Server Side Rendering)
  • 클라이언트(브라우저) 요청할 때마다 서버에 매번 데이터 요청 → 요청마다 새로운 화면 제공
• CSR (Client Side Rendering)
  • 클라이언트(브라우저) 요청에 따라 필요 부분만 응답 받아 렌더링 → 요청 시 모든 data(JSON, XML) 제공
  • JSON 데이터를 화면에 보여주는 역할로 Front-end Framework(Vue, React 등) 사용