CSS, SCSS, Styled-components 다 써보고 후기

CSS

 

ㅋㅋㅋㅋㅋㅋㅋ

공부 경로: 기초라 가장 먼저 배움 (선택권이 없음)

단점: 하다보면 페이지가 미친듯이 길어짐

처음에 시작할 때는 잘 모르고 클래스명 생각나는대로 맘대로 막 지어버리기도 하는데 

후술할 다른 것들을 한번 접해보면 이름 짓기의 중요성을 깨닫게 된다.

사실 클래스명을 규칙있게 지을 때 내 기준에서는 편했다.
(만든 것들이 한 페이지 안에서 한눈에 보이니까)

 

사실 내 기준에서는 주석을 잘 달아주면 그나마 편하게 쓸 수 있다고 생각한다.

아래 다른것들만 계속 쓰다보면 가끔 CSS가 그립다

 

 

 

SASS(SCSS)

 

이 글에서 말하는 것은 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을 정의해줘야 한다....

 

파란 박스 부분이 Typescript 영역

그리고 컴포넌트로 커스텀 태그를 생성하다보니까 
아무리 편해도 여전히 
구조같은걸 한눈에 보기 힘든건 사실임

 

아 그리고 요소들 자동완성 안됨 ㅅㄱ 그래서 익스텐션 새로 깔야아 함

깔면 해결~!

 

---

css에서 scss, styled-components를 거칠 수록
네이밍 규칙을 정하는 것이 상당히 중요함을 느끼게 됨
(누군가가... 미리 알려줬더라면 좋았을텐데...)

 

그리고 CSS 작성할때 에디터 페이지 2분할을 잘 썼었는데,

점점 아래로 갈 수록 분할 안쓰게 됨 (나만 그럴수도 있음)

 

 

 

배우는게 거의 독학이라서 어디 한탄할 곳도 없다...