Jake의 블로그

# 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; }

# 오페라 브라우저을 이용해서 무료로 VPN을 사용하는 방법 소개 - 글로벌한 웹 환경에서 살다보면, 가끔 VPN이 필요해지는 상황이 있습니다. 해외 서버에서 게임을 하는 등의 VPN을 적극적으로 사용하는 경우를 제외하면, 1회성으로 필요한 경우가 대부분 입니다. 그러다보니 무료체험 등을 이용하는 경우가 많은데, 대부분의 VPN 서비스는 회원 가입을 요구하거나 우선 구독을 해야 하는 곳도 많습니다. 그러다보니 부담도 되고 귀찮게 느껴집니다. 이번 포스팅에서는 이런 상황에서 도움이 될 수 있는 방법을 소개하려고 합니다 # 사용 방법 - 우선 오페라 브라우저를 설치 하고 실행 합니다. 아래 이미지와 같이 우측의 메뉴 버튼을 눌러 사이드 메뉴를 띄우고, VPN 메뉴로 이동해줍니다 - VPN탭에서 옵션을 활성화..

# 2023.06 이달의 무료 콘텐츠 ※ 언리얼 엔진에서 사용 가능한 컨텐츠입니다. 일정 기간 동안 할인율 100%로 제공하는 정기 이벤트입니다. 구입 후 언리얼 엔진 라이브러리에서 다운 및 이용이 가능합니다. 당장 사용하지 않더라도 일단 받아놓으시면, 언젠가 필요해질 수 있습니다. # 다운로드 https://www.unrealengine.com/marketplace/ko/assets?count=20&sortBy=effectiveDate&sortDir=DESC&start=0&tag=4910 마켓플레이스 탐색&검색 | 언리얼 엔진 마켓플레이스 www.unrealengine.com # 무료 컨텐츠 구성

# 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를 추천드리고, 터지는 ..

- ChatGPT 사이트는 아마 이 글을 보시는 모든 사람들이 사용해보셨을 것 같습니다. 그리고 많은 사람들에게 있어서 AI를 사용하는 방법 그 자체로 인식이 되어가고 있는 상황일 것도 같습니다. 그런데 사실 ChatGPT는 GPT라는 AI와 채팅이라는 행위를 주고 받기 위한 도구일 뿐입니다. 그렇다면, 다른 AI 모델들을 연결해서 사용할 수도 있지 않을까요? 무료로 사용 가능한 모델을 사용하면서 웹 상에 정보를 전달하지 않고 사용가능하다면, 아주 유용할수도 있을 것입니다. 본 포스팅에서는 llama.cpp와 gpt-llama.cpp 그리고 chatbot-ui 세 가지를 연결하여 GPT가 아닌 다른 모델을 적용해서 ChatGPT UI에서 실행하는 과정을 설명하려고 합니다. - 사용방법 1. llama.c..

# ChatGPT를 사용해서 업무효율을 높힐 수 있는 경우를 정리하는 시리즈입니다 - ChatGPT는 이제 모르는 분이 없으실 것입니다. 하지만 주변에 물어보면 막상 실제 업무에 적극적으로 활용해서 사용하는 경우는 많지 않았습니다. 아무래도 챗봇의 형태다 보니 실제로 무엇을 할 수 있는지, 어떻게 원하는 내용을 얻을 수 있는지를 사용자가 알아야 하기 때문이라고 생각이 됩니다. 본 부려먹기 시리즈에서는 실제 제가 ChatGPT를 활용하는 사례와 원하는 결과를 얻는 과정을 정리하려고 합니다. 참고하셔서 업무 효율에 도움이 되셨으면 좋겠습니다 # ChatGPT를 사용한 NextJS SEO 작성하기 - ChatGPT가 4.0으로 넘어오면서, 웹 페이지를 탐색할 수 있는 기능이 추가되었습니다. 이 기능을 사용하기..

# Flutter 패키지 이름 변경하기 - change_app_packate_name이라는 패키지를 포스팅한 적이 있습니다. 하지만 Flutter 생태계나 Android, IOS와 같은 네이티브 프레임워크도 계속 발전 및 변화가 있다보니, 유지보수가 지속적이지 않을 경우, 조금만 업데이트가 부족해도 제대로 작동하지 않는 경우가 많습니다. 본 포스팅에서는 rename이라는 패키지와 사용법을 알려드리려고 합니다. # 라이브러리 페이지 https://pub.dev/packages/rename rename | Dart Package Helps you to change or rename your flutter project BundleId and AppName for Ios, Android, MacOS and L..