시간이 왜이렇게 빠르게 가지? 벌써 8주차가 다 지나갔네. 이번 주는 CSS-in-JS 라이브러리 styled-components를 다뤘는데, 확실히 props로 다이나믹하게 스타일을 변경하는 기능은 강력하고 편리하다. 다만, 적당한 갯수의 프로퍼티를 가지고 범용적으로 사용하고 싶었는데 dark theme를 설정하다보니 오히려 지엽적으로 theme 프로퍼티를 지정하게 되더라.. (예를 들면, 어떤 버튼의 dark theme 텍스트는 흰색인 반면, 다른 버튼 텍스트는 옅은 회색이라 AButton: "#fff", BButton: "#E2E2E2" 이렇게 지엽적으로 작성하게 됨) 근데 이 부분은 CSS-in-JS 뿐만 아니라 CSS-in-CSS에서도 발생하는 부분이므로, 디자인 시스템을 구축할 때 프로젝트 구성원과 많이 소통하여 틀을 잘 잡아나가야 할 듯 하다.
회고
Keep
- 원리의 이해없이 정리만 하는 것은 기억에 남지도 않고 하등 도움이 안된다고 생각하기 때문에, 고통스럽지만 이 기술은 왜 쓰며 특징과 장/단점에 대해 찾아보고 데브노트를 작성하고 있다. 이 점은 잘하고 있는듯 계속 유지해 나가자.
(잘 정리했다고 칭찬받음)
Problem
- 앞자리가 3이 되니까 그런가.. 하루에 여러가지 학습 병행이 힘들다..
- 이번 주에 운동하다가 승모근에 쥐가 나서 너무 아파가지고 잠을 잘 못잤다. 그래서 그냥 안자고 새벽까지 코딩하다 보니 컨디션도 안좋고 수면 패턴이 완전 망가졌다.
Try
- 뇌과학에 의하면 한가지에 몰두하다 보면 뇌의 사고가 굳는다고 한다. 여러가지를 공부하는게 도움이 된다고 하니 코딩도 일일 학습량을 산정해야겠다.
(코딩은 딱히 제한을 안두고 있었다.. 재밌자너) - 잠을 잘 자는게 한 주 컨디션을 좌지우지 한다. 수면 관리 잘하자..
끄적끄적
- styled-components를 사용할 때 babel 플러그인을 같이 설치하는 이유
1. 초기 SSR이후 CSR이 발생하면 서로간에 class name이 불일치하는 현상이 발생 해 스타일이 적용되지 않는 현상이 발생할 수 있다.
이는 babel이 일관된 class name을 생성해 문제를 해결한다.
2. FOUC (Flash Of Unstyled Content)
페이지가 렌더될 때 순간적으로 마크업된 그대로의 모습이 보이는 현상
CSR은 브라우저가 비어있는 HTML 문서를 받은 후 JS 번들을 가져와 동적으로 DOM을 렌더링하는데, 이는 초기 렌더링 속도 저하를 가져옴.
SSR은 pre-rendering된 HTML 문서를 Clinet Side로 제공하고 HTML 코드와 JS 코드를 매칭하는 Hydration을 수행한다. (초기 렌더링 시간 단축 효과)
SSR에서 styled-compnenets를 사용할 경우 DOM이 먼저 렌더링 된 후, JS 구문 분석 과정이 필요하기 때문에 동적으로 스타일 정보가 추가되는 구조는 느릴 수 밖에 없다. 때문에 FOUC가 발생하는 것
이는 Babel이 SSR 할 때 스타일 시트를 미리 생성해 문서에 주입하므로 컨텐츠가 정상적으로 렌더링 된다.
- CSS-in-JS
자바스크립트를 사용해 스타일을 지정하는 방법이므로 결국 JS 번들사이즈를 증가시켜 컴포넌트가 렌더링될 때 런타임 오버헤드를 유발함.
즉, JS에 css 코드를 추가하므로 페이지 로딩 시 JS 구문 분석 과정이 필요하기 때문에 페이지에 유저 인터렉션이 잦은 경우라면 .. 사용을 고려해 볼 필요가 있다.
