Contents

1. XML, JSON

가. XML

let parser = new DOMParser();
let xmlString = `<root>
                    <element>Some text here</element>
                 </root>`;
let xmlDoc = parser.parseFromString(xmlString, "text/xml");

// Get the text from the <element> tag
let elementText = xmlDoc.getElementsByTagName("element")[0].childNodes[0].nodeValue;

console.log(elementText); // Outputs: "Some text here"
Code language: JavaScript (javascript)

XML을 파싱하고 값을 읽어오는 방법이다.

파싱을 통해서 DOM만 생성하면 나머지는 HTML과 동일하다.

나. JSON

let jsonString = `{
  "name": "John",
  "age": 30,
  "city": "New York"
}`;

let jsonObj = JSON.parse(jsonString);

console.log(jsonObj.name); // Outputs: "John"
Code language: JavaScript (javascript)

다른 프로그래밍 언어에서도 사용할 수 있다.

MIME 타입은 application/json이다.

다. XML vs JSON

JavaScript에서 동일한 데이터 기준으로 …

JSON은 XML보다 구문이 짧고 간결함. 종료 태그가 없다.
JSON 데이터가 XML 데이터보다 빨리 읽고 쓸 수 있다.
XML은 배열 사용이 불가능.
XML은 XML 파서가 필요하지만 JSON은 자바스크립트의 함수로 변환한다.
XML은 문서의 DOM을 이용하여 태그에 접근해야 한다. 이는 JSON보다 처리속도가 느리다.
단, JSON은 전달받은 데이터의 무결성을 직접 검증해야 한다.

라. JSON method

JSON.stringify(JSON 형식의 object); : 직렬화
JSON.parse(JSON 형식의 문자열); : 역직렬화
Date.prototype.toJSON(); : Date 객체의 데이터를 JSON 형식의 문자열로 변환

2. Web Storage

[Node.js] 쿠키의 한계

1. 인증 부분의 한계 민감한 정보를 클라이언트 쪽에 저장한다는 것은 위험하다. 또한 쿠키는 쉽게 탈취당할 수 있기 때문에 민감한 정보를 저장하는 것에 어울리지 않는다. 그렇기 때문에 요즘에는 인증을 구현하기 위해서 쿠키보다는 세션이나 JWT를 사용한다. 그중에서 세션을 사용하면 서버 측에서 사용자에 대한 정보를 안전하게 저장하고, 클라이언트에는 세션 ID만을 저장하여 보다 안전하다. 그 외에도 세션은 …와 같은 장점들로 인해 많은 웹 애플리케이션에서 세션 기반 인증 방식이 널리 사용되고 있다. 다음 기회에 더욱 안전하게 인증 기능을 구현하기 위해서 세션을 이용해 볼 것이다. 2. 저장 부분의 한계 오늘날에는 쿠키를 제외하고도 많은 방법으로 브라우저에 정보를 저장할 수 있다. 쿠키는 4KB라는 용량의 한계와 도메인 하나당 … 더 읽기

LocalStorage, SessionStorage

method	description
localStorage.setItem(key, value)	key – value를 쌍으로 저장.
localStorage.getItem(key)	key에 해당하는 데이터 읽기.
localStorage.removeItem(key)	key에 해당하는 데이터 삭제.
localStorage.clear()	모든 key의 데이터 삭제.
localStorage.key(index)	index에 해당하는 key.
localStorage.length	저장된 key-value 쌍의 개수.

저장되는 모든 key, value는 문자열이다.

// Object to store
let obj = {
  name: "John",
  age: 30,
  city: "New York"
};

// Store object in LocalStorage
// Use JSON.stringify() to serialize the object
localStorage.setItem('user', JSON.stringify(obj));

// Retrieve object from LocalStorage
// Use JSON.parse() to deserialize the object
let retrievedObj = JSON.parse(localStorage.getItem('user'));

console.log(retrievedObj); // Outputs: { name: "John", age: 30, city: "New York" }
Code language: JavaScript (javascript)

그래서 객체를 저장할 때는 직렬화, 불러올 때는 역직렬화를 수행해야 한다.

[JavaScript] XML, JSON, WebStorage