카카오웹툰은 CSS를 어떻게 작성하고 있을까? | 카카오엔터테인먼트 FE 기술블로그
2023.02.20~2023.04.07 진행한 클론코딩 프로젝트에서, CSS때문에 협업에 어려움을 경험한 적이 있다.
특히 클래스 명이 충돌되는 것을 방지하기 위해 클래스 명을 더욱 세부적으로 작성하곤 했었다. 그러다보니 CSS의 양이 방대해지고, 공통된 컴포넌트에 대해서도 서로 다른 스타일이 정의되었으며, 어쩌다 클래스 명이 같아지거나 스타일이 상속되어버리는 경우 원인을 해결하려 한참을 헤맨 적이 있다.
이번 프로젝트에서는 좀 더 효율적으로 CSS를 작성하고 싶어 해당글을 정리해 보았다.
next.js 에서 css module 지원
css-in-js
가 유용css module
, tailwind
유용현재 프로젝트에서 가장 큰 문제점은 제한적인 시간이라는 것이다.
렌트카 사업을 이벤트 스토밍을 통해 구체화해봤는데 생각보다 너무많은 서비스가 필요해서 현실적으로 기능구현에 제한이 있을 것 같다는 생각을 했다.
퍼블리시와 리액트 기능구현을 분리하여 생각한다면 css module이 효율적인 방법이 되겠으나, 현재 아무것도 없는 상태에서 6월 중순까지 프로젝트를 마무리하기위해서는 styled component가 최선의 선택인듯하다.
협업하는 동료분이 sass와 css module을 혼합하여 사용하고 싶다고 의견을 주셨는데, 이 부분에 대해서는 조금 더 고민해보고 결정을 내려야 할 것 같다.
가장 중요한건 "이 기술을 왜 사용했는가"를 판단하는 데 정확한 이유가 필요하다는 것이고,
두번째로 중요한건 이 판단을 하는데에 걸리는 시간이 길어져서는 안된다는 것이다.
내일까지는 개인공부하며 프로젝트 방향성에 대해 생각해보고, 화요일부터는 개발 규칙과 앞으로 진행할 스프린트에 대해서도 생각을 정리해 개발을 시작해야겠다.