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..

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

# react-signature-canvas를 활용해서 서명 기능 구현 방법 - 웹 개발을 하다보면, 사용자 서명을 받는 컴포넌트가 필요한 경우가 있습니다. 직접 구현을 해도 되지만, 기능이 가지는 중요도에 비해, 개발에 많은 시간이 소요되기 때문에, 오늘 포스팅에서 소개 할 라이브러리를 활용하시면 좋을 것 같습니다. 해당 라이브러리는 signature-pad라는 자바스크립트용 라이브러리를 리액트 용으로 랩핑한 라이브러리 입니다. 자바스크립트에서 사용하실 분은 링크를 참고하시면 될 것 같습니다 # 깃헙 페이지 - react-signature-canvas 깃헙 페이지 GitHub - agilgur5/react-signature-canvas: A React wrapper component around sig..

# 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..

# 새 브라우저 창에서 외부 사이트 열기 # Web 기반 개발을 진행하다 보면, 외부 사이트를 새 브라우저 창에서 띄우는 기능이 필요한 경우가 있습니다. 이 경우, 아래와 같은 방법으로 처리할 수 있습니다 // 화면 사이즈 가져오기 const height = window?.screen?.height; const width = window?.screen?.width; const url = "https://enfp-jake.tistory.com"; // 외부 브라우저 열기 window.open(url, "_blank", `height=${height}, width=${width}`);

# 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..

# DayJS를 사용해서 날짜, 시간 표시하기 - 웹, 또는 앱을 개발하는 과정에서 날짜, 시간을 표시하는 기능은 대부분의 경우에 필요합니다. 그리고 가장 많이 사용되는 라이브러리는 momentjs입니다. 그런데 momentjs는 고도화된 기능들을 많이 제공하기 때문에, 무거운 편입니다. momentjs에서만 제공하는 기능이 필요한 경우에는 당연히 momentjs를 사용하여야 하나, 더 일반적인, 간단한 시간, 날짜를 표현할 때는 가벼운 dayjs 또한 좋은 선택이라고 생각합니다. 본 포스팅에서는 dayjs를 사용한 날짜, 시간 표시 방법을 소개합니다 # 사용방법 - 설치해 줍니다 yarn add dayjs - 기본적인 사용법은 아래와 같습니다 import dayjs from 'dayjs' dayjs()..