CSS 전처리기
- CSS Preprocessor
- 자신만의 특별한 syntax를 가지고 CSS를 생성하도록 하는 프로그램
- 태생적으로 기존 css가 가질 수 있는 불리한 점 해결 위해 탄생
- CSS 를 확장하기 위한 스크립팅 언어로 컴파일러를 통해 CSS 포맷으로 변환
Sass/SCSS
SASS: Syntactically Awesome Style Sheets
SCSS: Sassy CSS
특징
- Sass와 SCSS는 기능적으로 봤을때 유의미한 차이가 없으며, 문법적인 방식에서 차이가 있다. Sass와 SCSS의 핵심적인 차이는
{}(중괄호)와;(세미콜론)의 유무이다. - 셀렉터 중첩 기능으로 선택자를 중복사용, 과용하는 걸 줄일 수 있고 구조 파악에도 용이.
- 반복적으로 사용하는 값을 변수로 지정해서 일관적, 효율적으로 개발 가능.
- 조건문, 반복문, 함수 등 프로그래밍적 요소들을 지원.
- 웹에서 동작 가능한 표준 CSS로 컴파일해서 동작시킴(웹에서는 CSS만 동작)
- 변수/함수/상속 개념을 활용하여 재사용 가능
단점
- 디버깅의 어려움이 있음
- 컴파일한 CSS 파일이 거대해짐
- 작업이 크고 고도화 될수록 유지 보수에 더 많은 시간과 비용을 발생시킴
프레임워크
Material-UI
특징
- 처음부터 React로 만들어짐
- 구글 머테리얼 디자인을 기반으로 제작
- 자주 사용되는 기능/디자인들을 Component/API로 제공
- React로 개발을 할 때 다양한 UI를 쉽게 만들 수 있음
- 반응형 디자인을 만들 때 사용하기에 용이
단점
- 안드로이드 호환성의 제한으로 인해 다른 운영 체제에서는 사용하기 어렵다
- 성능 저하 발생 가능성
부트스트랩
특징
- 빠르고 쉽게 여러형태의 웹 페이지를 제작
- 반응형 웹사이트 개발을 위한 CSS, HTML, JS 프레임워크
- 반응형 디자인을 빠르고 손쉽게 만들 수 있다
단점
- 다른 프레임워크에 비해 굉장히 무겁다
- 커스텀이 번거로움
CSS-in-JS
styled-components
특징
- CSS를 컴포넌트 안으로 캡슐화(모듈화)
- JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
(Javascript 환경을 최대한 활용) - 자유로운 CSS 커스텀 컴포넌트를 만들 수 있음
- Sass 라이브러리 설치 없이 Sass 문법을 사용
- 네이밍이나 최적화를 신경 쓸 필요가 없음
- 코드 경량화
단점
- 빠른 페이지 로드에 불리, 느린 성능을 보여줄 수 있음
- 별도의 라이브러리를 설치해야 하므로 번들 크기가 커짐
- CSS를 줄 태그를 전부 컴포넌트로 만들어야함
참고
[React] CSS in JS 방법론 (feat. Styled-Component)
styled-components 개념 및 예시 | 기억보다 기록을
👩🏻💻✍🏻