Jake의 블로그

# ToneJS를 사용해서 직접 노이즈를 만들어 보자 - 안녕하세요. Jake입니다. 오늘 포스팅에서는 ToneJS라는 라이브러리를 사용해서 화이트 노이즈를 만드는 간단한 방법을 소개하려고 합니다. 저는 이 방법으로 만든 노이즈를 제가 서비스 중인 Pomocat이라는 집중 타이머(뽀모도로) 앱에서 사용자한테 들려주고 있습니다. # 관련 링크 - 예제 페이지 https://tonejs.github.io/examples/ Tone.js Examples Choose an example from the side panel. tonejs.github.io - 데모 페이지 https://tonejs.github.io/demos # 사용 방법 - ToneJS를 설치합니다 yarn add tone - Tone을 Imp..

# DriverJS를 활용해서 사용 가이드를 쉽게 구현하는 방법 소개 - 웹 또는 웹앱을 개발하다보면, 사용자 경험을 좋게 만들기 위해 최대한 불필요한 정보를 줄이는 작업을 하게 됩니다. 문제는 이러한 과정에서 사용자에게 각각의 기능에 대한 설명이 부족해지는 경우가 있는데, 문서 페이지에 정리를 아무리 잘해놔도 사용자 입장에서는 그저 사용하기 불편하다고 느끼기 마련입니다. 그러다 보니 필요한 경우 UI에 기능에 대한 안내를 표시를 하면서 가이드를 보여주는 방법이 효과적일 수 있습니다. 하지만 이 방법은 구현에 더 많은 리소스가 필요하기 때문에 포기하게 되는 경우가 많습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 Driver.js 라이브러리를 소개하려고 합니다 # 사용방법 - Github Page..

# 의 숫자를 focus가 되지 않아도 표시하는 방법 - 은 웹에서 사용자에게서 입력을 받는데 사용되는 HTML 엘레멘트 중 하나입니다. 그 중에서 숫자로 입력을 받는 경우 type="number"로 정의해서 받는데, 별도의 UI 프레임워크를 사용하거나 직접 구현하지 않을 경우, 해당 엘레멘트가 활성화 된 경우에만, 증감 화살표가 표시되는 경우가 있습니다. 본 포스팅에서는 이런 문제를 해결할 수 있는 방법입니다. input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: inner-spin-button; opacity: 1; }

# 브라우저에 설정된 언어를 확인하는 코드가 필요한 경우가 있습니다. 매번 검색을 해서 기억을 하지만, 막상 사용할 때가 되면 기억이 나지 않아서 다시 검색하게 되는 경우가 많습니다. 그럴 때 이용하세요. // Get the user's preferred language const userLanguage = navigator.language || navigator.userLanguage; console.log("User's preferred language:", userLanguage);

# cheatsheet-generator를 활용해서 멋진 단축키 가이드 UI를 만들어보자 - 웹 앱 등의 데스크톱 소프트웨어를 개발하다보면, 단축키에 대한 가이드 페이지를 만들거나, 설명하는 UI가 필요한 경우가 있다. 단축키에 대한 정보를 알려주어야 하는 것은 필수지만, 빠듯한 개발 일정에서 단축키 문서 페이지의 디자인까지 신경 쓰기 쉽지 않다보니, 쉽게 사용할 수 있으면서, 사용자가 보기에도 좋은 단축키 문서를 만드는 방법을 찾게 되었다. 본 포스팅에서는 이러한 경우에 사용할 수 있는 라이브러리를 소개하려고 한다. # 사용법 - 아래의 페이지로 접속해서 해당 Repository를 클론하거나 다운로드 받습니다. 그리고 해당 경로로 이동해서 yarn, npm을 이용해서 필요한 dependancy들을 설치..

# html-to-image를 활용한 html element를 이미지로 저장하는 방법 - 웹 앱을 개발하다보면, 가끔 웹 페이지 또는 컴포넌트를 이미지로 저장하는 기능이 필요한 경우가 있습니다. 이럴 때 스크린 샷 기능을 활용 할 수도 있지만, 윈도우 외의 영역을 제외 시킨다던지, 특정 컴포넌트를 숨기고 싶은 경우에는 구현이 쉽지 않습니다. 이런 경우 오늘 소개할 라이브러리가 도움이 될 수 있습니다. 지난 포스팅 중에 html2canvas라는 라이브러리를 소개해 드린 적이 있었는데, 오늘 소개할 라이브러리가 더 간편하고 지원하는 이미지 포맷도 다양하니, 꼭 사용해보셨으면 좋겠네요 # 깃헙 페이지 GitHub - bubkoo/html-to-image: ✂️ Generates an image from a D..

# Tailwind CSS Cheat Sheet - Tailwind CSS에 대해서는 많은 분들이 들어보셨고 사용하고 계실 것 같습니다. 저의 경우 주변 개발자 친구들에게 들어서 자연스럽게 알게 되었습니다. 그러나 그 당시에는 나온지 얼마 안되었어서 문법을 알고 사용해야 했었기에 기존에 구현하던 것에 비해서 생산성이 떨어지기에 적용을 안했던 경험이 있습니다. 지금이야 Tailwind CSS의 자동완성을 지원하는 확장도 있고 하여 생산성이 많이 올라갔을 것으로 보이지만, 막상 그런 지원 툴들도 단축되어 있는 Tailwind의 문법을 모르면 크게 유용하지 않다는 문제가 있습니다. 그럴 때 도움이 되는 것이 오늘 소개할 Tailwind CSS Cheat Sheet 사이트 입니다. Tailwind CSS Che..

# html2canvas를 활용한 스크린 캡쳐 - 본 포스팅에서는 html2canvas를 활용하여 원하는 HTML 요소들을 이미지로 만드는 방법을 소개합니다 # 라이브러리 사이트 html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com # 사용방법 - html2canvas를 설치해 줍니다 yarn add html2canvas - OnClick 등의 원하는 이벤트에서 다음과 같이 지정된 id의 요소를(아래의 경우 "save_element_id") 캡쳐합니다 html2canv..

# UUID를 사용한 고유 아이디 생성 방법 - UUID는 네트워크에서 고유성이 보장되는 ID생성 표준 규약입니다. 본 포스팅에서는 JS용 uuid 라이브러리를 사용해서 uuid를 생성하는 방법을 소개합니다 # 사용방법 - 라이브러리를 설치해 줍니다 yarn add uuid - 아래와 같이 불러와서 고유 아이디를 생성해 줍니다 import { v4 as uuidv4 } from 'uuid'; uuidv4(); # Github Page GitHub - uuidjs/uuid: Generate RFC-compliant UUIDs in JavaScript Generate RFC-compliant UUIDs in JavaScript. Contribute to uuidjs/uuid development by cre..