Web & browser

승훈·2020년 12월 14일
0

html, css

웹 페이지를 만들기위해 태그를 사용한 언어.

'<','>' 태그를 이용해 만들어진 element들의 집합이다. 태그에 대한 속성들을 이용하여 작업하고 style을 넣어서 웹 페이지에 표현할 수 있다.

여기서 HTML은 실제 웹 페이지가 어떻게 표시되는 지, 즉 작성형식, 디자인을 지정하는 것이 어렵다. 그렇기 때문에 CSS파일에 따로 웹 페이지의 디자인(글자의 크기, 글자체, 배경 색상 등..)을 정의한다.

웹과 브라우저의 동작 원리

웹서버에서 보낸 html 문서(html, css, javascript,,,)를 화면에 보여주기전 브라우저에서 html문서를 해석하고 화면에 보여준다.

DOM

DOM이란? 문서객체모델의 약자로, 브라우저에선 HTML문서의 태그, 속성, 프로퍼티, 텍스트 등은 모두 별도의 객체로 파싱되고 이 객체들을 DOM이라고 한다

이 객체모델(DOM)에 대한 API들이 존재한다. 자바 스크립트는 이 API들을 이용해 웹 페이지를 동적으로 구동되도록 한다.

Html web-storage

웹 사이트 성능에 영향을 주지않고 안전하고 많은 양의 애플리케이션 데이터를 로컬에 저장 가능. 로컬 스토리지와 세션 스토리지의 공통점은 두 기술 모두 데이터를 브라우저 상에 저장한다는 것.

window.localStorage
로컬 스토리지의 데이터 영속성(persistence) 어디까지나 계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당

localStorage.setItem('token', 'dakfjlafj439jf1kdl1')
localStorage.getItem('token')
localStorage.removeItme('token')

window.sessionStorage
브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다

  • 단 웹 스토리지 사용시: 오직 문자형(string) 데이터 타입만 지원!
    ==> 해결방법 : JSON 형태로 데이터 읽고 쓰기!
localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}

0개의 댓글