JSON, 브라우저 렌더링

JSON (JavaScript Object Notation)?
JSON은 속성-값 쌍(attribute-value pairs), 배열 자료형(array data types) 또는 기타 모든 시리얼화 가능한 값(serializable value) 또는 “키-값 쌍”으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.
비동기 브라우저/서버 통신 (AJAX)을 위해 , 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다.
본래는 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, 구문 분석 및 JSON 데이터 생성을 위한 코드는 C, C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 수많은 프로그래밍 언어에서 쉽게 이용할 수 있다.

JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준
XML 사용시 파싱과 같은 복잡한 문제를 해결
단, JSON은 전달받은 데이터의 무결성을 직접 검증(XML은 스키마를 이용)
텍스트 기반이므로 어떠한 프로그래밍언어와 플랫폼에서도 사용 가능
MIME 타입은 ‘application/json’
http://www.json.org/json-ko.html

JSON VS XML
JSON은 종료 태그가 없음
XML에 비해 상대적으로 구문이 짧음
JSON 데이터가 XML 데이터보다 빨리 읽고 쓸 수 있음
XML은 배열 사용이 불가능
XML은 XML 파서가 있어야 하나 JSON은 자바스크립트의 함수로 변환하여 사용가능
XML은 문서의 DOM을 이용하여 접근하지만, JSON은 문자열로 전송 받은 후 바로 파싱 하기 때문에 XML보다 처리 속도가 빠름

JSON 구조
JSON data는 name - value 형태의 쌍으로 collection 타입이다.
data는 쉼표(,)로 나열된다.
객체는 중괄호 ({})로 표현
배열은 대괄호 ([])로 표현

JSON 자료형
수 (Number)
- 정수, 실수 (고정, 부동 소수점)
문자열 (String)
- 유니코드 문자들
- 큰 따옴표(”)로 구분 함
- 역슬래시(\) 이스케이프 문법을 지원
참 / 거짓 (Boolean)
- true or false
배열 (Array)
객체 (Object)
null
- 비어 있는 값

JavaScript에서 JSON 사용
JSON.stringify(JSON 객체)
- 직렬화 (serialize)
- argument로 전달받은 자바스크립트의 객체를 문자열로 변환

JSON.parse(JSON형식의 문자열)
- 역직렬화(deserialize)
- JSON.stringify(text)와 반대로 argument로 전달받은 문자열을 자바스크립트의 객체로 변환
- argument로 받은 text는 반드시 JSON형식에 일치해야 함

toJSON()
- 자바스크립트의 Date 객체의 데이터를 JSON형식의 문자열로 변환
- Date.prototype 객체에서만 사용 가능

브라우저 렌더링
브라우저가 서버로부터 요청해 받은 내용( HTML, CSS, JavaScript)을 브라우저 화면에 표시해 주는 작업
렌더링의 기본 동작 과정
1. HTML과 CSS 파일을 파싱하여 각각 Tree를 생성. [Parsing] : DOM, CSSON Tree생성
2. 두 Tree를 결합하여 Rendering Tree를 생성. [Style]
3. Rendering Tree에서 각 Node의 크기와 위치를 계산. [Layout]
4. 계산된 값을 이용하여 각 노드를 화면상의 실제 픽셀로 변환하고, Layer를 만듬. [Paint]
5. Layer를 합성하여 실제 화면에 나타냄. [Composite]

브라우저 렌더링 - SSR (Server Side Rendering)
클라이언트(브라우저)가 요쳥할 때마다 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식
서버가 클라이언트의 요청마다 새로운 화면(html)을 제공
서버가 화면을 그리는 주체가 됨

SSR (Server Side Rendering) 장점과 단점

 

브라우저 렌더링 - CSR (Client Side Rendering)
클라이언트(브라우저)가 요청 해 서버에 데이터를 받아 클라이언트에서 처리하는 방식
클라이언트가 화면을 그리는 주체가 됨
클라이언트 요청에 대한 서버의 응답으로 JSON(or XML …) 데이터를 보냄
JSON 데이터를 화면에 보여주는 역할로 Front-end Framework를 사용

CSR (Client Side Rendering) 장점과 단점