[Javascript] 사용자 정의 객체 JSON

JSON

JSON (JavaScript Object Notation) 은 데이터 포맷일 뿐이며 단순히 데이터를 표시하는 표현 방법 중 하나이다. 웹 애플리케이션에서 데이터를 전송할 때 일반적으로 사용한다

JSON 문법

• { "key" : "value" }
• key값이나 문자열은 항상 " " (큰따옴표)를 이용하여 표기
• 데이터는 쉽표 , 로 나열, 객체는 중괄호 {}로 표현, 배열은 대괄호 []로 표현

# person 객체 생성과 속성(property), 기능(method) 작성

const person = {
     /* 속성 property */
    "username" : "gangintheremark",
     "age" : 24,

     /* 기능 method */
     // get 메서드 
    getusername: function () { return this.username; },  // method에서 property 접근 시 this. 사용 
    getage: function () { return this.age; },

     // set 메서드
     setusername: function (name) { this.username = name; },
     setage: function (a) { this.age = a; }
};

위 코드에서

• : function() 생략 가능
• 객체의 속성명과 삽입할 변수명이 똑같을 때는 한 번만 써도된다.

var username = "gangintheremark";

const person = {
      /* 속성 property */
    "username", // 객체의 속성명과 삽입할 변수명이 똑같다
      "age" : 24,

      /* 기능 method */
    // get 메서드
    getusername() { return this.username; }, // :function() 생략가능
    getage{ return this.age; },

     // set 메서드
     setusername(name) { this.username = name; },
     setage(a) { this.age = a; }
};

 

JSON 형식 변환하기

• JSON.stringify() : 직렬화. 자바스크립트 객체를 JSON 형식의 문자열로 변환 JSON 👉 "JSON"
• JSON.parse() : 역직렬화. JSON 형식의 문자열을 Javascript 객체로 변환 "JSON" 👉 JSON
• toJSON() : 자바스크립트의 Date 객체의 데이터를 JSON 형식의 문자열로 변환

---

브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면에 표시해주는 작업이다.

SSR (Server Side Rendering)

클라이언트가 요청할 때마다 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식이다.

• 서버가 클라이언트의 요청마다 새로운 화면(html) 제공
• 서버가 화면을 그리는 주체가 됨

CSR (Client Side Rendering)

클라이언트가 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식이다.

• 클라이언트의 요청 시 모든 data(JSON, XML)를 제공
• 서버의 응답으로 JSON(or XML) 데이터를 전송함
• 클라이언트가 화면을 그리는 주체가 됨

SSR	장점	- 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 렌더링하기 때문에 초기 로딩속도가 빠르다 - JS를 이용한 렌더링이 아니기 때문에 검색 엔진 최적화(SEO)가 빠르다
	단점	- 초기 페이지 로딩 이후 새로운 페이지를 요청할 때마다 서버에게 필요한 데이터를 요청하고 서버가 응답해주는 방식으로 이동속도가 느리다 - 서버가 매번 요청을 하기 때문에 서버의 부하가 커짐
CSR	장점	- 처음 로딩 후 동적으로 빠르게 렌더링이 되기 때문에 사용자 입장에서 UX가 좋음 - 서버에게 요청하는 횟수가 적어 서버 부담이 적고 새로고침이 발생하지 않음
	단점	- 초기 페이지 로딩이 전체 페이지에 대한 모든 문서 파일을 받다보니 로딩속도가 느리다 - 검색엔진 크롤러가 사이트에 대한 데이터를 정확하게 수집 못하는 경우가 발생할 수 있음