Jake의 블로그

# react-typed를 사용하여 타이핑 효과 구현하는 방법 - 안녕하세요 Jake입니다. 본 포스팅에서는 react-typed 라이브러리를 사용해서 타이핑 효과를 구현하는 방법을 소개하려고 합니다. 타이핑 효과는 사용자들한테 문자열이 실제로 입력되는 것처럼 보이게 하여 시선을 끌어주기에 애용되는 효과 중 하나입니다. 그렇지만 기대대는 효과 대비 구현이 번거롭다는 것이 문제입니다. 이런 경우 오늘 소개할 라이브러리를 활용해 보시는 것은 어떨까요? # 관련 페이지 - 깃헙 페이지 https://github.com/ssbeefeater/react-typed GitHub - ssbeefeater/react-typed: A react wrapper for typed.js A react wrapper for t..

# SVG를 활용한 나만의 디자인을 쉽게 만드는 방법 소개 - SVG는 벡터 그래픽을 표현하기 위한 표준 포맷입니다. 벡터 그래픽이기 때문에 사이즈에 대한 스트레스에서 해방 될 수 있고, React를 사용한다면 더 다양하게 활용이 가능하기 때문에, 자주 사용하게 됩니다. 하지만 결국 이런 편리함이 있어도, 디자인 적인 감각이 없다면, 아이콘을 적용하는 수준이상으로 활용하기가 어렵습니다. 본 포스팅에서는 이러한 경우에 조금 더 쉽게 있어 보이는 디자인 요소들을 생성할 수 있는 웹 사이트를을 소개하려고 합니다 # 웹사이트: https://fffuel.co/ Free SVG generators, color tools & web design tools 🚀 Here you'll find a collection o..

# HyperUI - 무료 오픈소스 Tailwind CSS 컴포넌트 활용 방법 - Tailwind CSS는 가장 핫한 CSS 프레임워크 중 하나입니다. 하지만, 다른 UI 프레임워크들과는 다르게 직접적으로 컴포넌트를 제공하지 않기 때문에, 실제로 활용을 하려면 Headless UI와 같은 보조 라이브러리나 컴포넌트, 예시들이 필요한 경우가 많습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 HyperUI를 소개하려고 합니다 # HyperUI 사이트 https://www.hyperui.dev/ Free Open Source Tailwind CSS Components | HyperUI Free Tailwind CSS components that can be used in your next project..

# 의 숫자를 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; }

# TailwindCSS에서 글자 배경에 Gradient를 적용하는 방법 - text-transparent로 투명하게 만든 텍스트를 gradient가 적용된 배경으로 마스킹하는 간단한 구조입니다. TAB DISPLAY - 적용 결과입니다 - 어떤 조합으로 Gradient를 정해야 할 지 모르겠거나 직접 TailwindCSS 문법으로 Gradient를 작성하기 번거로울 경우, 아래의 사이트를 이용하시면, 바로 원하는 Gradient의 TailwindCSS 코드를 복사해서 적용할 수 있으니, 이용해 보시면 좋을 것 같습니다. Gradients for Tailwind CSS | Hypercolor A curated collection of beautiful Tailwind CSS gradients using ..

# React에서 폭죽, 빵빠레 효과를 쉽게 추가하는 방법 - React 프론트엔드를 개발하다보면, 사용자가 특정 목표를 완료했을 경우나, 좋은 일이 발생했을 때 이를 강조하기 위해 폭죽이나 빵빠레 효과가 필요한 경우가 있습니다. 정말 자주 필요하지는 않지만, 막상 필요할 때 직접 구현하기는 손이 많이 가는 기능입니다. 본 포스팅에서는 이런 경우 유용하게 사용할 수 있는 라이브러리를 소개하려고 합니다. # 라이브러리 및 사용 방법 - 검토 및 사용해본 라이브러리는 4개 정도 되는데, 전체적으로 지원하는 기능은 유사했습니다. 추천 드리는 라이브러리는 폭죽이 터지는 효과면 충분하고 상대적으로 최신까지 유지보수가 되는 라이브러리를 선호한다면, react-confetti-explosion를 추천드리고, 터지는 ..

# lucide-react, lucide-react-native를 활용해서 아이콘 한 번에 해결하기 UI를 개발하는 과정에서 아이콘의 사용은 필수적입니다. 특히 UI가 복잡하거나 기능이 많을 경우, 좋은 UX를 제공하기 위해서는 아이콘은 반드시 필요합니다. 하지만 개발팀에 디자이너가 없거나 있더라도 아이콘까지 직접 디자인을 하는 것은 시간을 많이 빼앗기는 일입니다. 그러다보니, 필연적으로 여러 아이콘 라이브러리들을 활용하게 됩니다. 그런데 항상 모든 라이브러리들이 충분한 수의 아이콘을 제공하는 것은 아니므로, 여러 라이브러리에서 필요한 아이콘들을 찾아서 사용하다보면, 전체적인 통일감이 떨어져서 아쉬움이 드는 경우가 많습니다. 오늘 포스팅에서는 이러한 경우에 활용 가능한 심플하면서도 많은 아이콘을 제공하는..

# Tailwindcss를 효율적으로 쓸 수 있게 도와주는 daisyUI 소개 - 지금은 적극적으로 Tailwindcss를 사용하지만, 처음 Tailwindcss를 알게되고, 몇 번 사용을 시도하다가 그만두었던 이유 중 하나가 className에 너무 많은 코드를 넣어야 한다는 점이었다. 익숙해지고 나서는 이 부분이 기존의 다른 스타일 정의 방법에 비해서 체감 상 불편하다고 느끼지는 않게 되었지만, 여전히 효율적인 부분에 대한 아쉬움이 있었다. 그리고 구체적인 스펙이 정의되어 있지 않은 토이 프로젝트나, 디자이너 없이 개발을 하는 경우, 어느정도 기본적인 스타일링을 제공해 주는 UI 프레임워크들이 그리워지고는 하였다. 마침 이번에도 그러한 아쉬움이 들어 검색을 하던 중에 오늘 소개할 daisyUI를 발견..

# flume를 활용해서 노드 기반 UI를 구현하는 방법 - 본 포스팅에서는 flume라이브러리의 기본적인 사용방법에 대해서 소개하려고 합니다. # Github Page https://github.com/chrisjpatty/flume GitHub - chrisjpatty/flume: Extract logic from your apps with a user-friendly node editor powered by React. Extract logic from your apps with a user-friendly node editor powered by React. - GitHub - chrisjpatty/flume: Extract logic from your apps with a user-friendl..

# react-tooltip 사용방법 - Tooltip은 UI를 간소화 하면서도 필요한 정보를 전달하기 위해 자주 사용되는 방법 중 하나입니다. 그렇기에 다양한 UI Framework에서 Tooltip은 기본적으로 지원하는 컴포넌트 중 하나입니다. 그러나 이러한 통합 프레임워크는 필연적으로 무겁거나 용량이 큰 경우가 많다보니, 실제 적용할 때 퍼포먼스에 대한 고민이 생기는 경우가 있습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 react-tooltip에 대한 사용법을 소개하려고 합니다. # Github Page https://github.com/ReactTooltip/react-tooltip GitHub - ReactTooltip/react-tooltip: React Tooltip Compone..