문제 상황
•
어떤 것을 하려다가 문제가 발생했는가?
◦
다크모드 적용 후 QA 중 디바이스는 라이트모드
&& Cabi는 다크모드 로 설정한 상태에서 새로고침 했을때
&& Cabi는 다크모드 로 설정한 상태에서 새로고침 했을때•
발생한 문제(에러)
잠시 흰 화면이 노출되는 FOUC(Flash of Unstyled Content) 문제 발생
•
발생한 환경, 프로그램
◦
LOCAL
원인
•
추정되는 원인
◦
<head> 태그에 위치한 GA4 스크립트 실행으로 인한 HTML 파싱 중단으로 테마 적용 지연
•
실제 원인
◦
테마 설정 스크립트가 <body> 태그 내부에 위치하여 GA4 스크립트로 인한 파싱 중단 여부와 무관하게 DOM 생성이 어느 정도 진행된 후에야 실행됨. 즉, 사용자가 설정한 테마 적용이 지연됨
◦
따라서 스크립트 실행 전까지는 시스템 기본 테마 배경색(#ffffff)이 노출됨❗️
<head>
<script>
<!-- GA4 연동 스크립트 -->
</script>
...
</head>
<body>
<script
type="module"
src="/src/Cabinet/components/Card/DisplayStyleCard/colorThemeInitializer.ts"
></script>
</body>
HTML
복사
최종 해결
•
최종 해결을 위한 시행착오
◦
<head> 태그 하위에 테마 설정 스크립트를 배치했으나 여전한 FOUC..
◦
스크립트 상단 코드 실행으로 인한 테마 적용 지연이 원인임을 확인
•
해결방법
◦
스크립트를 <head> 최상단에 재배치하여 HTML 파싱 초기 단계에 사용자 설정 테마에 맞는 배경색이 즉시 적용되도록함으로써 FOUC 문제 해결
<head>
<script
type="module"
src="/src/Cabinet/components/Card/DisplayStyleCard/colorThemeInitializer.ts"
></script>
...
HTML
복사
