[우아한테크코스 학습로그] 초기 페이지 로딩 시 CSS 깨짐 현상 발생 원인 - 레벨 1 로또미션

이번 글은 우아한테크코스 활동 중 하나인 학습로그에 관한 글이다. 1레벨 로또미션 도중 발생했던 경험에 대해 작성해보려 한다. 로또 미션에서 도메인 로직을 유지한다는 조건으로 콘솔에서 웹뷰로 옮겨 진행하는 미션을 진행하였다. 많은 크루원들이 굉장히 다양한 방식으로 코드를 작성하였는데, 그 중 일부 케이스에서는 페이지를 최초 로딩했을 때 CSS가 약 0.5초간 깨지는 현상이 발생하는 케이스들이 있었다. 이 원인에 대해 작성하고 내 해결방법에 대해 작성할 계획이다. 1. 초기 페이지 로딩 시 CSS가 잠시 깨져보이던 상황에 대한 원인 결론부터 말하자면 이는 웹팩 플러그인인 style-loader, css-loader 때문이다. step2.config.js 부분을 보면 style-loader와 css-loader를 사용한 것을 알 수 있다. 각 플러그인들에 대해서 간단하게만 알아보자. css-loader : js 파일에서 css를 불러오기 위해 사용되는 플러그인. 각 css들이 컴포넌트 ...

원문링크 : [우아한테크코스 학습로그] 초기 페이지 로딩 시 CSS 깨짐 현상 발생 원인 - 레벨 1 로또미션