TIL 검색 결과

해당 글 108건

TIL 2022-05-28 Goodbye, useEffect

https://www.youtube.com/watch?v=HPoC-k7Rxwo 요거 봣음 useEffect(()=>{ },[]); Imperative하게는 어떤 일이 일어나면 effect를 실행한다지만 declarative하게는 -> 어떤 일이 일어나면 -> state를 변화시키고 -> 어떤 state를 변화시켰는지에 따라서 -> 이 effect는 일어난다 -> 근데 또 어떤 조건이 참일때만 -> 그리고 이거 일어나면 React가 (concurrent rendering)때문에 재실행할수도 있음 이라는 복잡한 로직을 갖게 된다. React 18에서는 strict mode일때 useEffect를 두번 실행한다. 18에서는 effect를 발생시키는 component를 mount하고, 이를 가상으로 cleanu..
TIL 2022. 5. 28. 21:39

TIL 2022-05-21 Abstract Factory

문제점 연관된 제품의 그룹(패밀리)이 있음. 의자,탁자,소파가 하나의 그룹으로 있다고 하자... 이 그룹들은 바로크풍, 르네상스풍, 등... 여러 컨셉을 가질 수 있다고 하자. 이떄 각각의 가구들을 생성해 컨셉을 일치시킬수 있는 방법이 필요함... 의자 소파는 바로크풍인데 탁자만 르네상스 풍이면 NO! 또한 새 제품군을 출시할떄 기존 코드를 건드리지 않는 방법으로! 르네상스 ,바로크 풍이 아니라 조선풍, 신라풍 등이 추가되도 코어 코드를 건드리지 않는 방법을 써야함 해결책 Abstract Factory! 먼자 각자 제품에 대한 interface를 생성한다. 그리고 각 제품군의 종류에 맞는 생성로직들의 목록의 인터페이스인 abstract factory를 선언한다. 이 abstract factory는 이전에..
TIL 2022. 5. 21. 23:22

TIL 2022-05-17 Web Page Transition

IOS, 안드로이드 등의 네이티브 앱들은 페이지간의 Transition이 굉장히 자연스러운데, web에서는 click and pop의 형식으로 페이지 이동하는 경우가 많아서 아쉬움! 이런 페이지간 Transition은 효과를 통해 각 페이지가 어떠한 관계를 가지고 있는지 등을 알려줄수 있는 효과적인 방법인데 이거를 하기 어려움. 각 페이지 간의 transition은 web에서는 불가능하지만 SPA를 통한 In-page transition은 가능은 하지만 복잡하다. Chrome Canary부터 지원하는 In-page transition api는 각 페이지간의 transition을 도와줌! In-page transition의 목표는 각 페이지 이동은 CSS를 통해 단순하게 설정할수 있으면서도, 동시에 자바스..
TIL 2022. 5. 17. 22:59

TIL 2022-05-14 State of CSS 보기

https://www.youtube.com/watch?v=Xy9ZXRRgpLk 요거 봤다! Cascade Layer 마지막으로 로드된 스타일이 이전 스타일을 덮어쓰기에 CSS의 로드 순서가 매우 중요함 @layer를 통해서 entry file은 레이어와 레이어의 순서를 시간 상관없이 미리 정의할수 있음. style override importance를 지키면서 로드 순서를 지키기 위한 오케스트레이션이 필요없어짐 CSS Layer에서 0,1 레이어로 나눠져 먼저 라이브러리가 로드되고, 그 다음 각 컴포넌트들이 로드되어 컴포넌트들이 이 스타일을 덮어쓸수 있는것이 보장됨. Subgrid grid 내부의 grid는 상위 셀이나 그리드라인에 맞게 정렬되지 않았음. 원래 디자이너들은 여러 그리드들을 생성에 항목들을..
TIL 2022. 5. 14. 22:49

TIL 2022-05-10 React Generic FowardRef, typeguard

function isFish(pet: Fish | Bird): pet is Fish { return (pet as Fish).swim !== undefined; } ForwardRef으로 값을 넘겨줘야할떄 제네릭이 들어간 값이 있으면 어떻게 해야할까 function ClickableListInner( props: ClickableListProps, ref: React.ForwardedRef ) { return ( {props.items.map((item, i) => ( props.onSelect(item)}>Select {item} ))} ); } // As an argument in `React.forwardRef` const ClickableList = React.forwardRef(Clickable..
TIL 2022. 5. 10. 22:32

TIL-2022-05-09 Stacking Context와 Z-index 없이 Stacking

Stacking Context Stacking Context는 z-축으로 HTML 요소들이 쌓이는 개념을 의미한다. 쌓임 맥락은 - 문서의 root document() - position이 absolute, relative인 z-index가 auto가 아닌 요소 - position이 fixed, sticky인 요소 - z-index가 auto가 아닌 grid, flex 컨테이너의 자손 - opacity 오직 부모 컨테이너만 영향을 줌 각 쌓임 맥락은 독립적이라 쌓고 나서는 아예 부모 컨테이너에 넣어버림 모든 요소가 쌓임 맥락을 가지고 있는건 아니라 ..
TIL 2022. 5. 9. 23:57