평소처럼 한가롭게 개발을 이어가던 와중, React의 경량화 버전이라고 볼 수 있는 Preact에서 나의 자작 패키지 react_widgets의 타입 추론 기능(그에 따라 자동완성 기능이 제대로 동작하지 않음)이 Preact 기반 개발 환경에서 제대로 동작하지 않는다는 것을 깨달았습니다. 이에 대해 자세히 알아본 결과, Preact에서 CSS 속성이 정의된 인터페이스, 즉 CSSProperties를 Typescript에서 기본적으로 제공하는 유틸리티 타입인 Omit으로 랩핑한다면 어떤 이유인지 모르겠지만 CSSProperties의 모든 속성이 제외되는 현상이 발생한 것입니다. 이는 사실 대부분은 모두 아는 사실이겠지만 Omit 타입의 경우, 주어진 특정 속성만을 제외하는 기능을 수행합니다.Omit // ..
본론에 들어가기 앞서, 현대의 웹 개발에서 렌더링 최적화가 모바일 앱에 비해 상대적으로 중요하지 않게 느껴질 수 있습니다. 이는 모바일 앱과 웹 간의 명확한 차이점 때문에 그럴 수밖에 없습니다. 모바일 앱은 성능과 네이티브 기능 구현에 중점을 두며, 이러한 최적화에 대한 제약이 상대적으로 적습니다. 예를 들어, 플러터는 자체 렌더링 엔진인 스키아(Skia)와 임펠러(Impeller)를 사용하며, 웹과는 다른 레이아웃 계산 방식을 채택하고 있습니다. 객체 지향적으로 잘 설계되어 있어 커스터마이징이 용이하고, 자체적으로 최적화하기도 어렵지 않습니다. 다만, 이러한 장점에도 불구하고 최적화가 부족한 앱들이 간혹 존재하기도 합니다. 반면, 웹은 렌더링 성능보다는 주로 접근성에 중점을 두기 때문에, 개발자들은 웹..
CSS 작업을 할때 사용되는 식별자인 변수, 클래스, 아이디 이름을 --a, .a, #a와 같이 압축하는 웹팩 플러그인을 개발하였습니다. 참고로 식별자 이름을 a, b, c 형태로 난독화하면서 동시에 압축하는 것을 보통 맹글(Mangle)이라고 합니다. 사용 방법은 그냥 제공되는 플러그인을 추가하면 됩니다. 다만 클래스와 아이디의 경우, 식별하는 것이 다소 까다롭기 때문에 어느정도 테스트하고 그만큼 안정화되면 추후에 기능이 기본적으로 활성화될 예정이며 혹시 사용하실 분들은 해당 플러그인은 2024-08-26, 즉 업로드 시간 기준으로 개발 버전이므로 해당 패키지를 자주 업데이트 시도해주셨으면 좋겠습니다. 변수 이름의 경우 식별하는데 어렵지 않고 JS에서 참조하는 대부분의 경우를 커버합니다. 물론 리액트에..
대부분의 경우, 프로젝트를 시작하기 위해서는 여러가지 기본적인 설정 값들을 추가하거나 수정할 필요가 있습니다, 하지만 대부분의 경우 단순 노동이라고 생각되며 세팅하는 과정에서 무언가가 잘못될 가능성도 없는 것이 아닙니다. 이러한 시간 낭비와 문제점을 줄이기 위해서 다른 사람이 미리 만들어 놓은 시작 키트, 즉 템플릿을 이용하여 초기 세팅을 빠르게 마칠 수 있습니다. 저의 경우, Preact 관련하여 최적화 세팅까지 되어있는 템플릿은 찾기가 어려웠습니다. 따라서 최대한 사용자 경험을 높이기 위해 JS의 경우 Terser를 이용하여 압축하고 CSS의 경우 별도의 플러그인으로 압축을 수행하며 webpack-dev-server를 이용한 핫 리로드(Hot Realod) 기능을 추가한 템플릿을 제작하였습니다. 그것..
웹 개발을 하면 대부분의 경우는 특정 요소의 크기를 참조하고 그에 기반하는 여러 동작들을 수행해야할 필요가 생깁니다.그렇기 때문에 요소의 정확한 크기를 구하는 것이 가장 중요합니다. 당연한 말이지만 요소의 정확한 크기를 구하지 못한다면 여러 버그가 발생할 수 있습니다. 본론으로 들어가서 요소의 크기를 참조하는 방법은 당연하게도 여러가지가 존재합니다. (이미 매우 잘 알려진 흔한 요소의 크기 참조 방법을 쓸려고 이 글을 작성 한 것이 아님을 인지하여 주시길 바랍니다.) clientWidth, clientHeight of ElementElement 객체의 clientWidth와 clientHeight 속성은 많은 개발자들이 일반적으로 사용하는 크기 측정 방법입니다. 이 값은 사용자에게 보여지는 크기(View..
이 프로젝트는 웹 및 모바일 애플리케이션의 아이콘 가독성을 높이고 일관된 디자인을 통해 사용자 경험을 개선하기 위한 벡터 아이콘 템플릿을 제작하는 것입니다. 이 아이콘 템플릿은 세련된 웹사이트를 구축하거나, 전문적인 앱을 개발할 때, 전문적이고 일관된 디자인을 제공하는 것을 목표로 합니다. 이 아이콘 템플릿의 주요 목적은 프론트엔드 개발자가 직접 아이콘을 제작할 필요 없이, 일관된 스타일의 아이콘을 손쉽게 활용할 수 있도록 지원하는 것입니다. 이를 통해 누구나 자신의 프로젝트에서 세련되고 심플한 아이콘을 일관되게 사용할 수 있습니다. 아래에 제공된 아이콘은 자동으로 개선 또는 피드백을 통해 개선될 여지가 있으며, 추가적인 이슈를 등록하여 새로운 아이콘의 제작과 개선을 요청할 수도 있습니다, 또한 이 프로..
현재로서 SVG 파일을 개발하는 데 사용되는 대표적인 유료 툴로는 Adobe Photoshop과 Adobe XD 등이 있습니다. 앞서 언급한 프로그램들을 통해 SVG 작업을 할 수 있지만, 간단한 SVG 아이콘 제작에는 딱히 적합하지 않습니다 특히, Photoshop과 XD의 경우 달마다 나가는 비용이 상당히 부담스러울 수 있는데, 이는 학생이나 취업 준비생에게 있어서 자칫 큰 진입장벽으로 작용할 수 있습니다. 그 뿐만 아니라 저의 경험담으로는 어도비 XD의 경우 SVG를 출력할 때 요소들을 그룹화하거나 쓸데없이 한글과 별도의 식별자을 포함시켜서 용량이 매우 높아지며 별도의 SVG 압축기로 압축해도 용량이 상당합니다. 이는 제가 Stroke를 모두 path로 변환시켜도 마찬가지입니다. 그리고 가장 큰 문..
- Total
- Today
- Yesterday
- omit
- 아이콘 개발
- 조건부 타입
- web
- Factory Method
- 무료 svg 툴
- 안드로이드
- jetpack compose
- Reflow
- mangler
- 깃허브 터짐
- github
- TypeScript
- 안드로이드 개발
- svg 툴
- 아이콘 템플릿
- typescript-preact-webpack
- 타입스크립트
- 깃허브
- 객체지향
- 최적화
- 팩토리 메서드
- android
- svg
- 객체 지향
- Flutter
- JavaScript
- webpack
- 디자인 패턴
- html-inline-webpack-plugin
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |