recode-Emotion

저는 굉장한 @emotion/styled 러버인데요?그동안 개인 노션에만 저의 사랑을 기록해왔더라구요.풀어봅니다. 저의 사랑." JavaScript로 CSS를 작성하게 해주는 스타일링 라이브러리 "styled-component와 CSS-in-JS 진영의 양대산맥 중 하

이번 글은 실제로 @emotion/styled를 어떻게 사용하는지에 대해 집중적으로 다뤄보고자 합니다!!

저는 디자인 시스템을 사용한 프로젝트를 5번 참여했는데요, 매번 타이포 시스템을 정의할 때마다 비효율적인 반복 과정을 반복했습니다...그래서 했어요! 리팩토링 했어요!!!

CSR(Client-Side-Rendering) 환경에서 신나게 Emotion을 사용하다가, Next.js SSR(Server-Side-Rendering) 환경에 아무 설정 없이 사용하면 생각보다 많은 문제가 발생한다. 오늘은 그 문제에 대해 얘기해본다.

Emotion과 Tailwind를 함께 쓰는 이원화 전략, 과연 이론적으로도 맞는 선택일까? 두 라이브러리의 차이부터 역할 분리 기준, 실제 코드 예시, 트레이드오프까지 정리해보았다.