이미지 줌 라이브러리 제작일지

이미지 줌 라이브러리 제작일지

Github라이브 데모 일전에 블로그에 업데이트하고 굉장히 만족도가 높았던 이미지 줌 효과를 난생처음 npm 패키지로 만들어보고 있습니다.그간 만든 것은 대부분 코드를 복사 붙여 넣기 해야 쓸 수 있었는데, 이젠 cdn 링크를 script로 추가하는 건 물론이고, npm i smooth-zoom으로 설치까지 할 수 있습니다. webpack으로 빌드해보려다 계속 실패해서 일단 수동으로 작업해서 올려뒀는데, Rollup으로 갈아타거나 간단한 스크립트를 만들거나 해서

Smooth Zoom제작일지
VSCode를 Syntax Hihglighter로 쓰는 방법

VSCode를 Syntax Hihglighter로 쓰는 방법

자바스크립트 라이브러리가 별로인 이유 이미 하이라이팅이 끝난 html을 사용하기에 클라이언트가 할 일이 줄어든단 점, .cshtml등의 파일은 지원하지 않는 라이브러리가 많단 점을 제외하고 단순히 하이라이팅된 결과물만 봐도 보통 VSC가 압도적으로 우세합니다.훨씬 정교한 하이라이팅에 다양한 테마까지 지원되니 한 번 써보시면 도대체 라이브러리가 왜 필요한가 싶으실 겁니다. 일렉트론을 기반으로 구동되기에, html 에디터만 있으면 하이라이팅 된 html을 복사할 수

Syntax Highlight
WebP 업데이트

WebP 업데이트

WebP는 구글에서 만든 이미지 포맷으로, JPEG, PNG 등의 포맷보다 우월한 압축률을 자랑하는 포맷입니다.물론 IE는 읽지 못하는 포맷이고, 사파리도 부분적으로만 지원하기에 결국 기존 이미지 포맷과 병행해서 사용해야 한단 단점이 있습니다. 개인적으론 앞선 단점보다 이미지를 내려받았을 때 휴대폰에서 이미지를 볼 수 없단 단점 때문에 싫어했고요. 근데 이젠 딱히 아이돌 관련된 사진을 올리지도 않으니 블로그에 내려받을 이미지도 없고,

워드프레스WebP제작일지
PWA를 스토어에 출시하기

PWA를 스토어에 출시하기

웹 사이트를 PWA로 업데이트하기에서 PWA가 된 웹 앱 / 웹 사이트(이하 웹 앱)를 스토어에 출시하는 간단한 방법입니다. 코드는 한 줄도 더 쓰실 필요 없습니다.Bubblewrap, PWA Builder 등의 선택지가 있으며, Bubblewrap은 커맨드 라인에서, PWA Builder는 웹에서 앱을 제작합니다. 이 글에선 조금 더 간단한 PWA Builder로 구글 플레이 스토어에 출시하는 것을 기준으로 설명하겠습니다. 완성된 앱은 제 블로그

PWANative App