CSS, SCSS, Styled-components 다 써보고 후기
CSS
공부 경로: 기초라 가장 먼저 배움 (선택권이 없음)
단점: 하다보면 페이지가 미친듯이 길어짐
처음에 시작할 때는 잘 모르고 클래스명 생각나는대로 맘대로 막 지어버리기도 하는데
후술할 다른 것들을 한번 접해보면 이름 짓기의 중요성을 깨닫게 된다.
사실 클래스명을 규칙있게 지을 때 내 기준에서는 편했다.
(만든 것들이 한 페이지 안에서 한눈에 보이니까)
사실 내 기준에서는 주석을 잘 달아주면 그나마 편하게 쓸 수 있다고 생각한다.
아래 다른것들만 계속 쓰다보면 가끔 CSS가 그립다
SASS(SCSS)
공부 경로: css를 마구 하다가 뭐???? 훨씬 더 어썸한게 있다고? 하면서
검색하다가 codepen 사이트 구경하다보면 외국인들이 죄다 쓰길래
이게 뭐임? 하면서 자연스럽게 공부하게 됨
단점: 폴더 쪼개다가 헷갈려버림, 뭐 찾을때 헤멤
근데 변수명이나 mixin이라고 하는
자주 쓰는 속성의 집합같은 것도
파일을 쪼개서 몰아넣기가 가능해서
장점이라고도 볼 수 있다.
최장점은 CSS처럼 늘어지는 클래스명을 쓰지 않아도 된다
ex) CSS였으면
.김수한무
.김수한무 거북이
.김수한무 거북이 두루미
.김수한무 거북이 두루미 삼천갑자
.김수한무 거북이 두루미 삼천갑자 동방삭
이렇게 이름이 길어졌을 건데
SCSS는
.김수한무 {
position: relative;
& .거북이{
position: absolute;
& .두루미 {
color: white;
}
}
}
이런식으로 안에다가 넣어서 포함관계로 써 버리는게 가능함
계층구조를 한눈에 알 수 있음(편함)
사실 SCSS는 띄어쓰기 4번 해야되는 규칙이나,
이러저러한 엄격한 규칙이 존재하긴 하는데
에디터의 자동정렬기능이 워낙 개꿀이라 그런거 신경 안쓰고 편하게 이용할 수 있음
그리고 유지보수가 편하다는데 나는 아직 대형 프로젝트를 경험해보지 않아서 잘 모르겠음
해본결과
원래 기본이 HTML, CSS, Javascript 조합이라면,
컴포넌트로 쪼개는 특성이 있는
React + SCSS + Typescript 이렇게 잘 어울리는 것 같음
예를들어
뭔가....html+SCSS+JS 하면.............
SCSS만 폴더가.... 7개로 쪼개진다던가...하면
좀..어색할 것 같긴 함
styled-components
공부 경로: react를 공부하다가 검색을 하다보면
국내 블로그들이 다들 styled-components 이야기를 하고있음
읽어보니까
뭐? CSS파일 안쪼개도 JSX에다가 걍... 쓸수있다고?
인라인으로 쓰는거 아니고?
하면서 당장 함
파일과 폴더를 쪼개는 것에 환멸을 느낀 누군가가 만든게 분명함
맨날 CSS만 하다가 처음에 접하면 매우 어리둥절 할 수 있음 (CSS in JS)
어떻게 CSS파일과 JS가 융합이 됨? 하면서
직접 하다보면 신기하다고 느낌
게다가 SCSS 안깔아도 SCSS처럼 포함관계 쓸 수 있음
단점: 처음에 쓰는 방법을 잘 모르고 쓰다보면 뭔가 지저분하다고 느낌
한 파일 내에다가 태그 하나씩을 계속 컴포넌트로 생성하다보니까
내용도 길어지고 변수명 생각하는것도 빡셈
(이거는 props 전달하는 법 알면 어느정도 해결됨)
props를 전달하면 중복되는 태그는 딱 한번만 작성하고, 내용 다른 부분만 슥 바꿔줄 수 있음
typescript를 같이 쓴다면 어김없이 props에 type을 정의해줘야 한다....
그리고 컴포넌트로 커스텀 태그를 생성하다보니까
아무리 편해도 여전히
구조같은걸 한눈에 보기 힘든건 사실임
아 그리고 요소들 자동완성 안됨 ㅅㄱ 그래서 익스텐션 새로 깔야아 함
css에서 scss, styled-components를 거칠 수록
네이밍 규칙을 정하는 것이 상당히 중요함을 느끼게 됨
(누군가가... 미리 알려줬더라면 좋았을텐데...)
그리고 CSS 작성할때 에디터 페이지 2분할을 잘 썼었는데,
점점 아래로 갈 수록 분할 안쓰게 됨 (나만 그럴수도 있음)
배우는게 거의 독학이라서 어디 한탄할 곳도 없다...