Under the Sign of Saturn

DOCTYPE 유규한 역사를 가진 HTML은 시간이 지나며 그때 그때 필요한 기능을 표준으로 하는 버전들을 계속 업데이트해왔다. 당연히 여러 버전이 존재할 수밖에 없고, 이들은 각각의 이름도 가지고 있다. 가까운 순으로 HTML5, XHTML 1.1, HTML 4 등을 들어볼 수 있는데, 버전 별로 지원하는 태그나 속성이 조금씩 다르다. 물론 deprecated된 기능도 있다. 그러다보니 웹 문서가 어떤 HTML 버전을 사용하는지 브라우저에게 알려줄 DTD(Document Type Declaration)이라 하는 문서 형식 지시자를 와 같이 HTML 문서 최상단에 작성하게 된다. 그러면 브라우저는 이를 읽고 선언된 버전에 맞는 문서를 렌더링해서 보여줄 수 있게 되는 것이다. deprecated 되는 몇 ..

WebStorage의 API - 두 객체 모두 동일한 메서드와 프로퍼티를 갖는다. setItem(key, value) // 키-쌍을 보관 getItem(key) // 키에 해당하는 값을 받아온다. removeItem(key) // 키와 해당 값을 삭제한다. clear() // 모든 것을 삭제한다. key(index) // 인덱스에 해당하는 키를 받아온다. length // 저장된 항목의 개수를 받아온다. - 두 스토리지 객체는 setItem/getItem/removeItem 메서드를 지원하는 것으로 보아 Map과 유사하지만, 인덱스를 사용해 키에 접근하는 방식은 다르다고 볼 수 있다. - 웹 스토리지 객체는 origin(domain/port/protocol)에 묶여 있다. (프로토콜과 서브 도메인이 다르..

Vuex를 사용해서 로그인 정보를 state에 저장하고, 페이지가 전환되어도 그대로 유지되도록 하는 방법을 찾다가, vuex의 state를 localStorage로 자동으로 동기화해주는 라이브러리 vuex-persistedState를 사용해봤다. 이전 프로젝트에서도 사이드바에 유저 정보가 바로바로 반영이 안 되거나, 렌더링이 원하는 타이밍에 제대로 되지 않는 이슈가 있었는데, Vue.js가 아무래도 SPA를 기반으로 하다보니, 이런 상황이 앞으로도 자주 발생할 것 같다는 생각이 들었다. 브라우저에 데이터를 저장하는 대표적인 방법은 HTML5에 포함된 자료 구조인 Web Storage의 localStorage, sessionStorage가 있다. 쿠키와 개념이 비슷하지만, 쿠키에서 조금 더 개선점을 가지는..