preload , beforeunload를 활용하자

시작하기에 앞서

 

코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고

 

요점을 적어두고 다시 활용하기 위한 글입니다.

---

CSS visivility에 관해

개인 프로젝트를 진행하다가 보면 배치한 컴포넌트와 모듈이 첫 시작때 배치 이동되면서

 

화면이 어그러지는 경우를 많이 보게된다. 이를 해결하기 로딩이나 스피너등으로 

 

유저 이탈을 막는 경우가 있는데 최근에는 스켈레톤 UI (컴포넌트)를 많이 사용한다.

 

 

하지만 로딩이 길지않고 사이트 로딩자체의 시간이 아주 길지 않은 경우

=> 일반적으로 유저가 빈 화면등을 보고 이탈하는 시간인 3초 이내

 

굳이 스켈레톤 리소스를 활용하는 것 보다 간단하게 CSS를 활용하는 방법을 찾아서 공유한다.

 

// CSS
body {
  visibility: hidden;
}


// JS 
window.addEventListener('DOMContentLoaded', () => {
  document.body.style.visibility = 'visible';
});

 

해당 구문이 적용된 사이트와 그렇지 않은 사이트의 차이를 그림으로 비교해보자

 

적용된 사이트 로딩

 

적용하지 않은 사이트의 로딩

 

동영상 프레임 차이로 1회 이외에 뒤에는 제대로 나오는거같이 보이는데 실제 작동시

 

화면과 같은 깜빡임이 발생한다.

 

 

---

preload (초기 로드) 

먼저 사진 2개를 보고나서 설명하도록 하겠다.

적용되지 않음                                                                                     적용됨

 

캐쉬 혹은 로컬스토리지 등을 사용하다 보면 어떠한 상태가 저장된채로 남겨둘때가 있다.

 

오른쪽은 모든 처리가 끝난 후 화면에 보여져 따로 변화가 없지만

 

왼쪽은 로딩시 JS등을 처리하며 상태가 변화하는걸 전부 실시간으로 보여줘버린다.

//CSS -> body의 클래스요소로 preload가 들어가 있다.
.preload * {
  transition: none !important;
}

//js
document.body.classList.remove("preload");

preload 클레스를 제거해주는건 특정 동작이 끝난 후 (DOMContentLoaded 이후)

 

혹은 화면 내 어떤 기능이 작동한 후에 제거해주면 다시 애니메이션이 정상작동된다.

 

https://css-tricks.com/transitions-only-after-page-load

Transitions Only After Page Load | CSS-Tricks

 

 

---

addEventListener 의 beforeunload에 대하여

https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event

Window: beforeunload 이벤트 - Web API | MDN

 

캐쉬나 로컬 스토리지등을 활용함에 있어서 어떠한 변화상태를 남기고 싶을 때

 

새로운 갱신이 일어날 때마다 로컬 스토리지에 갱신을 하는 방법도 있지만 beforeunload를 활용하는 방법도 있다.

beforeunload 이벤트는 사용자가 웹페이지를 떠나기 직전에 발생한다.

=> (새로고침, 앞으로/뒤로 가기, 브라우저 닫기, form submit 등)

 

즉 저장해두고 싶은 상태값을 웹을 벗어나는 순간 기록 가능하다.