React 협업간 효율적인 CSS 파일관리는?

Today

팀원들과 함께 프로젝트를 진행하면서, 프로젝트를 완성하는 것도 중요하겠지만 전체적인 구성과 코드를 보았을때 통일성을 갖추고 있어야 눈에 잘 들어오고 하나의 팀으로서 협업을 잘했다라는 느낌을 받을것이다. 오늘은 실전 프로젝트를 FrontEnd팀원들과 진행하면서, 통일성을 갖추기 위해 구조를 잡는 회의를 하다 CSS 파일 관리부분에서 의견충돌이 일어났다.  

react에서 css효과를 주기위한 방법은 직접 css파일을 만들어 관리하는 방법과, 페이지에서 styled component를 사용하는 방법, button, input 등 기능별로 atom을 생성해 관리해 주는 방법 등이 있다. 다행히 팀원들 모두 atom파일을 생성해 기능별로 CSS파일 관리하는 것이 좋겠다라는 얘기가 나왔고,  이대로 진행을 하면 문제가 없을 것 같아 보였다. 하지만, 회의를 하다가 하나의 atom파일로 모두가 css효과를 준다면, css가 길어질 수도 있고 서로 작업하다가 충돌이 일어날 수도 있지 않을까라는 의견을 가진 조원도 있었다.

그래서, 페이지별로 CSS폴더를 따로 만들어 각 폴더에 atom파일을 집어 넣고 관리하면 서로가 담당하는 페이지의 영향을 따로 받지 않고, 폴더별로 나누어서 작업을 하기 때문에 코드길이가 짧아지겠다라고 생각하여 이 방법으로 프로젝트를 진행하기로 하였다. 하지만, 프로젝트를 진행하면서, 이렇게 CSS관리를 하면 react component를 제대로 활용하지 않는 것이고, 코드길이가 짧아져 보이지만 파일수는 더 늘어나게 되어 효과적이지 않은것 같다라는 의견이 나오게 되었다.  

조원들의 의견만으로는 정확하게 어느쪽이 맞다라는 확실한 답을 얻을 수 없어, 멘토님에게 의견을 구한 결과, 페이지별로 CSS폴더를 만들어 atom파일을 생성해 진행하고 있는 방식은 처음 협업하는 입장에서는 괜찮은 방법일수도 있지만, 어떻게 보면 이 방법은 서로에게 영향을 서로 끼치지 않고 개인작업을 하는 것과 같아 협업을 하는 것으로 보이지 않는다라는 지적과 함께, atom파일을 생성해 협업할 경우에는 공통적으로 자주 사용되어질 것 같은 요소에만 if문으로 특정 css를 주어서 사용하고, 그렇지 않은 경우엔 props로 직접 전달받아 css를 주는 방식으로 하는것이 좋다라는 피드백을 받게 되었다.   

멘토님으로부터 피드백을 받고,  시간이 조금 걸리더라도 폴더를 나누어 작업하던 파일들을 다시 하나로 합쳐 진행을 하기로 하였고, 각자가 생각하는 의견이 조금씩은 다들 달랐지만, 팀원 모두가 완성도 있는 결과물을 만들어내고 싶어하는 마음에서 나온 의견이었기에, 이러한 과정이 있는것은 당연한 것이라고 생각한다. 내가 생각하지 않은 의견을 들어보고 이것 저것 시도해 봄으로써 배우는 것도 있다고 생각하기에, 좋은 공부가 되었다.