0.Interactive Web
1.data attribute
2.fetch()
3.getUserMedia()
Interactive Web
클라이언트와 서버 사이에서 일방적으로 정보를 받는데에 그치지 않고, 접속자가 페이지안에서 상호작용과 데이터를 교류하는 동적인 웹페이지를 말하며, 상호작용 및 데이터 교류를 하는데 있어 url변화 없이 페이지 변화가 일어난다.
Interactive Web으로 구현된 대표적인 사례는 Apple 공식 홈페이지이다.
Apple
동적 웹페이지
:클라이언트 요청에 대해서 서버는 사용자에 따라 각각 다른 내용을 제공한다.
즉, 사용자가 URL을 통해 서버에 웹페이지를 요청했을 때, 서버는 사용자에 맞는 HTML문서를 생성하여 클라이언트에게 응답한다. (EX)쇼핑몰 찜 list, 최근본 상품, 추천 상품 등
정적 웹페이지
:클라이언트 요청에 대해서 항상 같은 내용을 제공한다.
즉, 사용자가 URL을 통해 서버에 웹페이지를 요청했을 때, 서버 안에서 이미 만들어져있는 HTML문서를 클라이언트에게 응답한다. (EX)회사 소개, 개인 소개 등
Data Attribute(데이터 속성)
'data-'로 시작하는 속성을 말하며, 이는 특정 데이터를 DOM요소에 저장하기 위한 목적으로 사용된다. 데이터 속성 사용 시, 브라우저는 데이터 속성에 대해 어떠한 영향도 주지않기 때문에 개발자는 DOM요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용이 가능하다.
'data-'로 시작하는 속성은 모두 사용이 가능하며, 화면에 보이지 않게 데이터를 요소에 담을 수 있는 장점을 가지고 있다.
DOM
DOM(Document Object Model)를 직역하면 문서 객체 모델이다.
문서 객체란 html문서의 태그들을 Javascript가 이용할 수 있는 객체로 만드는 것을 문서 객체라한다. 모델은 모형, 주형, 모듈이라는 의미를 가지고 있으며 여기서는 인식하는 방식으로 해석할 수 있다. 따라서 DOM은 웹 브라우저가 HTML페이지를 인식하는 방식을 의미한다.
fetch()
원격 API호출할 때에 client단에서 직접 HTTP통신을 하는데 있어 복잡하여 request, axios,jQuery와 같은 library를 가장 많이 사용하였으나, 현재는 브라우저에서 fetch()함수를 제공함으로써 보다 쉽게 호출할 수 있게 되었다고 한다.
fetch()는 서버와의 비동기 요청방식으로 다양한 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경분 가져오기 등 다양한 일을 페이지 새로고침없이 수행할 수 있다.
fetch(url,[Opations])
url : 접근하고자 하는 url
options :
method(사용할 메소드 선택. GET, POST, PUT, DELETE)
headers(헤더에 전달할 값)
body(바디에 전달할 값)
mode(설정 값)
credentials(자격 증명을 위한 옵션 설정)
cache(캐쉬 사용여부)
getUserMedia()
사용자에게 미디어 입력 장치 사용 권한을 요청하며, 사용자가 수락하면 요청한 미디어 종류의 트랙을 포함한 MediaStream을 반환한다.
사용자가 권한 요청을 거부하거나 일치하는 유형의 미디어를 사용 할 수 없는 경우,NonAllowedError와 NotFoundError로 거부된다.
MediaStream는 미디어 콘텐츠의 스트림을 나타낸다.
