# 캐시노트 프론트엔드 디버깅 사례 공유 - 제 컴퓨터에서는 됐었는데요... > Clean Markdown view of GeekNews topic #5061. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=5061](https://news.hada.io/topic?id=5061) - GeekNews Markdown: [https://news.hada.io/topic/5061.md](https://news.hada.io/topic/5061.md) - Type: news - Author: [spilist2](https://news.hada.io/@spilist2) - Published: 2021-09-23T07:37:54+09:00 - Updated: 2021-09-23T07:37:54+09:00 - Original source: [spilist.notion.site](https://spilist.notion.site/e5b0e192ed494fc699016b95169732ed) - Points: 11 - Comments: 2 ## Topic Body 지난 몇달간 캐시노트(https://cashnote.kr) 프론트엔드 팀이 React 프로덕을 운영하면서 경험한 3가지 CSS 문제를 디버깅한 사례 공유 - 모두 create-react-app 에서 CSS module을 사용하면서, 개발 환경에서는 경험하지 못했던 문제를 운영 환경에서 발견했다는 공통점이 있음 문제 1: 특정 페이지에 진입한 뒤부터 모든 페이지에서 이미지가 일그러지는 현상 - CSS module이 해싱하지 못하는 형태로 CSS 스타일을 정의한 것이 원인 - 이런 스타일을 정의하지 못하게 stylelint plugin 추가하여 해결 문제 2: 개발 환경과 운영 환경에서 CSS 스타일이 다르게 나오는 현상 - 특정 컴포넌트가 디자인 시스템 컴포넌트의 스타일을 오버라이드하고 있는데, 운영 환경에서는 디자인 시스템 컴포넌트의 CSS가 주입되는 타이밍이 더 늦어서 스타일 오버라이드가 되지 않은 것이 원인 - 처음에는 Webpack 설정을 수정하여 해결했지만 운영환경 퍼포먼스를 희생하는 결정이라 마음에 들지 않았음 - 다른 방법을 찾아보다가 디자인 시스템 쪽의 번들러(rollup) 설정 변경으로 오버라이드가 가능하게 할 수 있음을 발견. 디자인 시스템이 주입하는 CSS는 항상 head의 상단에 위치하게 변경했음 문제 3: 개발 환경에서 실행할 때는 문제가 없는데 프로덕션 빌드는 실패하는 현상 - Webpack 플러그인이 CSS Chunk를 만드는 과정에서, 두 CSS 파일이 서로 다른 순서로 import되고 있으니 두 청크에서 서로 다른 스타일 결과물이 나올 수 있다는 경고 때문에 운영환경 빌드가 실패 - 캐시노트가 CSS module을 쓰고 있으니, 각 CSS 파일들은 모두 독립적으로 작동하므로 order conflict가 서로 다른 스타일 결과물을 만들어내지 않음. 따라서 경고를 무시하도록 Webpack 설정을 변경 뒤의 두 문제는 표면적 현상은 달랐지만, “create-react-app 이라는 프론트엔드 프레임워크가 운영 환경에서 동작하는 방식에 대한 이해 부족”에서 비롯된 문제라는 점에서는 비슷함 - 근본적 개선을 위해, CRA와 Webpack에 대한 이해를 높이고, 나아가 CRA를 걷어내기 위한 준비를 하고 있음 ## Comments ### Comment 6895 - Author: xguru - Created: 2021-09-23T09:39:44+09:00 - Points: 1 재미난 경험 공유 감사합니다. 역시 로컬에서는 항상 다 잘 되죠! ### Comment 6901 - Author: spilist2 - Created: 2021-09-23T11:36:53+09:00 - Points: 1 - Parent comment: 6895 - Depth: 1 감사합니다. 글을 간단히 요약하는 것도 쉽지는 않네요 ㅎㅎ