스타일트론을 써야하는 이유?
1. css코드 경량화, 중복제거 데드코드 제거
빠른가..? 안빠른가..?(css자체를 읽어가는데는 느려도 전체 렌더링타임은 줄어드나..?)
-
스타일 컴포넌트 외에 의존성이 적다, 직관적 css
-
다이나믹 스타일링에서
상태와 프롭들을 곧장 스타일의 결과값으로 빼야하는데 이에 용이하다.
This is difficult with classic CSS since you cannot easily pass variables from JavaScript to CSS.??
css in css
css 모듈화하여 사용
이점 - 중복 및 관리의 위험성 감소, 네이밍 규칙 간소화,
단점 - 많은 파일 관리
css in js
이점 - 문서레벨이 아닌 컴포넌트 레벨로 추상화
현재 사용중인 스타일만 dom에 포함
코드 경량화
단점 - 러닝커브, 새로운 의존성, css in css에 비해 느림
브라우저의 렌더링이 StyleSheet와 Script로 나누어 병렬처리 되던 것이 오직 Script로 이루어짐에 따라 그만큼 속도가 느려집니다.
또한, CSS가 먼저 제공되어 렌더링 시 형태가 잡혀있는 기존 방식에 비해 컴포넌트가 렌더링 되며 형태가 잡히기 때문에 원형의 모습이 잠깐 노출(FOUC) 됩니다. 이는 사용자 경험을 저하시킵니다.
vendor prefix
궁금증
1. css-in-js 사용이 cossom 에서 하는게 없고 js가 돌때 만들어 지는게 맞는지?
1-1. css in js 와 css in css 렌더링과정에서 달라지는 것?
-
encapsulation과 속도 성능중에 무엇이 우선시?
https://styletron.org/concepts#style-object
-> Since JS is used instead, it's less efficient but preserves the component encapsulation. -
상황마다 다른걸 써야하는지, 아님 맞춰야 하는지
const fontFamily = instance.renderFontFace({
src: "...",
});
styled
create a styled component
withStyle
style composition 상속받고 요소들을 추가하며 사용
withTransform
withStyle과 차이? -> 변경할게 더 많을 떄?
style param으로 받아서 다이나믹하게 변경할 때에?
withWrapper, createStyled 의 목적..?
-
무조건 스타일 반복될텐데
useStyletron 쓰는게 적합한가? -
Props Filtering
lowercase로 하면 Dom에 appear한다?
어떤게 Dom에 전달되어야 하고 아닌지? 구분해야 하는지
링크텍스트 -
next.js에서 사용할 때에
Client - Client-side engine class
Server - Server-side engine class 이 두가지를 모두 사용하여야 하는지..?
왜 ..?
- Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다.
Frontend 역량강화 미팅 (Styletron)
스타일링에서 $을 붙이는 것?
Css js에서 쓰는 프롭이고, html element로 넘기지 마라는 룰이 생김
이전에 규칙이 없었을 때에는 잘못넘어가는 에러가 있었음
Displayname - develop 모드일 때 디버깅 용으로 보여주는 플러긴 적용
장점은, 다이나믹 임포팅을 할 예정인데, 부스팅 속도가 빨라진다.
필요한 부분만 css가져와서 사용하기 때문에
shadowroot
scoped styling (표준이 따라오고 있음)
Lit dev 나중에 살펴보기 구글 시작한 spa프로젝트
하나의 프로바이더에 다른 컨셉이 섞이면 안됨
관련없는 참조값이 변경됐을 때에 리렌더를 치는 상황 발생
리액트쿼리 - 리모트에있는 데이터베이스와 로컬 데이터 싱크를 맞추기 위함
리코일 - 전역 상태관리 (리액트쿼리 쓰면 쓸 일이 별로 없음)
트리 불문하고 유저정보나 특정 정보 가져오고 싶을 때에 리코일 쓸 수있음
zustand 라이트하게 글로벌스테이트 쓰고 싶을 때에
페이지소스보기 -> 받아온 html그대로 보여줌
완벽하게 같은 마크업이 보이면 ssr
BEM
트위터 - react native를 웹화 아토믹하게 클래스네이밍 되어있음
스크래퍼 - 다른 html 가져와서 변형 등
Mangler webpack 플러그인 (난독화)
경량화에 주로 사용 - http요청 주고받을 때 용이
Child Combinator Children을 바로 사용할 수 없고 indexing할 수 없기에 다음과 같이 사용해야 함.
React cloneElement 찾아보기
with 들어간 것들 트레이드오프 성능저하
객체와 객체 병합하는 것 등
딥머징은 특히 비용이 비쌈
server, client 별도 엔진을 사용한다.
예를들어, server에서 생성한 클래스네임 그대로 유지해서 client로 넘기는 작업등이 수행된다.
브라우저 성능개선 방법 찾아보기
스타일트론을 사용해도, 기존 css를 임포트해서 사용하는 방식과 렌더링 방식이 변하지 않음.
언제 트리거를 시켜 스타일태그를 혹은 스크립트태그를 읽게 하냐, 어떻게 빠르게 렌더를 실행시키느냐가 중요
anti-pattern
js 객체 순회하는 것은 애초에 순서가 보장되지 않는다.
entries, keys, for in 등 루프를 도는 것들
for in 문에 프로퍼티? 프로토타입? 들어오는것 확인?
이전에 사용된 스타일은 스타잁론 엔진에 쌓인다?
그래서, 다음 컴포넌트에서 재사용된다면 마운트되기 전에 이미 생성된 클래스가 붙게됨
그래서 스타일이 정의된 순서대로 적용이 안될 수 있다.
데스크탑부터 먼저하면 화면이 작아짐에 따라 버려지는 css 많이 생김
모바일부터 먼저하면 좋음. 미디어쿼리 쓰지 않고 브테이크포인트 적용 가능하다.
다음 스터디까지 공부할 내용 : reactQuery - guide and concept - dependent query
baseweb 유틸리티 읽기, 가이드
