신비한 개발사전

사용자 기기 설정에 따라 화면을 라이트모드나 다크모드로 보여주는 웹앱을 만드는 도중, 사용자의 기본 테마가 다크모드로 설정되어있으면 페이지를 처음 로딩했을 때 라이트모드의 색상이 먼저 보였다가 다크모드로 바뀌는 flickering 현상을 발견했다. 다행히 이미 잘 알려진 이슈여서 해결방안을 빨리 찾을 수 있었다. 다만 MUI 라이브러리를 사용하기 때문에 해결할 수 있는거라, 근본적인 문제에 대한 솔루션은 나중에 따로 찾아봐야 되겠다. 발생 원인SSR로 MUI 컴포넌트를 렌더링할 경우 컴포넌트가 사용할 색상이 사전에 결정되는데, 그걸 서버에서 결정하다보니 웹 API를 통해 사용자의 기기 설정을 읽을 수가 없다. 어쩔 수 없이 디폴트 값인 라이트모드의 색상으로 prerendering하게 되고, 클라이언트에 ..