들어가기 전에..

• 코드스테이츠 부트캠프에서 순수 CSS를 배우고, 스타일드컴포넌트만 계속 사용해서 이제는 순수 CSS보다 스타일드컴포넌트가 더 편하다..🥲🥲 정말 큰일...
  프리프로젝트와 메인프로젝트때는 시간에 쫓길...예정이라 스타일드컴포넌트를 아마 사용하지 않을까 싶다.
• 하지만 여유롭게 할 수 있는 솔로프로젝트(todolist, youtube프로젝트)에서는 POSTCSS와 Tailwind를 써봐서.. 너무 다행이다.
• 세가지 CSS를 써본 결과 Tailwind가 제일 익숙하지 않고, 적응이 안돼고, 스타일드컴포넌트가 제일 편하다.. 하지만 순수CSS만 능숙하게 사용할수 있다면, 나머지 라이브러리가 편하질 것같다..
  CSS공부와 HTML공부를 처음에는 중요하지 않다고 생각했는데, 제일 기본 중에 기본이라 생각하고 계속 연습하고 공부해봐야겠다.
• 부트캠프 솔로프로젝트에서 SCSS를 사용하던 분이 있던데, SCSS도 한번 공부해봐야겠다.

CSS 라이브러리 비교

CSS Module

• 성능
  • 순수 CSS
  • 클래스 이름을 빌드 타임 때 이름에 안정성을 보장
• 활용성
  • 어디서든 사용 가능
• 강점
  • 순수 CSS만 알아도 사용이 가능하다.
  • 그냥 순수 CSS를 사용하는 것보다 고립성과 독립성이 보장
    • 이름 충돌에 대한 스트레스가 적다.

Styled Components

• 성능
  • CSS in JS
  • 순수 CSS보다는 성능에 좋지 않음=> JS를 다 다운받아야 동작
  • 재컴파일 되어야 한다.
• 활용성
  • 컴포넌트를 기본으로 하기 때문에 React, React-Native에서 사용
• 강점
  • 고립성과 독립성이 보장
  • 자바스크립트를 통한 편의성
    • 단 한 파일 안에서 비지니스 로직과 스타일이 뒤엉킴

Tailwind

• 성능
  • 순수 CSS
  • 미리 정해진 클래스 이름들을 조립
  • 단, 사용법을 따로 익혀야 한다.
• 활용성
  • 어디서든 사용 가능
• 강점
  • 잘 정의된 디자인 시스템
  • 클래스 이름을 따로 짓지 않아도 됨
  • HTML태그를 쓰면서 스타일을 함께 쓸수 있다.
    • 다소 난잡해 보일수 있다. => 유지보수 힘들다..
    • 단 유지보수가 편한 방법이 있다.