캐시노트 프론트엔드 디버깅 사례 공유 - 제 컴퓨터에서는 됐었는데요...
(spilist.notion.site)지난 몇달간 캐시노트(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를 걷어내기 위한 준비를 하고 있음