전체 글189 [JS] event.stopPropagation()의 위험성 이벤트 전파를 막기 위해서 event.stopPropagation()을 많이 사용하곤 합니다. 주로, 모달과 같은 대화 상자를 만들 때 dimmed 영역(흐린 배경 영역)을 클릭하여 해당 모달을 감추고 싶은데, 그 영역을 포함하고 있는 컨텐츠를 클릭했을 때 이벤트 전파를 통해서 의도치 않게 닫혀버릴 때 사용할 수 있습니다. document.querySelector('html').addEventListener('click', () => { // 모달을 닫기 }); document.querySelector('#someMenus')?.addEventListener('click', (event) => { event.stopPropagation(); // 해당 요소 내부에는 도달하지 않도록 합니다. }); 당장은.. 2022. 12. 25. React memo를 사용하기 전에 리액트를 사용함에 있어서 여러가지 performance 측면의 개선 방법에 대한 글들이 많습니다. 그 중에서 많이 사용되고 있는 React memo에 대한 이야기입니다. 리액트 메모를 사용하기 전에 체크해볼 수 있는 몇 가지 사항들은 다음과 같습니다. production 빌드를 실행 중인지 확인합니다. (개발 빌드는 매우 느립니다.) 상태를 렌더링 트리에서 불필요하게 상속받고 있는지 확인합니다. React DevTools Profiler를 실행해서 리렌더링 되는 부분을 확인해보세요. (Highlight 옵션을 통해서 확인 가능) 만약에 비용이 비싸다면, 컴포넌트 자체를 memo()로 감쌉니다. 그리고 필요한 함수에 useMemo도 추가합니다. 그 외에도, 심각하게 느린 컴포넌트 환경은 많습니다. 그 때,.. 2022. 11. 13. 다크모드를 위해서 Context API보다 CSS 변수를 활용하세요 다크모드를 관리할 때 일반적으로 Context API를 통해서 전체 테마를 바꾸는 ThemeProvider 기법을 많이 사용하게 됩니다. 여전히 CSS-in-JS는 최근 몇 년동안 CSS 사양이 많이 발전하고 개선되고, 최신 브라우저들도 발전함에 따라(Internet explorer의 변명은 더 이상 충분치 않습니다.) ThemeProvider를 사용하지만 많은 사용 사례에서 많은 이점만 있는 것이 아니라는 것을 깨닫게 됩니다. 이모션을 사용한 ThemeProvider의 예시를 살펴보시죠. import * as React from "react"; import styled from "@emotion/styled"; import { ThemeProvider } from "emotion-theming"; co.. 2022. 10. 30. 13가지 랜딩페이지 디자인 팁 오늘은 랜딩페이지 디자인에 있어서 13가지 팁이 있는 좋은 글이 있어 소개 드리려고 합니다. 01. 텍스트가 있는 이미지에 색상 오버레이 사용 02. 공간의 여백을 과도하게 사용하지 말 것 디자이너는 공간이 있는 디자인을 좋아하며 웹에서 더 많은 공간을 확보해야 한다는 의견을 항상 듣습니다. 그러나 함께 속한 요소 사이에 과도한 공간이 있으면 눈은 연결된 요소 위로 쉽게 흐르지 않고 더듬거리고 빈 공간에서 헤매게 됩니다. 03. 무리하게 장황한 워딩을 사용하지 말 것 웹사이트 분석을 본 사람이라면 누군가의 관심을 끌 시간이 매우 적다는 것을 알고 있습니다. 요점을 파악하세요. 04. 텍스트만 있는 레이아웃도 시각적으로 매력적이어야 합니다 랜딩 페이지의 텍스트 전용 섹션은 디자인하기 어려울 수 있습니다. .. 2022. 10. 30. 이전 1 2 3 4 5 6 ··· 48 다음
