[2022.07.30] React.lazy사용시 SCSS 스타일 적용 오류

로딩시간을 단축하려 전 게시글과 같이 lazy를 사용하자 scss가 적용이 안되는 오류가 발생

 

원인 1. 

scss의 다른 파일에서 같은 클래스의 스타일이 적용되었기 때문에 해당 jsx의 scss에서는 따로 지정해주지 않음

 

해결1.

해당 scss에서도 스타일을 정확하게 기재하여 스타일을 적용시킴

 

 

원인2.

다른 사람의 작업 파일 중 jsx의 state가 변하면서 클래스가 변하고 기존 클래스와 변경 클래스의 스타일 파일은

globalStyle에 공용으로 지정되어 사용됨 .

=>상위 클래스의 스타일이 해당 jsx에서만 지정이 되어있었기 때문에, 상위부터 클래스 스타일이 적용되지 않아 하위 클래스 스타일도 적용안된던것

 

해결2.

해당 scss파일에만 적용되었던 클래스 스타일을 globalStyle로 옮겨주어 전역적으로 사용될 수 있도록 함.

 

원인 3.

globalStyle에서 전역적으로 사용되었던 스타일 중 ,배경 이미지 url을 불러올 수 없는 오류 발생

 

해결3.

그 전부터 상대경로가 잘못 되었던 것, ./../ 이랬던 상대경로를 /img 이런 절대경로로 바꾸어 주자 적용이 됨(src부터 경로가 잡힘)

 

*그 전에 되었는데 왜 오류가 나는 것?

=>lazy를 사용하여 코드 분할을 했기 때문에 그 전에 제대로 지정되지 않았지만 전역적으로 적용되었던 것들이 쪼개져서

오류가 난 것.

그렇기에 처음부터 잘 지정해주는 작업이 필요하다.