[Issue] Material-UI는 로컬과 배포 환경(빌드)이 다르다

요즘 나는 작년에 만든 MODIMOA라는 할인 정보 종합 서비스의 추가 작업을 하고 있다.

셀프 디자인의 한계로 모바일 서비스로 만들었던 것을 데스크탑으로 확장하는 작업을 하고 있는데, 이 과정이 마냥 순탄치만은 않다.

 

왼: 모바일 / 오: 데스크탑

왼쪽 사진은 이미 개발을 진행한 상태이고, 오른쪽 사진이 추가로 작업한 것이다.

이 프로젝트에서는 Sass(scss)를 사용하고 있기 때문에 미디어 쿼리를 이용해 모바일인지 데스크탑인지 나눠주었고, 깊은 이해 없이 이것저것 라이브러리를 가져와서 막 짠 코드에 이미 상태들이 뒤엉켜 있었기에 일단 js는 최소한으로 건드리면서 대부분 css 위주로 해결하였다. (최적화.. 막막하다..)

 

그런데 정렬탭을 정렬 버튼으로 바꾸는 과정에서 생각지도 못한 문제를 발견했고, 이를 오늘 해결해 글을 작성하게 되었다.

이 정렬탭은 material-ui의 App Bar를 사용한 건데, 아무래도 이런 ui 라이브러리를 가져다가 사용할 경우 디자인의 일관성이 깨질 수 있기 때문에 어느 정도 서비스에 맞는 css 수정이 필요하다.

 

이는 편하게 내 마음대로 해당 컴포넌트에 className을 주고 css 수정을 하면 될 것이라고 생각되지만, 해당 라이브러리의 css에게서 더 높은 우선순위를 가져와서 작업을 해야 한다. css 선택자 우선순위는 나중에 블로그에 다뤄봐야겠다.

 

정렬 탭에서 밑에 표시되는 바는 로컬 환경에서 class로 .PrivateTabIndicator-root-5 .PrivateTabIndicator-colorSecondary-7 MuiTabs-indicator를 가진다.

그리고 배포의 경우 AWS S3에 빌드 파일을 업로드하는 자동화 스크립트의 결과로 .jss9 .jss11 .MuiTabs-indicator로 바뀌어있다. 문제는 여기서 발생했다.

 

MODIMOA에서는 이렇게 해당 mui의 class에 직접 접근해 수정을 하고 있다.

정렬 탭의 경우 .PrivateTabIndicator-colorSecondary-7에 접근해 수정을 했고, 배포 환경에서 css상으로는 해당 class 이름이 그대로였지만 해당 element에서 사용하는 class 이름이 바뀌기 때문에 최종적으로 스타일이 적용되지 않는 문제가 발생했다.

 

따라서 개발 환경에서도, 배포 환경에서도 이름이 그대로인 .MuiTabs-indicator에 해당 스타일을 적용하는 것으로 해결을 하였는데, 결과는 해결이 됐지만 깔끔한 결과는 아니다.

 

셀프 피드백을 하자면, 중간에 .product-sort-bar처럼 해당 컴포넌트에 직접 class 이름을 붙이는 게 나머지 .MuiGrid-root나 .MuiTabs-scroller처럼 직접 접근하는 것보다 코드 가독성이나 안전성 면에서 훨씬 좋았을 것이다. 특히 안전성을 언급한 이유는 nesting으로 정확하게 원하는 부분에만 스타일을 적용하게 하지 않으면, 다른 mui 컴포넌트들에도 적용될 수 있는 가능성이 있기 때문이다.