슬기로운 땅콩 마을

참고: 해당 게시글에서 추가적인 정규식들이 추가될 수 있습니다. (얼마든지 댓글에 원하는 정규식을 말해주세요.)이메일/\w+@\w+\.\w+/g 아이디아래 정규식은 _와 알파벳 소문자와 대문자 및 -를 허용합니다.// Aa 또는 Aa-Bb/^\w+(-\w+)*$/g아래 정규식은 _와 대문자를 제외한 알파벳 소문자 및 -를 허용합니다.// a 또는 a-b/^[a-z0-9_]+(-[a-z0-9_]+)*$/g 전화번호 (하이픈)/^[0-9]{2,3}-[0-9]{4}-[0-9]{4}/g 링크/^https?:\/\/\w+(-\w+)*(\.\w{2,})+(\/[^\s]*)?$/g

오늘도 평소와 다름없이 내 깃허브에 소중하게 관리되고 있는 나의 애기들, 패키지들을 유지보수하기 위해 코드를 살펴보던 중, animatable-js의 Ticker 클래스가 눈에 띄었다. 이 클래스를 자세히 살펴보던 순간, 자바스크립트의 requestAnimationFrame 함수를 빈번하게 호출하면 브라우저의 렌더링 동기화 과정에서 상당한 성능 비용이 발생하지 않을까 하는 작은 의문이 들었다. 물론 자바스크립트 내에서 콜백 함수를 등록하고 호출하는 행위 자체는 그리 큰 비용이 들지 않는다. 하지만 requestAnimationFrame은 브라우저가 제공하는 API이며, 이를 통한 렌더링 동기화 과정에서 발생할 수 있는 여러 가지 성능 이슈의 가능성을 고려해 보았다.이러한 고민 끝에 실제로 테스트를 해보는..

웹에서는 Flutter 또는 Jetpack Compose와 달리 레이아웃 계산에 직접 관여하거나 제어할 수 없습니다. 즉, 자식의 크기를 직접 계산하거나 그려지는 요소의 위치를 정의하는 로직에 직접적으로 관여할 수 없습니다. 대신, CSS 스타일이나 JavaScript를 사용하여 레이아웃에 간접적으로 영향을 미칠 수 있습니다. 레이아웃 계산을 변경하거나 특정 요소의 크기나 위치를 조정하는 경우, 브라우저는 이러한 변화를 반영하기 위해 Reflow를 수행해야 합니다. Reflow는 레이아웃을 다시 계산하는 과정으로, 빈번하게 발생하면 성능 저하를 일으킬 수 있습니다.  이 Reflow의 경우, 레이아웃의 크기와 위치를 참조하거나 요소의 돔 구조가 변경되면 수행되는 레이아웃 단계입니다.따라서, 여러 번의 레..

자바스크립트 입문자 또는 문법에 그리 관심이 존재하지 않는 분들 위해서 해당 글에서는 알면 자바스크립트에서 유용하게 사용될 수 있는 문법들에 대해 소개합니다. 옵셔널 체이닝 (Optional Chaining) 객체나 배열에서 특정 속성이나 요소에 접근할 때, 해당 속성이나 요소가 존재하지 않아도 별도의 예외를 발생시키지 않고 undefined를 반환하는 기능을 제공하는 연산자입니다. 참고로 해당 연산자는 다트에서도 존재하며 별도의 null-safe 로직을 생략할 수 있는 특성때문에 많이 애용되는 연산자 중 하나입니다. 해당 연산자의 예시 코드를 보도록 하겠습니다.const child = parent?.child;child 속성이 nullable이라는 가정하에 속성 값을 참조하는 경우 . 대신 ?. 연산자..

그래프를 만들거나 여러 복잡한 구조들이 빠르게 렌더링되어야 할 때 cavnas 요소를 사용하여 js에서 이를 제어합니다. 이러한 특성 덕분에 js에서 제어하는 canvas 요소 특정상 css 속성을 사용하지 못합니다.해당 개발 환경에서 선형 또는 감속/가속(curved) 애니메이션을 구현할 때 매우 유용한 패키지를 만들었습니다. NPM animatable-jsThis package allows easy and light implementation of linear or curved animation in javascript. `Especially suitable in a development environment on web components or canvas.`. Latest version: 1.0...