Jake의 블로그

# 2024년 새해 복 많이 받으세요! - 새해가 된 기념으로 나이를 한 번 확인해볼려고 했더니, 잘 사용하던 네이버 나이 계산기가 구글에서 검색이 되지 않았습니다. 네이버에서는 바로 찾아지는데 말입니다. 그래서 새해 인사도 적을 겸 한 줄 팁으로 포스팅 작성합니다. 아래 링크로 사용하세요. 사진 클릭하면 이동합니다.

# 아이폰(시뮬레이터) 프레임까지 함께 스크린 샷 찍는 방법 - 아이폰 앱을 개발을 완료하는 시점이 다가 오면, 앱스토어 등에 제출하기 위해서 아이폰의 프레임이 포함된 스크린 샷을 필요로 하게 되는 경우가 있습니다. 본 포스팅에서는 이럴 때 가장 쉽게 사용할 수 있는 방법을 소개하려고 합니다. 참고로 맥 운영체제에서만 가능합니다. # 방법 소개 - 우선 스크린 샷을 찍고 싶은 아이폰 기기의 시뮬레이터를 실행합니다. 그리고 스크린 샷을 찍을 앱을 실행합니다. - 이제 맥 운영체제의 스크린 샷 단축키인 Cmd + Shift + 4를 누릅니다. 그리고 시뮬레이터위로 커서를 가져간 후에 스페이스 바를 누릅니다. 사실 이 기능은 스크린 샷 영역을 커서 가 속한 윈도우를 영역으로 지정하는 것입니다. 만약 제대로 지..

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

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

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

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

# 인터넷 속도 측정하는 방법 - 인터넷을 사용하다가 왠지 속도가 느린 것 같을때나, 새로 공유기를 구입한 경우 등 여러 상황에서 인터넷 속도가 궁금할 때가 있습니다. 이를 확인하는 방법에는 여러가지가 있지만, 가장 쉽고 빠른 방법을 소개 해 드립니다. https://fast.com/ko/ 인터넷 속도 테스트 회원님의 다운로드 속도는 얼마나 될까요? FAST.com의 간편한 인터넷 속도 테스트로 몇 초 안에 ISP 속도를 알아볼 수 있습니다. fast.com - 사용법은 정말 간단합니다. 아래의 사이트에 접속하면 자동으로 속도 측정이 시작되고 일정시간 기다리신 후 측정된 결과 값을 확인하시면 됩니다.

# Slack(이하 슬랙)은 웹 또는 앱 소프트웨어 개발 협업에서 가장 많이 사용하는 툴 중 하나 입니다. 또한 슬랙에서 제공하는 다양한 API들 또한 슬랙을 더 매력적으로 느끼게 해주는 요소입니다. 그 중에서도 Webhook은 웹이나 앱 개발 환경에서 사용자 이벤트를 추적하거나 알림을 받고 싶은 경우, 복잡한 설정 없이 쉽게 사용할 수 있어 아주 유용합니다. 오늘은 이를 설정하는 방법을 소개하려고 합니다 Sending messages using Incoming Webhooks Creating an Incoming Webhook gives you a unique URL to which you send a JSON payload with the message text and some options. api..

# Simple Icons - 웹 또는 앱 서비스를 제공하려다 보면 다운로드 링크, 지원하는 플랫폼을 표시, 소셜미디어등 여러가지 상황에서 브랜드의 로고나 아이콘이 필요한 경우가 있습니다. 개별 브랜드에서 아이콘을 제공하기도 하지만, 일일히 이를 구하는 일은 귀찮고 번거로운 일입니다. 본 포스팅에서는 이런 경우, 도움이 될 사이트를 알려드리려고 합니다. # 사용법 https://simpleicons.org/ Simple Icons 2437 Free SVG icons for popular brands simpleicons.org - 사이트에 접속을 한 후, 검색 창에 원하는 브랜드 명을 검색 하셔서 찾으신 다음, svg나 pdf 파일로 다운 받거나, svg 코드로 바로 복사할 수 있습니다. 그리고 필요한 ..

# IconKetchen을 활용해서 앱 아이콘을 만드는 방법 소개 - 크로스 플랫폼 개발을 진행하게 되면, 아이콘 작업은 피할 수 없는 작업이지만, 여러 플랫폼 별로 다양한 크기 및 포맷이 다르기 때문에, 이를 생성 및 적용하는 것은 귀찮은 일입니다. 특히 React Native의 경우, 기존에 잘 활용하던, react-native-make가 더 이상 유지보수가 되고 있지 않아서, 고민하던 차에 예전에 안드로이드 아이콘 생성에 사용했었던, Android Asset Studio가 기억이 나서 찾아보니, IconKitchen이라는 서비스로 교체가 되었다는 사실을 알게 되었고, 너무 편해서 혼자 쓰기에는 아쉬워서 본 포스팅을 작성하게 되었습니다 # 사용방법 - IconKitchen 사이트에 접속을 합니다. 그..