공부방식
하루에 리스트업한 내용 1개씩 도큐먼트 정독 -> 2번씩 정독
공부내용에 관한 아키텍처 내용 확인 -> 모르는 내용 서치 및 질문
기록할 것
익명함수는 지양한다.
훅에도 함수명을 사용한다
-> 디버깅에 용이하기 때문에
react dev tools를 크롬설치하여 디버깅한다.
오늘 할 것
스타일트론 문서 정독하고
공유받은 리드미를 읽는다.
Styletron 의 장점? 특징?
styletron-react로 부터 styled 함수를 꺼내어 사용하면
각 값에 대하여 아토믹하게 자동 생성된다. 작명을 고민할 필요 없다.
생성된 이름은 항상 바뀐다.
만약, 테스트를 위해 안정적 셀렉터가 필요하다면 data-test-id attribute를 추가하자.
스타일트론은 스타일태그를 사용하여 미디어쿼리, 다른 셀렉터들을 사용 가능하다.
사용하지 않은 css를 진행하지 않는다. declaration-level deduplication
추가적인 컴파일러나 번들러 셋업이 불필요하다.
왜 리액트에 적합한가?
-컴포넌트 내에서 규칙들을 한눈에 볼 수 있다
기존 리액트에서 사용하던 css 방식은
상태값에 따라 달라지는 것은 명확하지만, 어떤 모습인지 알기 어려웠다. 외부에 스타일 정의가 이루어지며 어떻게 임포트 빌드되는지 과정 알기 어렵고 외부에 의존성이 컸다.
스타일트론으로는 컴포넌트의 상태값이 바로 버튼의 생김새를 조작한다
다이나믹 스타일링에서
상태와 프롭들을 곧장 스타일의 결과값으로 빼야하는데 클래식 css에서는 어렵다.
이유는 This is difficult with classic CSS since you cannot easily pass variables from JavaScript to CSS.??
support portability by using inline styles??
왜 portability가 올라가는가?
inline styles -> can't use pseudo selectors like :hover or media queries.
Styled Components
Styled function 을 활용
컴포넌트 형태로 스타일을 제공하며 인라인스타일과 비슷한경험, 단점 보완
That's useful if your styles need to be dynamic (derived from props).
스타일트론은 훅 제공 useStyletron
props filtering
lowercase로 하면 Dom에 appear한다??
$의 목적
useStyletron Hook
오버헤드(overhead)는 어떤 처리를 하기 위해 들어가는 간접적인 처리 시간 · 메모리 등을 말한다.
예를 들어 A라는 처리를 단순하게 실행한다면 10초 걸리는데, 안전성을 고려하고 부가적인 B라는 처리를 추가한 결과 처리시간이 15초 걸렸다면, 오버헤드는 5초가 된다. 또한 이 처리 B를 개선해 B'라는 처리를 한 결과, 처리시간이 12초가 되었다면, 이 경우 오버헤드가 3초 단축되었다고 말한다
const Button = styled("button", props => ({
padding: "0.5em 1em",
color: props.$isActive ? "#fff" : "#000",
background: props.$isActive ? "#276ef1" : "none",
fontSize: "1em",
borderRadius: "4px",
border: "1px solid #aaa",
":hover": {
background: props.$isActive ? "green" : "yellow"
}
}));deduplication ?
스토리지에 저장되는 데이터 블록을 비교하여 같은 데이터의 중복된 저장을 방지하여 저장 효율을 높인다.
데이터의 중복 여부를 판단하고 중복 제거된 데이터만 쓰기 위한 추가적인 연산이 필요하여 성능에 영향을 미치게 되므로 HDD 기반 스토리지에서는 사용하지 않고 올플래시 스토리지에 적용
e2e test ?
종단(endpoint)간 테스트로 사용자 입장 테스트
