D.JOUNG

개요최근 렌더링 최적화를 공부하면서 리플로우와 리페인팅 방지에 각별히 신경을 쓰게 됐다. 리팩토링하는 코드 내에서 getBoundingClientRect() 메소드를 자주 호출하는 부가 있는데, getBoundingClientRect()는 아래 포스팅에 정리되어있는 리플로우 유발 메소드 중 하나다.https://gist.github.com/paulirish/5d52fb081b3570c81e3a What forces layout/reflow. The comprehensive list.What forces layout/reflow. The comprehensive list. - what-forces-layout.mdgist.github.com 그런데 성능탭을 열어 타임라인을 살펴봐도 성능에 문제가 될 정도로..

자바스크립트는 클릭, 드래그, 키(KEY) 다운 등 사용자가 HTML DOM과 상호작용 할 수 있는 다양한 브라우저 이벤트를 지원하고 있다. 그 중 html 태그의 onClick 속성과 onContextMenu 속성은 각각 클릭과 우클릭 이벤트 발생 시 작동할 이벤트 핸들러를 속성값으로 갖는다. 이벤트 버블링과 이벤트 캡쳐링은 DOM 트리를 타고 전달되는 이벤트 객체의 이동 단계로, 이벤트 객체는 캡쳐링 단계인지 버블링 단계인지에 따라 부모 혹은 자식 요소로 전파된다. 쉽게 생각해서 각 요소에서 이벤트가 발생하는 순서라고 이해해도 괜찮을 듯 싶다. 웹3(w3.org) 공식 사이트에서는 이벤트 객체의 전이 단계와 순서를 다음과 같이 정의하고 있다. (1) 캡쳐링 단계 (Capture Phase) 에서는 w..

정규식이란? 정규 표현식, 줄여서 정규식은 어떤 문자열에서 원하는 특정 문자(열)을 탐색하는 방법이다. 반복문과 각종 string 메소드를 사용하면 정규식 없이도 원하는 문자를 찾을 수 있겠지만, 정규식을 사용하면 훨씬 길이를 단축하고 가독성을 높일 수 있다. 공식 문서에서는 '문자열에서 특정 문자 조합을 찾기 위한 패턴'이라고 설명하고 있다. 정규식은 웹 개발 시 데이터로부터 원하는 정보를 추출할 때 유용하게 활용할 수 있으며, 로그 분석 도구인 GA4와 Looker studio의 필터에도 정규식을 활용할 수 있는 옵션이 존재한다. (정규식을 할 줄 안다면 이 두가지 도구에서 필터를 훨씬 간편하게 이용 가능해진다.) 정규식을 만들고, 결과를 리턴받는 법 javascript에서 정규 표현식을 만드는 방법..