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

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

# react-native-magic-modal을 활용한 Modal 구현 방법 소개 - 안녕하세요. Jake입니다. 앱을 개발하는 과정에서 모달은 빼놓을 수 없는. UI 요소 중 하나입니다. RN에서 개발을 좀 해보신 분들이라면, RN에서 모달이 필요하면, react-native의 기본 모달로 직접 구현하거나 react-native-modal 사용하셨을 것입니다. 두가지 모두 많이 사용되는 좋은 Modal이지만, 생각보다 추가 해야 할 코드가 많고, 모달의 Show/Hide 등을 직접 관리 해야 해서 간단한 모달이어도 구현에 손이 많이 갑니다. 본 포스팅에서는 이런 경우에 활용할 수 있는 좋은 대안을 소개하려고 합니다. # Github Page GitHub - GSTJ/react-native-magic-..

# react-native-mmkv 저장소 라이브러리 사용 방법 소개 - 안녕하세요 Jake입니다. 본 포스팅에서 소개할 라이브러리는 react-native-mmkv라는 저장소 라이브러리입니다. React Native를 사용해보신 분들이라면, 로컬 저장이 필요할 때 자연스럽게 AsyncStorage를 사용해보셨을 것입니다. 그러다보니 대안을 찾아본 적이 없었는데, 이번에 다른 라이브러리와의 호환성 이슈로 이 라이브러를 찾게되었고, 깃헙 스타 4k 이상인 것으로 보아 이미 많은 분들이 사용 중이며 검증이 된 라이브러리라고 할 수 있을 것 같습니다. # 깃헙 저장소 https://github.com/mrousavy/react-native-mmkv GitHub - mrousavy/react-native-mmk..

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

# icon-set-creator으로 앱 아이콘 쉽게 변경하는 방법 소개(react-native-make는 놓아주자) - React Native로 개발을 하고 IOS, Android 플랫폼 모두에 앱을 출시해본 경험이 있는 사람이라면, 아이콘을 변경하는 일이 얼마나 번거롭고 귀찮은 일인지 아실 겁니다. 그렇기에 react-naitve-make 같은 라이브러리를 찾아서 사용하게 됩니다. react-native-make를 사용해보신 적 없으신 분들을 위해 설명하자면, 지정한 아이콘 이미지를 기반으로 각 플랫폼에서 요구하는 아이콘 사이즈를 폴더 구조에 맞게 자동으로 생성해 주는 도구라고 보시면 될 것 같습니다. 문제는 플랫폼 별로 요구하는 사항이 계속 업데이트가 되다 보니, 라이브러리의 유지보수가 중요한데, ..

# 다이아몬드 밸리 2023 이벤트 참여 방법 및 공략 정리- 작년에 이어 올해도 구글 다이아몬드 밸리 이벤트가 8월 1일에 시작되었습니다. 게임 방식이나 경품 응모 방법 등 변경된 점들이 있으므로 관련 된 내용을 중심으로 소개해드리려고 합니다. 게임 자체에 대한 공략이 별도의 공략법이 필요 할 정도는 아니므로 팁만 알려드리려고 합니다.- !!!  2024 다이아몬드 밸리 참여 방법은 여기로 !!! # 공식 사이트https://diamondvalley.withgoogle.com/ Google Play 다이아몬드 밸리 감사제Google Play만의 메타버스 감사제 다이아몬드 밸리가 돌아왔습니다! Google Play를 사랑해주시는 분들을 위해 준비된 특별한 공간을 탐험하고 선물을 받아 갈 기회를 놓치지 마..

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

# react-native-assets를 활용해서 네이티브 프로젝트에 에셋 추가하기 - React Native 환경에서 개발을 하다보면, Fonts를 변경하거나, 효과음이나 배경을을 추가하기 위해 MP3와 같은 음원 파일을 사용해야 하는 경우가 생깁니다. 문제는 이미지처럼 쉽게 포함시키지 못하고, XCode에 파일을 추가하거나, Android의 리소스에 추가하는 등의 추가작업이 요구됩니다. 하지만 이는 개발 하는 입장에서 시간을 빼았기는 귀찮은 일입니다. 본 포스팅에서는 이런 경우 도움이 되는 방법을 소개하려고 합니다 # 사용방법 - 자세한 사용방법 및 옵션들은 아래의 페이지에 잘 설명되어 있으니 참고하시기 바랍니다. GitHub - unimonkiez/react-native-asset: Linking ..

# Mac 운영체제에서 이미지의 배경을 날리는 기능 사용하기 - 아이폰에 기본 포함되었던 누끼 따기(이미지 배경 제거) 기능을 맥에서도 사용하실 수 있습니다. 본 포스팅에서는 아주 간단히 사용방법과 예제를 보여드려고 합니다. 먼저 이미지를 준비합니다. # 사용법 - 이미지를 선택한 후에 우클릭으로 메뉴 창을 띄운 후, Quick Actions > Remove Background를 누르시면 끝입니다. # 결과물 - 이미지에 따라서 결과물의 퀄리티가 약간 씩 차이가 나기는 하지만, 생각보다 아주 깔끔하게 잘 배경을 제거해 주기 때문에 불필요한 업무를 줄이는데 큰 도움이 될 것 같습니다.