옵저버 자료 정리

by hohoya33

HTML

크롬 토비
http://www.gettoby.com/

https://www.hweaver.com/intersection-observer-single-page-navigation/
https://codepen.io/hey-nick/pen/mLpmMV
https://codepen.io/chrisux/pen/KrOYdo?editors=1010


# Skeleton Screen

스켈레톤 스크린(skeleton screens)


<img src="ssg_loding.png" alt="">
로딩 인디케이터
로딩 인디케이터는 사용자에게 기다려 달라는 의미이지만 텅빈 화면을 오래 봐야 하는 단점

## 빈 레이아웃을 먼저 보여줘라.
페이지의 뼈대에 해당하는 레이아웃 (Skeleton Screens)을 먼저 보여주고 데이터를 받는 대로 레이아웃을 부분적으로 채워가는 방식




스켈레톤스크린? 해골화면? 하면서 의아하실 것같습니다.스켈레톤 스크린은 유저가 로딩시간을 기다릴 동안 "덜 지루하게" "좀 더 빨라 보이도록"하는 기법들 중 하나 입니다.

 더 자세히 말씀드리면 이를 통해서 빈화면이나 로딩마크가 아닌 내가 받게될 컨텐츠(정보)가 "이런 모양이고" "이정도 분량"이고 "여기까지 진행되었어"를 사용자에게 보여주는거죠. 
 요즘은 인터넷이 빠른 수준이 아니라 사용자와 실시간으로 소통을 할 수 있을 정도로 빨라졌습니다. 속도가 빨라진 만큼 사용자들이 서비스로부터 피드백이 오기까지 기다리는 시간도 짧아지고, 라이프스타일 자체도 굉장히 속도가 빨라졌다고 봅니다. 그렇기 때문에 현재까지 사용하고 있는 로딩표시나, 로딩이 몇퍼센트 되었다라는 로딩마크만으로는 지루해 하고 있는 사용자를 달래기엔 부족해다고 봅니다. 그렇기 때문에 로딩마크 뿐 아니라, 현재 진행 과정을 보여줌으로써 "진행되고 있음" 과 "지금의 상황"을 스켈레톤 스크린으로 좀 더 사용자가 쾌적한 경험을 할 수 있도록 개선하는 기법입니다. 


스켈레톤 스크린 정의
스켈레톤 화면은 텍스트 및 이미지와 같은 콘텐츠가 점차적으로 채워지는 빈 페이지
일반적으로 자리 표시 자라고하는 회색 또는 중립적 인 채워진 모양은 클릭 유도 문안 또는 링크와의 사용자 상호 작용시 즉시 사용자를 만나게됩니다. 
그런 다음 자리 표시 자 (골격의 소위 "뼈")가 실제 사이트 내용으로 대체되고 환상이 완료됩니다. 이것이 바로 스켈레톤 스크린이하는 일입니다


<img src="facebook.png">
Facebook의 뉴스 피드로드 상태

<img src="youtebe.png">
YouTube의 홈 화면로드 상태



# MutationObserver API

나는 최근에 JavaScript MutationObserver API를 사용하여 매우 인상적이었습니다. 나는 이미 코드를 사용하여 코드를 정리할 수있는 모든 장소를 이미 고려하고 있습니다. 

MDN 은 MutationObserver 인터페이스를 다음과 같이 설명합니다 :
MutationObserver 인터페이스는 DOM 트리에 대한 변경 사항을 감시하는 기능을 제공합니다.

지원범위
지원도 좋습니다 . 바탕 화면의 IE11 플러스 초록색 브라우저로 돌아 가기. 모바일에서는 Android 4.4> 및 iOS6입니다.
https://caniuse.com/#feat=mutationobserver

```js
// observer instance 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    console.log(mutation); 

    // include your code for reacting to each mutation here 

    });  
}); 

// target node 
var target = document.getElementById('my-id'); 

// configuration 
var config = { attributes: true,...