DarkMode

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

04 Dark mode TIL
1. localStorage
light모드와 Dark모드 토글 기준을 갖기 위해 로컬스토리지에 key와 value로 저장하고 가져오는 방식을 사용했다.

window.localStorage.setItem('mode', mode);

window.localStorage.getItem('mode'); // 'dark' 또는 'light'

setItem : setItem() 메서드는 key와 value를 인자로 전달하면 해당 key를 지정된 스토리지 개체에 추가한다. 만약, 해당 key의 value가 이미 있으면 업데이트를 한다.

https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem

getItem : getItem() 메서드는 key를 인자로 전달하면 해당 key의 value을 반환한다. 만약, 해당 key가 없는 경우에는 null을 반환한다.

https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem

2. window.matchMedia
로컬스토리지에 저장된 값이 없다면 사용자의 OS테마를 감지하는 기능을 window.matchMedia라는 메서드로 구현했다.

window.matchMedia에 주어진 미디어 쿼리 문자열인 prefers-color-scheme는 CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용된다.

mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

3. transitionend
초기 렌더링 또는 새로 고침 시, 토글 버튼의 트랜지션이 기존 테마가 변경되어 깜빡거리는 현상이 발생하지 않게 하기 위해 트랜지션이 종료되면 hide 클래스를 제거하는 방식을 채택하였고 이에따라 $body.addEventListener('transitionend')메서드 사용했다.

$body.addEventListener('transitionend', removeHideClass);

4. transition을 없앴는데, transition이 자꾸만 발생하는 현상 [load vs domcontentloaded]

window.addEventListner('DOMContentLoaded', removeHideClass);

기존 코드에서는 우선 transition을 0으로 변경하고 DOMContentLoaaded event가 발생하면 hide class를 지우고 transition을 0.2로 변경했다. 순서대로 transition은 변경되고 화면이 나타나고 다시 transition 값을 되돌리는 것에는 성공했다. 하지만 문제점은 DOM 트리가 생길 때 일어난다는 점이다. 그렇게 되면 transition은 변경되자만 결국, 화면에는 다시 transition이 생긴채로 새로고침이 된다. 그것을 막기 위해 load event를 쓰게 되었다.

window.addEventListner('load', removeHideClass);

load event와 DOMContentLoaded event는 비슷해보이는 event이지만, event가 발생하는 시점에서 차이가 있다. DOMContentLoaded는 DOM 트리 생성이 완료되었을 때 발생한다. 반면, load는 DOMContentLoaded 가 발생한 후, 모든 리로스의 로딩이 완료되었을 때 생기게 된다.

이 경우에는 transition을 없앤 후 확실하게 화면에 표현되어야 하므로, load event가 적합했던 것이다.

<배운점>
++ 이 과제를 진행하면서 처음 사용해 보는 이벤트 타입과 메서드를 다루어 보았다. 많은 지식이 있을 수록 상황에 대처하기가 편하다는 것을 느꼈다.

++ window.matchMedia에 대해 알게 되었다.

++ event가 무엇인지만 아는 것이 아니라 event가 발생하는 시점을 정확히 알아야 event를 적절하게 쓸 수 있다.