2022/03/18 2

[css] z-index, stacking context(쌓임 맥락)에 대해서 알고있나요?

z-index의 css 속성은 개발자들이 애용하는 속성이라고 생각합니다. 그러나, 많이 사용되는 개념이지만 정확하게 알고 있는 개발자는 생각보다 적은 것 같아서 해당 개념에 대해서 서술하려고 합니다. z-index 어떤 것일까? z-index CSS 속성은 위치 지정 요소와 해당 하위 항목 또는 플렉스 항목의 z 순서(높낮이)를 설정합니다. 더 큰 z-index 가 있는 겹치는 요소는 더 작은 z-인덱스 요소보다 높게 위치합니다. z-index 가 100과 99가 있으면 정확하게 100 레벨에, 99 레벨에 위치할까요? 정확하게는 상대적인 개념입니다. z-index에는 stacking-context(쌓임 맥락)이 존재 합니다. 쌓임 맥락에 대해서 알아봅시다. Stacking Context Stacking..

Web/techTalk 2022.03.18

[React] Atomic, Container Presenter 어떤 디자인패턴을 써야할까?

패턴에서는 세부 사항은 해당 글에서 자세하게 다루지 않을 예정입니다. 편의를 위해서 Container Presenter패턴은 PC라고 불러 얘기할 예정입니다. 추가적으로 리액트에서는 커스텀 훅이라는 마법이 있어 모든 단점을 보완할 수 있다고 생각하나, 두 패턴의 장단점을 비교하기 위해 커스텀 훅의 존재는 잠시 배제할 예정입니다. Container Presenter React의 대가인 Dan Abramov가 2015년에 제시했던 디자인 패턴입니다. Container에서 논리적인 연산, Presenter에서 렌더링되는 뷰를 담당하고 있습니다. Atomic 디자이너 Brad frost가 2013년 즈음에 창시해낸 방법으로 Atom -> Molecules -> Organisms -> Templates -> Pa..

Web/techTalk 2022.03.18