본문 바로가기

개발/프론트엔드

HTML을 이미지로 저장하기 - 트러블 슈팅 경험 공유 🔥 안녕하세요, 오늘은 제가 최근에 개발한 사이드 프로젝트 '퀵썸네일'을 만들면서 겪은 문제와 해결 방법에 대해 이야기해보려고 합니다. 퀵썸네일은 '몇 번의 간단한 클릭만으로 예쁜 썸네일을 빠르고 쉽게 만들 수 있는 프로젝트'인데요, HTML과 스타일 요소를 사용하고 있어서 HTML을 이미지로 저장하는 것이 핵심 기능이었습니다.트러블슈팅 #1: 사파리 이미지 저장 문제HTML을 이미지로 변환할 때 가장 유명한 라이브러리는 'html-to-image'입니다. 하지만 이 라이브러리를 사용하면 저장 시에 사파리 브라우저에서 이미지가 깨지는 문제가 있었습니다. 배경 이미지가 사라지거나, 폰트가 적용되지 않는 등의 문제가 존재했습니다.사파리나 파이어폭스 브라우저에서는 해당 라이브러리를 활용해서 이미지를 저장할 때 외..
쉽고 빠른 썸네일 만들기, 퀵썸네일 (Quick Thumbnails) 소개 | 사이드 프로젝트 안녕하세요! 오늘은 제가 진행한 사이드 프로젝트, '퀵썸네일'에 대해 소개해 보려고 합니다. 인스타그램, 유튜브, 블로그 등의 플랫폼에서 썸네일은 콘텐츠의 첫인상을 결정짓는 매우 중요한 요소입니다. 하지만, 디자인 스킬이 부족한 사람들에게는 썸네일 제작이 결코 쉬운 일이 아닙니다. 이러한 어려움을 해결하고자 시작한 '퀵썸네일'은 디자인 도구에 익숙하지 않은 사용자도 멋진 썸네일을 쉽고 빠르게 만들 수 있도록 돕는 웹서비스로 개발되었습니다.퀵썸네일 바로가기🚀 프로젝트의 시작저는 블로그 운영 중 썸네일 제작에 지속적인 불편함을 겪었습니다. 포토샵과 같은 디자인 도구를 전혀 다룰 줄 몰랐고, 온라인상의 썸네일 제작 도구는 기능이 너무 제한적이었습니다. 썸네일을 한 번 만들어두고 재사용할 수 있는 것이 아니라..
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발 | 유데미 수강후기 기술블로그로 알아보는 테크니컬 라이팅에 이어 'React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발' 강의를 수강하였다. 회사에서 차트를 개발하는 일을 하며 Canvas를 다룰 일이 많았고, 자연스럽게 Webgl등에 관심을 가지게 되었다. 그러면서 Webgl을 활용해서 웹에서 3D를 구현하는 Three.js라는 기술에도 관심을 가지게 되었는데, 라이브러리만을 학습하기에는 뭔가 체계나 개념이 잡혀있지 않아 막막함이 있었다. 그러던 중, 글또를 통해 해당 강의를 수강할 수 있는 기회를 얻게 되었다.강의 소개해당 강의는 약 10시간 정도로 구성되어 있다. 설치/환경 설정부터 시작해서 웹 3D 렌더링에 필요한 여러 개념들을 체계적으로 설명한다. React와 Three.js, R3F 등의 여..
웹 컴포넌트 Svelte로 만들고 배포까지 (feat. 사이드 프로젝트) 12월 사이드 프로젝트로 카카오톡 광고에 영감을 받아 Adsense-Popover라는 프로젝트를 진행했습니다. Adsense Popover는 페이지의 우측 하단(또는 원하는 위치)에 구글 애드 센스 광고가 슬라이드 하며 나타나는 프로젝트입니다. 오늘은 해당 프로젝트를 진행하면서 사용한 기술인 웹 컴포넌트에 대한 소개와, Svelte를 통해 직접 웹 컴포넌트를 만들어 배포하는 과정을 다뤄보겠습니다. 웹 컴포넌트란? 웹 컴포넌트는 브라우저 상에서 커스텀 태그 (Custom Elements)를 만들 수 있게 해주는 기술입니다. 브라우저의 div, span과 같은 표준 태그 외에 본인이 만든 커스텀 태그를 사용할 수 있습니다. 웹 컴포넌트를 왜 사용하나요? 웹 컴포넌트를 사용하면 외부 개발자들에게 쉽게 컴포넌트..
Vue3로 프로젝트를 진행하면서 알게 된 것들 최근에 Vue3와 Typescript를 학습하기 위한 목적으로 간단한 개인 프로젝트를 진행하였다. 해당 프로젝트를 진행하면서 알게 된 것들을 정리하고자 한다. Vue3에 대한 튜토리얼은 아니고, 시행착오에 대한 기록이라 할 수 있다. script setup Vue3의 composition api는 보통 아래와 같은 형태로 사용했다.(Vue.js 공식문서의 예제) 하지만, 최근 Vue의 공식문서를 보면 setup function을 쓰는 것보다 훨씬 단순하고, Props나 Event를 순수 Typescript를 활용해 선언할 수 있다. 그리고 런타임 시에 성능이 더 좋으며, IDE 지원이 잘된다고 한다. 해당 내용에 대해서 더 자세히 알고 싶다면 아래 공식문서를 확인하자. SFC 을 활용한 엄청난 규모의 오..
Vue 스타일가이드 정도는 읽어봐야겠죠? Vue.js Style Guide의 내용을 정리한 글이다. Vue.js를 메인 프레임워크로 사용하고 있었지만, 해당 문서를 살펴보지 않았다. 최근에서야 스타일가이드를 읽고 '이걸 왜 이제야 읽었을까?'하는 생각이 들었다. 안티패턴을 굉장히 많이 사용하고 있었다. 물론 스타일 가이드에 나온 내용을 무조건 따라야하는 것은 아니지만, 적어도 그 안에 들어 있는 철학을 배우는게 중요하다. 그리고 다른 패턴을 사용할 때는 그만한 합리적인 이유가 있어야한다. 이 가이드에서는 우선순위에 따라 다음과 같은 네가지 카테고리로 내용을 분류하였다. Essential: 반드시 따라야한다. Strongly Recommended: 가능하면 따라야한다. Recommended: 따르면 좋다. Use with Cauti..
vue에서 node_modules모듈 babel 문제해결 Problem Google Analytics를 보는데, 어느 순간 부터 인터넷 익스플로러의 활성사용자수가 0임을 확인하였다. (망할 IE...) 알고보니 우리가 Vue에서 Google Tag Manager를 사용하기 위해 vue-gtm이라는 라이브러리를 쓰고 있는데 해당 라이브러리의 익스플로러 지원이 안됐던 것이다. vue-cli에서 기본 적으로 babel을 활용하여 코드를 IE에서도 사용할 수 있게 트랜스파일 해주지만, node_modules에 속해 있던 라이브러리는 해주지 않아 생기는 문제이다. (안해주는게 효율면에서 낫기도 하다.) How I Solved transpileDependencies 옵션을 활용해 node_modules에 속해있는 라이브러리도 babel을 적용할 수 있다는 것을 알게 되었..

티스토리툴바