슬기로운 땅콩 마을

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

라이브러리 이름도 Typescript 인 것처럼 매우 유연하게 타입 추론을 가능하게 하기 위해서 타입스크립트에서는 개발자들에게 여러가지 유용한 기능들을 제공합니다. (해당 글에서는 주제와 같이 조건부 타입을 위주로 작성되었습니다.) 해당 글에서는 몰라도 딱히 상관은 없지만 알면 한 평생 유용한 써먹을 수 있는 타입스크립트의 기능들을 소개하겠습니다 keyof (유니온 타입으로 변환)해당 키워드는 객체 및 인터페이스 또는 함수 시그니처, 멤버 변수 이름 등을(여기에서 키는 주로 어떠한 값에 접근하거나 식별하는데 사용되는 이름을 의미합니다.) 유니온 타입(Union Type)으로 변환 및 추출하는데 사용됩니다, 해당 기능은 앞서 설명했다시피 잘만 사용한다면 매우 유용하게 사용될 수 있는 기능입니다. inter..

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

Webpack을 사용하는 주요 목적은 비동기 요청을 최소화함으로서 발생하는 지연시간 최소화입니다.이는 모듈화된 파일을 번들링하여 하나의 파일로 병합하는 것을 의미합니다. 이렇게 함으로서 사용자는 물리적으로 서버에게 요청하고 응답 받는 횟수를 줄여 정적 리소스를 빠르게 다운로드할 수 있게 합니다, 이는 사용자 경험을 획기적으로 높일 수 있는 주요 방법 중 하나입니다.(불필요한 요청과 동시 소켓 연결은 서버에 부담을 주고 성능을 저하시키는 주요 요인 중 하나입니다. 비동기로 요청한다 치더라도 서버는 여러 요청을 처리하기 위해 자원을 할당해야 하며, 불필요한 요청이 많아질수록 처리해야 할 작업량이 늘어나고 성능이 저하됩니다, 만약 그렇지 않더라도 사용자는 물리적으로 데이터가 서로 왕복하는 시간을 피할 수 없습..