#다크모드

Next.js app router 다크모드 깜빡 거림 문제

혹시 next app router에서 다크모드 설정 깜빡거리는 현상 해결해 보신 분 계신가요? 테마는 로컬스토리지에 저장해서 초기에 보여줍니다. Next 14 + styled-components 사용중입니다. 기존 page router에서는 _document.tsx에서 script 태그 dangerouslySetInnerHTML 사용해서 DOM요소 렌더링 이전에 로컬스토리지 저장된 모드 가져와서 관련 코드 실행 되게 끔 해서 깜빡임 현상을 해결했었습니다. app router에서 layout.tsx에 Script태그 이용해서 똑같이 적용하면 DOM요소가 렌더링 되고나서 실행이 되어서 기존 다크모드설정 후 새로고침 시 깜빡거리는 문제가 발생합니다ㅠㅠ 기존에 _document.tsx랑_app.tsx에 작성된 코드들은 layout.tsx에서 관리하는 걸로 알고 있는데 동작 방식이 다른 건지 기존과 다르게 동작합니다.. 여러 옵션을 사용해봐도 똑같네요... 관련 자료도 너무 없어서 nextjs github issue 뒤져보니까 똑같지는 않지만 비슷한 문제를 겪고 있는 issue가 있던데 해결이 안 된 거 같더라구요.. 이러한 상황에는 어떻게 해야할까요..? 개인 프로젝트고 해결이 된다면 정말 좋겠는데, 면접에서 이렇게 해결하지 못한 상황에 대해서는 어떻게 말해야할지도 고민입니다..

다크모드에서 react lazy 사용할 때 흰 화면이 보이는 이슈

react lazy를 route 단에서 적용을 했는데 페이지를 이동할 때마다 흰색화면이 나옵니다. 라이트 모드에서는 괜찮은데 다크모드를 사용 중일 때는 route를 이동할 때마다 흰배경이 나와서 불편하더라구요. 혹시 이런 부분은 어떻게 처리하는 것이 좋을까요?

개발할 때 다크모드(테마)를 선호하는 이유가 무엇일까요?

주변 개발자 대부분이 다크모드로 코드 편집기를 쓰는 것 같고, 어떤 기사를 통해서도 개발자의 70%가 다크모드를 선호한다는걸 봤습니다. 그런데 개인적으로는 라이트모드를 선호해서 갑자기 궁금해졌습니다 ㅎㅎ (그냥 편협한 제 지식으로는...)주변 조명이 어두운 환경에서는 어둡게, 밝은 환경에서는 밝게 보는게 눈에 좋다고 알고 있는데요. 사무실은 거의 조명이 밝은 환경이기도 하고요.