스타일링 라이브러리 논의

스윗은 React를 사용하는 CSR 프로젝트인데, CSR의 경우 scss보다 css-in-js가 더욱 합이 좋다. 따라서 그 중 어떤 스타일링 라이브러리를 사용할지에 대해 논의하게 되었다.

styled-components

• 모든 팀원들이 사용한 경험이 있는 익숙한 라이브러리

emotion

• styled-components 사용방식과 css prop 기능을 지원하여 확장에 용이하다. ( 앱에서는 styled-components를 많이 사용하지만 웹에서는 prop 기능때문에 Emotion을 많이 사용하는 것 같다. css, scss를 사용하거나 styled-components, emotion 등을 사용하는 것은 개발자 차이이다. )
• SSR에서 별도 설정 없이 동작(styled-components의 경우에는 ServerStyleSheet 설정 필요)
  => 하지만 우리는 React 프로젝트라 이는 특별한 장점이 되지 못한다.
• emotion/styled를 쓰면 가독성을 잡으면서 러닝커브를 낮출 수 있을 것 같다. 다만 큰 성능 차이가 있는 것은 아니고 스타일 확장성과 용량 줄이는 것..! 근데 용량은 emotion/react만 쓸 때 기준이라서 큰 메리트는 없을 것 같다.

결론

개발 기간을 고려했을 때 러닝커브를 줄여 바로 작업이 가능한 styled-components로 결정.