Hyunjung Im
Frontend Developer
2023-07-14
오늘 모기업 화상 면접을 진행했다. 답변했던 게 부족한 부분이 많은 것 같다. 정리하고 다시 실수 하지말자.
🧑🏻💻 “브라우저의 기본 테마 값에 따라 dark, light 모드 설정하는 방법을 아시나요?”
블로그에 이 설정을 했는데.. 대답하지 못했다. 처음엔 블로그에 설정을 했다고 바로 생각이 났는데 당황하다보니, 설정을 한 것도 확신이 들지 않아 모른다고 대답했다.
localStorage.theme === "dark" ||
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
? document.documentElement.classList.add("dark")
: document.documentElement.classList.remove("dark");
window.matchMedia("(prefers-color-scheme: dark)").matches
를 이용해 브라우저의 dark모드가 활성화되면 true를 반환한다.
Window 인터페이스의 matchMedia() 메서드는 문서가 미디어 쿼리 문자열과 일치하는지 확인하고 문서가 해당 미디어 쿼리와 일치할 때(또는 일치하지 않을 때)를 감지하는 데 사용할 수 있는 새 MediaQueryList 객체를 반환합니다.
🧑🏻💻 “mock service worker도 적용이 되어 있나요?”