서론
지난 프로젝트 중간발표때, 멘토님께서
"GlobalStyle로 전역 스타일을 설정하는 것과 index.css 로 설정하는 것의 차이가 있나요?"
라는 질문을 하셨다.
그때 내 대답은
"찾아봐도 큰 차이점은 없는 것 같은데 GlobalStyle로 전역 스타일링을 하면
조건부 스타일링을 하기 조금 더 수월할 것 같습니다"
라고 했었나 ?
그에 대한 반성
본론
Note regarding css @import and createGlobalStyle
At this time we do not recommend using @import within cGS due to some issues with how browsers process @import via the CSSOM APIs. Instead it's best to place these in your core index.html file (generated or static) within a typical
공식문서 발췌. 해석하자면,
브라우저가 CSSOM APIs를 통해 @import를 처리하는 방식에 문제가 있기 때문에
createGlobalstyle에 @import 를 사용하는 것을 권장하지 않는다. 일반적으로 style 태그 내에 있는 이미 생성됐거나 정적인 index.html에 설정하는 것이 좋다.
라는 의미인데,
CSSOM은 CSS Object Model을 의미한다.
웹 브라우저가 웹 문서를 해석하는 과정에서 Document Object Model 을 구성하듯,
CSS 처리에 관련된 객체 모델을 생성하는 과정이라는 것 같다.
실제로 프로젝트를 진행하는 동안 네트워크 탭을 확인해보면
createGlobalStyle 로 import 해온 글꼴을 렌더링이 될 때 마다
새로 불러오는 것을 확인할 수 있었는데
이러한 문제 때문이라고는 생각하지 못했다.
createGlobalStyle 로 설정했던 전역 글꼴을
index.css 파일로 옮겨주니 폰트와 관련된 이슈가 깔끔하게 해결되었다.
결론
힌트라도 좀 주시지 그러셨습니까.. 😢
사실 생각해보면 이렇게 수수께끼를 던져주는 쪽이 조금 더 재밌는 것 같다.
아직 하나밖에 풀지 못했지만
