슬기로운 땅콩 마을

플러터에서 Android, IOS 스크롤과 관련하여 성능, 유연성을 확보한 위젯과 여러 기능들을 제공하는 패키지를 구현하고 배포하였습니다.  flutter_appbar | Flutter packageThis package implements the flexible appbar behavior, And we pursue higher performance and responsiveness than the appbar generally provided by Flutter.pub.dev

HTML5 환경에서는 별도의 식별자를 가지고 동작을 모듈화시킬 수 있는 커스텀 요소(자세히 알아보기)를 정의할 수 있는 기능을 제공합니다.(e.g. 와 같은) 다만 TSX(Typescript JSX)에서는 별도의 타입 검사를 수행하기 때문에 JSX에서는 별도의 식별자 이름을 지닌 HTML 요소를 문제 없이 컴파일 할 수 있지만 TSX 환경에서는 별도로 이를 정의해 주지 않는다면 타입 검사에서 예외가 발생하게 됩니다. 이러한 이슈를 해결하는 방법은 매우 간단합니다.declare module "react/jsx-runtime" { namespace JSX { interface IntrinsicElements { "custom-element1": JSXCustomEleme..

늘 사람들은 말합니다.  자신의 권리를 침해하지 말라고. 이는 자유민주주의 사회에서 개인이 가지는 가장 기본적이고 당연한 권리 중 하나입니다. 하지만 현대 사회의 시스템은 종종 이러한 당연한 권리 주장조차 철저히 무시하며, 개인의 자유를 제한하는 사례를 만들어냅니다. 예를 들어, 가장 우리 사회에 가깝다고 볼 수 있는 우리나라인 대한민국의 게임 검열 사례를 살펴보겠습니다. 게임은 단순한 여가 활동을 넘어 현대인의 문화적 표현 방식이자, 창의적 상상력을 발휘하는 중요한 매체입니다. 하지만 이러한 게임이 "최소한으로 이루어져야 할 규제"를 넘어, 게임물관리위원회라는 정부 기관의 자의적인 결정에 의해 수많은 게이머들의 권리가 침해되는 일이 발생했습니다.이 과정에서 특정 게임은 "불특정 소수"가 그 게임에 대해..

참고: 해당 게시글에서 추가적인 정규식들이 추가될 수 있습니다. (얼마든지 댓글에 원하는 정규식을 말해주세요.)이메일/\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

이전 페이지의 모든 상태(스크롤, 상태)를 유지하는 리액트 라우터이면서 동시에 경량화되어 제작된 저의 자작 패키지를 소개하도록 하겠습니다. (Nesting Router 또는 Nested Routes 기능을 기본적으로 지원합니다.)   위 동영상에서 보셨다시피 전환 애니메이션도 쉽게 적용 가능하며 이전 상태, 즉 각 요소(DOM)마다의 고유한 스크롤도 유지하는 모습입니다. 다만, 원리는 DOM에서 그대로 이전 페이지의 모든 요소를 유지하지만 따로 화면에 렌더링되지는 않으므로 성능에 영향이 가지 않을 정도로 메모리 사용량이 살짝 높아질 수 있으며 추후 업데이트를 통해 특정 페이지만 관련 keepAlive 옵션 기능을 통해 DOM에서 유지되지 않아도 되는 페이지를 별도로 설정할 수 있도록 할 예정입니다.   ..

구글의 Material 디자인의 클릭 효과를 구현하는 플러터의 기본 내장 위젯인 Inkwell를 이용하여 앱을 구현한다면 마치 구글 Material를 흉내내는 느낌과 비슷한 느낌을 받을 수 있으며 약간 싼(?)티까지 나는 경험을 느낄 수 있습니다. 또한 다양한 제스처와 동작을 구성할 수 없고 다양한 옵션을 통한 커스터마이징도 사실상 불가능합니다. 따라서 2년 전에 저는 기존 Inkwell을 대체하는 위젯을 제작하여 이를 Dart 패키지 형태로 배포하였습니다. 사실상 이 패키지가 이제 버전 2.0.0을 막 넘겼으니, 이제는 안정적인 패키지로 인정받을 시기가 되지 않았나 생각됩니다.  자세한 내용은 아래 링크를 클릭하여 README.md을 참고하세요. flutter_touch_ripple | Flutter ..

평소처럼 한가롭게 개발을 이어가던 와중, React의 경량화 버전이라고 볼 수 있는 Preact에서 나의 자작 패키지 react_widgets의 타입 추론 기능(그에 따라 자동완성 기능이 제대로 동작하지 않음)이 Preact 기반 개발 환경에서 제대로 동작하지 않는다는 것을 깨달았습니다. 이에 대해 자세히 알아본 결과, Preact에서 CSS 속성이 정의된 인터페이스, 즉 CSSProperties를 Typescript에서 기본적으로 제공하는 유틸리티 타입인 Omit으로 랩핑한다면 어떤 이유인지 모르겠지만 CSSProperties의 모든 속성이 제외되는 현상이 발생한 것입니다. 이는 사실 대부분은 모두 아는 사실이겠지만 Omit 타입의 경우, 주어진 특정 속성만을 제외하는 기능을 수행합니다.Omit // ..

본론에 들어가기 앞서, 현대의 웹 개발에서 렌더링 최적화가 모바일 앱에 비해 상대적으로 중요하지 않게 느껴질 수 있습니다. 이는 모바일 앱과 웹 간의 명확한 차이점 때문에 그럴 수밖에 없습니다. 모바일 앱은 성능과 네이티브 기능 구현에 중점을 두며, 이러한 최적화에 대한 제약이 상대적으로 적습니다. 예를 들어, 플러터는 자체 렌더링 엔진인 스키아(Skia)와 임펠러(Impeller)를 사용하며, 웹과는 다른 레이아웃 계산 방식을 채택하고 있습니다. 객체 지향적으로 잘 설계되어 있어 커스터마이징이 용이하고, 자체적으로 최적화하기도 어렵지 않습니다. 다만, 이러한 장점에도 불구하고 최적화가 부족한 앱들이 간혹 존재하기도 합니다. 반면, 웹은 렌더링 성능보다는 주로 접근성에 중점을 두기 때문에, 개발자들은 웹..