평소처럼 한가롭게 개발을 이어가던 와중, React의 경량화 버전이라고 볼 수 있는 Preact에서 나의 자작 패키지 react_widgets의 타입 추론 기능(그에 따라 자동완성 기능이 제대로 동작하지 않음)이 Preact 기반 개발 환경에서 제대로 동작하지 않는다는 것을 깨달았습니다. 이에 대해 자세히 알아본 결과, Preact에서 CSS 속성이 정의된 인터페이스, 즉 CSSProperties를 Typescript에서 기본적으로 제공하는 유틸리티 타입인 Omit으로 랩핑한다면 어떤 이유인지 모르겠지만 CSSProperties의 모든 속성이 제외되는 현상이 발생한 것입니다. 이는 사실 대부분은 모두 아는 사실이겠지만 Omit 타입의 경우, 주어진 특정 속성만을 제외하는 기능을 수행합니다.Omit // ..
본론에 들어가기 앞서, 현대의 웹 개발에서 렌더링 최적화가 모바일 앱에 비해 상대적으로 중요하지 않게 느껴질 수 있습니다. 이는 모바일 앱과 웹 간의 명확한 차이점 때문에 그럴 수밖에 없습니다. 모바일 앱은 성능과 네이티브 기능 구현에 중점을 두며, 이러한 최적화에 대한 제약이 상대적으로 적습니다. 예를 들어, 플러터는 자체 렌더링 엔진인 스키아(Skia)와 임펠러(Impeller)를 사용하며, 웹과는 다른 레이아웃 계산 방식을 채택하고 있습니다. 객체 지향적으로 잘 설계되어 있어 커스터마이징이 용이하고, 자체적으로 최적화하기도 어렵지 않습니다. 다만, 이러한 장점에도 불구하고 최적화가 부족한 앱들이 간혹 존재하기도 합니다. 반면, 웹은 렌더링 성능보다는 주로 접근성에 중점을 두기 때문에, 개발자들은 웹..
웹 개발을 하면 대부분의 경우는 특정 요소의 크기를 참조하고 그에 기반하는 여러 동작들을 수행해야할 필요가 생깁니다.그렇기 때문에 요소의 정확한 크기를 구하는 것이 가장 중요합니다. 당연한 말이지만 요소의 정확한 크기를 구하지 못한다면 여러 버그가 발생할 수 있습니다. 본론으로 들어가서 요소의 크기를 참조하는 방법은 당연하게도 여러가지가 존재합니다. (이미 매우 잘 알려진 흔한 요소의 크기 참조 방법을 쓸려고 이 글을 작성 한 것이 아님을 인지하여 주시길 바랍니다.) clientWidth, clientHeight of ElementElement 객체의 clientWidth와 clientHeight 속성은 많은 개발자들이 일반적으로 사용하는 크기 측정 방법입니다. 이 값은 사용자에게 보여지는 크기(View..
라이브러리 이름도 Typescript 인 것처럼 매우 유연하게 타입 추론을 가능하게 하기 위해서 타입스크립트에서는 개발자들에게 여러가지 유용한 기능들을 제공합니다. (해당 글에서는 주제와 같이 조건부 타입을 위주로 작성되었습니다.) 해당 글에서는 몰라도 딱히 상관은 없지만 알면 한 평생 유용한 써먹을 수 있는 타입스크립트의 기능들을 소개하겠습니다 keyof (유니온 타입으로 변환)해당 키워드는 객체 및 인터페이스 또는 함수 시그니처, 멤버 변수 이름 등을(여기에서 키는 주로 어떠한 값에 접근하거나 식별하는데 사용되는 이름을 의미합니다.) 유니온 타입(Union Type)으로 변환 및 추출하는데 사용됩니다, 해당 기능은 앞서 설명했다시피 잘만 사용한다면 매우 유용하게 사용될 수 있는 기능입니다. inter..
웹에서는 Flutter 또는 Jetpack Compose와 달리 레이아웃 계산에 직접 관여하거나 제어할 수 없습니다. 즉, 자식의 크기를 직접 계산하거나 그려지는 요소의 위치를 정의하는 로직에 직접적으로 관여할 수 없습니다. 대신, CSS 스타일이나 JavaScript를 사용하여 레이아웃에 간접적으로 영향을 미칠 수 있습니다. 레이아웃 계산을 변경하거나 특정 요소의 크기나 위치를 조정하는 경우, 브라우저는 이러한 변화를 반영하기 위해 Reflow를 수행해야 합니다. Reflow는 레이아웃을 다시 계산하는 과정으로, 빈번하게 발생하면 성능 저하를 일으킬 수 있습니다. 이 Reflow의 경우, 레이아웃의 크기와 위치를 참조하거나 요소의 돔 구조가 변경되면 수행되는 레이아웃 단계입니다.따라서, 여러 번의 레..
자바스크립트 입문자 또는 문법에 그리 관심이 존재하지 않는 분들 위해서 해당 글에서는 알면 자바스크립트에서 유용하게 사용될 수 있는 문법들에 대해 소개합니다. 옵셔널 체이닝 (Optional Chaining) 객체나 배열에서 특정 속성이나 요소에 접근할 때, 해당 속성이나 요소가 존재하지 않아도 별도의 예외를 발생시키지 않고 undefined를 반환하는 기능을 제공하는 연산자입니다. 참고로 해당 연산자는 다트에서도 존재하며 별도의 null-safe 로직을 생략할 수 있는 특성때문에 많이 애용되는 연산자 중 하나입니다. 해당 연산자의 예시 코드를 보도록 하겠습니다.const child = parent?.child;child 속성이 nullable이라는 가정하에 속성 값을 참조하는 경우 . 대신 ?. 연산자..
타입스크립트는 정적 타입 검사 기능 외에도 다양하고 유용한 기능들을 제공합니다. 하지만 많은 개발자들이 이러한 기능들을 잘 모르고 사용하지 않는 경우가 많습니다. 해당 글에서는 타입과 관련된 다양한 유틸리티 기능들을 살펴보도록 하겠습니다. 유틸리티 타입 (Utility Types)타입스크립트는 타입 보장 및 검사 기능 뿐만 아니라 그와 관련된 다양한 유틸리티 타입을 제공하여 기존 타입을 기반으로 새로운 타입을 쉽게 만들 수 있도록 도와줍니다. 쉽게 말하자면 마치 레고 블럭처럼, 타입스크립트에서는 이미 존재하는 타입들을 조립해서 새로운 타입을 만들 수 있는 편리한 도구들을 제공하는데, 이걸 "유틸리티 타입"이라고 부릅니다. 여기에선 몇 가지 자주 그리고 널리 사용되는 유틸리티 타입들을 소개하겠습니다. P..
데코레이터(Decorator) 패턴, 혹시 한 번씩은 들어보시거나 기억나시나요? 해당 패턴은 기존 객체의 기능을 동적으로 추가하거나 덮는 식으로 전체적인 기능에 변화를 주거나 하는데 널리 사용되는 패턴 중 하나입니다. 더보기해당 패턴에 대해 더 자세히 알고 싶다면 https://mttankkeo.tistory.com/19 참고해주세요. 앞서 데코레이터 패턴을 언급한 이유는 바로 여러분에게 소개할 믹스인과 그 사용 목적이 매우 유사하기 때문입니다. 물론 데코레이터 패턴과 믹스인 개념에 이미 익숙한 분들도 계시겠지만, 믹스인은 주로 단일 상속만을 지원하는 Dart나 Javascript 같은 언어에서 사용되는 개념입니다. 다중 상속을 지원하는 C++ 같은 언어에서는 믹스인의 필요성이 크지 않습니다. 또 한 가..
- Total
- Today
- Yesterday
- 디자인 패턴
- Factory Method
- 객체지향
- 안드로이드
- 아이콘 템플릿
- 무료 svg 툴
- 깃허브
- jetpack compose
- 타입스크립트
- web
- github
- typescript-preact-webpack
- html-inline-webpack-plugin
- JavaScript
- omit
- 아이콘 개발
- android
- Flutter
- 최적화
- 팩토리 메서드
- TypeScript
- svg 툴
- webpack
- 깃허브 터짐
- 안드로이드 개발
- Reflow
- 조건부 타입
- svg
- mangler
- 객체 지향
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |