[FE] 스타일링 방법 선택 및 이유

⚙️ 최종 스타일링 라이브러리 결정

css-in-js 라이브러리 중 하나인 Emotion 의 emotion css prop 방식 사용

📘 css modules vs css-in-js

css를 적용하기 위해 css modules 방식과 css-in-js 방식 중 css-in-js 선택

1. 동적 스타일링 용이
   • props에 따라 조건부로 스타일링을 줄 때 용이
   • 자바스크립트로 계산된 값을 스타일에 적용하기 쉬움
   • 동적 스타일링의 역할을 css 에게 위임하여 관심사 분리
2. 테마 적용 용이
   • 단일 변수값으로만 가져올 수 있는 css와 달리, 객체 형식으로 관리하여 스타일을 표현할 수 있음
   • 추후 다크모드, 다국어 등을 고려했을 때 확장성 높음

📘 Emotion css prop vs Emotion styled

emotion 라이브러리의 css prop 방식과 styled 방식 중의 Emotion css prop 선택

1. 어떤 태그인지 명시적으로 확인 가능

   • ❌ 불편함 : styled 방식을 사용했을 때 네이밍을 통해 태그를 유추하기 어려웠음
   • ✅ 해결 : 협업할 때 다른 사람의 코드를 읽을 경우 어떤 태그를 사용했는지 직관적으로 알기 쉬움

2. 컴포넌트와 HTML 태그 파악 용이

   • ❌ 불편함 : 코드의 일관성을 지키기 위해, 스타일이 없어도 불필요한 styled 컴포넌트로 만들었음
   • ✅ 해결 : 컴포넌트, 스타일이 적용된 HTML tag, 스타일이 적용되지 않은 HTML tag 를 구분하기 용이함

     ❌
     <S.namesWrapper>
     	<S.title>마루</S.title> // 스타일이 적용된 HTML tag
     	<S.Content>썬데이</S.Content> // 스타일이 적용되지 않은 HTML tag
     	<S.Content>포메</S.Content> // 스타일이 적용되지 않은 HTML tag
     </S.namesWrapper>
     
     ⭕
     <section css={namesWrapper}>
     	<span css={title}>마루<span>
     	<span>썬데이<span>
     	<span>포메<span>
     </section>

3. 재사용성 높음

   • ❌ 불편함 : styled 방식도 재사용 가능하지만 형태가 제한적
   • ✅ 해결 : 필요한 부분만 객체 단위로 스타일을 재사용하기 쉬움

📘 Emotion vs styled-components

css-in-js 중 보편적인 Emotion과 styled-components 중 Emotion 선택

1. 다운로드 수가 많음

   • 사용자가 많을수록 커뮤니티와 생태계가 넓다는 의미이기 때문에, 래퍼런스를 찾거나 다양한 오류들을 해결했을거라고 판단할 수 있음

2. 압축된 크기 기준으로 파일 사이즈가 작음

   • css prop 만 사용할 경우 @emotion/react 만 다운로드받기 때문에 파일 사이즈 측면에서 이점을 얻을 수 있음 (11KB → 7.9KB)
   • 또한 모바일 환경을 타겟으로 했을 때 네트워크가 느린 경우가 자주 발생하기 때문에, 다운로드 속도 측면에서 이점을 얻을 수 있음 (220ms → 158ms)