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로 변환시켜도 마찬가지입니다. 그리고 가장 큰 문..
실시간으로 같이 개발과 같은 정보를 교환하면서 소통하실 분은 오시는 겁니다요! 간단한 소개이 개발 관련 커뮤니티는 프론트엔드와 백엔드 개발자 또는 개발자 또는 사람로서 실시간으로 소통하며, 자신을 소개하고 기술과 결과물을 자유롭게 공유하는 동시에 함께 성장하고 발전하는 것을 목표로 하는 자유로운 개발자 커뮤니티입니다. 이곳에서 우리는 서로의 경험을 나누고, 같이 배우며 즐기는 과정을 통해 더 나은 개발자로 거듭나고자 합니다. 슬기로운 땅콩 마을 Discord 서버에 가입하세요!Discord에서 슬기로운 땅콩 마을 커뮤니티를 확인하세요. 1명과 어울리며 무료 음성 및 텍스트 채팅을 즐기세요.discord.com
(이 글은 민감한 주제를 다루고 있으므로, 읽는 분께서는 이 글의 내용이 저의 주관적인 주장과 의견임을 이해해 주셨으면 합니다. 모든 사람이 이 내용에 동감하지 않을 수 있다는 점도 알아주셨으면 해요. 이는 우리 세상에 존재하고 있는 논문, 이론, 의견, 글들에서도 마찬가지라고 생각합니다. 😜) AI 개발 및 산업이 빠르게 발전함에 따라 윤리적 문제와 작업물에 대한 저작권 의식이 중요한 이슈로 떠오르고 있습니다. 인터넷 및 자작물을 관리하는 플랫폼에서도 이에 대해 많은 논의와 대처가 이루어지고 있습니다. 개발자와 AI 사용자라면 이러한 문제들을 기본적으로 인지하고 있어야 한다고 생각합니다. 이는 개발자와 다양한 사람들의 사회에 미치는 영향과 밀접하게 연결될 수 있기 때문입니다. AI의 윤리적 문제는 누..
- Total
- Today
- Yesterday
- 디자인 패턴
- 깃허브
- 안드로이드
- flutter_touch_ripple
- 안드로이드 개발
- 최적화
- 터치 리플
- github
- android
- 객체지향
- svg
- Factory Method
- jetpack compose
- 리플 효과
- html-inline-webpack-plugin
- 객체 지향
- 팩토리 메서드
- 플러터
- web
- Flutter
- 타입스크립트
- 전환 애니메이션
- 조건부 타입
- 터치 효과
- webpack
- TypeScript
- mangler
- omit
- JavaScript
- Reflow
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |