Yeonhub 😊
⭐ https://github.com/yeonhub
📧 lsy3237@gmail.com

React Native Expo Firebase Analytics 추가 하기
·
Front-End
Firebase Analytics는 사용자들이 앱을 어떻게 사용하는지, 어떤 기능이 인기 있는지, 앱 사용 중 어떤 행동들이 자주 일어나는지 등을 알 수 있게 해주는 도구입니다. 이 데이터를 기반으로 앱을 개선할 수 있고, 사용자 경험을 더 좋게 만들 수 있습니다.앱을 운영하면서 "사용자가 내 앱을 어떻게 사용할까?"라는 궁금증이 들 때, Firebase Analytics가 큰 도움이 됩니다. 예를 들어, "어떤 화면을 오래 보고, 어떤 버튼을 자주 클릭하는지" 등을 알 수 있습니다. 그래서 이 데이터를 통해 앱을 더 효과적으로 개선할 수 있게 됩니다. 1. Friebase/app, Firebase/analytics 설치https://rnfirebase.io/#install-react-native-fir..
React Native Firebase Analytics 추가 하기
·
Front-End
Firebase Analytics는 사용자들이 앱을 어떻게 사용하는지, 어떤 기능이 인기 있는지, 앱 사용 중 어떤 행동들이 자주 일어나는지 등을 알 수 있게 해주는 도구입니다. 이 데이터를 기반으로 앱을 개선할 수 있고, 사용자 경험을 더 좋게 만들 수 있습니다.앱을 운영하면서 "사용자가 내 앱을 어떻게 사용할까?"라는 궁금증이 들 때, Firebase Analytics가 큰 도움이 됩니다. 예를 들어, "어떤 화면을 오래 보고, 어떤 버튼을 자주 클릭하는지" 등을 알 수 있습니다. 그래서 이 데이터를 통해 앱을 더 효과적으로 개선할 수 있게 됩니다. 1. Firebase/app, Firebase/analytics 설치https://rnfirebase.io/analytics/usage#installat..
Expo 외부 앱으로 연결 Deep Linking 방법 (길찾기, 유튜브 등)
·
Front-End
앱을 구현하다 보면 다른 앱으로 연결을 해야 할 때가 있습니다.1. 전화 / 문자2. 인스타그램 프로필 / 페이스북 페이지 열기3. 지도앱으로 길찾기4. 카카오톡으로 공유하기 1. Linking그때 Expo에서 사용하는 메서드가 Linking입니다.https://reactnative.dev/docs/linking Linking · React NativeLinking gives you a general interface to interact with both incoming and outgoing app links.reactnative.dev사용법은 간단합니다. 특정 웹 페이지를 열고 싶다면 아래와 같이 작성하면 되고Linking.openURL("https://www.google.com")앱의 설정 페이..
Expo Node.js FCM 푸시 알림 보내기
·
Back-End
React Native Expo 앱에서 FCM 푸시 알림을 받기 위한 설정은 위 포스팅을 확인하시면 됩니다.https://nonmajor-be-developer.tistory.com/entry/React-Native-Expo-FCM-%ED%91%B8%EC%8B%9C-%EC%95%8C%EB%A6%BC-%EC%84%A4%EC%A0%95 React Native Expo FCM 푸시 알림 설정본 포스팅에서 다뤄볼 것1. Firebase FCM2. FCM 서비스 계정 키 얻기3. FCM 서비스 키 얻기4. Expo, FCM push token 얻기5. push 알림 채널 및 설정6. 포그라운드 알림 설정7. 포그라운드 알림 처리8. 알림 클릭 처nonmajor-be-developer.tistory.com 서버에서..
React Native Expo FCM 푸시 알림 설정
·
Front-End
본 포스팅에서 다뤄볼 것1. Firebase FCM2. FCM 서비스 계정 키 얻기3. FCM 서비스 키 얻기4. Expo, FCM push token 얻기5. push 알림 채널 및 설정6. 포그라운드 알림 설정7. 포그라운드 알림 처리8. 알림 클릭 처리 및 데이터 담아 보내기9. 프로덕션 배포를 위한 EAS 설정 FCM 푸시 알림 소개에 앞서 Expo 푸시 알림이 궁금하신 분들은 아래 링크의 공식문서를 확인하세요.https://docs.expo.dev/push-notifications/push-notifications-setup/ Expo push notifications setupLearn how to set up push notifications, get credentials for develo..
React Native Expo google map 지도 구현 방법
·
Front-End
본 포스팅에서 다뤄볼 것1. expo google map 구현2. 지도 초기 위치 (고정/현재위치)3. 현재 위치 표시4. 현재 위치 이동 버튼 (커스텀)5. 지도 이동 시 동작 (예: 현재 위치 재검색)6. 지도에 마커 표시 (커스텀)7. 마커 선택 시 말풍선(callout) 표시 (커스텀)8. 검색 리스트 선택 시 해당 위치로 이동+마커+말풍선 1. expo google map 구현https://docs.expo.dev/versions/latest/sdk/map-view/ MapViewA library that provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS.docs.expo.de..
챗봇은 어떻게 개떡같이 말해도 찰떡같이 알아들을까?
·
AI
"개떡같이 질문했는데, 어떻게 찰떡같이 대답하지?" AI와 대화를 하다 보면 세심한 배려에 감동할 때가 많다. 한 번이라도 되물을 법도 한데 본인이 알고 있는 정보에서 어떻게든 답을 하려고 한다. (물론 말도 안 되는 답변을 할 때도 있지만) 그렇다면 AI는 어떻게 학습하고 내 질문을 알아듣고 답변을 해줄까? 1. 벡터 임베딩 : 단어를 숫자로 바꾸는 마법챗봇에게 질문을 하고 답변을 얻기 위해 우선 학습을 해야 합니다. 인간이 제공하는 데이터를 답변을 하기 가장 좋게 학습하려면 벡터 임베딩이라는 기술이 필요합니다.벡터 임베딩은 단어를 고차원의 숫자 공간에 매핑하는 기술이며 단어들을 숫자로 이루어진 좌표로 변환하는 작업입니다. 예를 들어 아래와 같은 답변을 학습시키면 서로 비슷한 형식이지만 필요한 정보가 ..
[1-2차] 프리온보딩 챌린지(AI) - AI로 나의 업무 스킬 업그레이드하기
·
PRE-ONBOARDING_AI (11월)
https://www.wanted.co.kr/events/pre_challenge_ai_6 AI로 나의 업무 스킬 업그레이드하기 | 프리온보딩 AI 챌린지 11월 | 원티드AI 시대에 나의 역량을 배로 높여줄 방법들을 소개하는 강의입니다. AI를 업무에 활용하는 방법을 미리 살펴보고, 문제 해결 과정에서 AI와 협력하는 이유와 방법을 깊이 있게 탐구해봅니다.www.wanted.co.kr 내년에 AI로 커리어 전환을 목표를 하고 있기에 학위 취득과 더불어 다양한 경험을 쌓고 싶었습니다.그동안 몇 차례 프론트 엔드 직무로 프리온보딩을 참여했는데, 이번 기회에 AI 챌린지도 모집을 하기에 참여했습니다. 챌린지 목표가 현직자들이 AI를 활용하여 업무 효율을 높이는 것에 있습니다.지금도 현재 상황에 맞는 라이브러..
React Native Expo에 google AdMob 추가하기
·
Front-End
1. react-native-google-adsexpo 앱에 google admob을 추가할 때 expo-ads-admob 라이브러리를 사용했지만, Expo SDK 46을 기준으로 더 이상 지원하지 않습니다.현재 포스팅일(2024.10) 기준 Expo SDK 버전은 51입니다.@Expo Versionhttps://github.com/expo/expo-ads-admob GitHub - expo/expo-ads-admobContribute to expo/expo-ads-admob development by creating an account on GitHub.github.com 공식 문서에서 추천하는 react-native-google-mobile-ads 라이브러리를 사용할 것입니다.https://githu..
AWS EC2 Linux Ubuntu cron 스케줄러 + Node.js
·
Server
1. 스케줄러매일 아침 같은 시간에 알람이 울리는 것처럼 서버에서도 정해진 날짜, 요일, 시간에 특정 기능을 해야 할 경우가 있습니다.개발 서버를 예로 들면, 정기적인 백업, 주문 재고 알림, 가격 변동, 구독 계정 활성화/비활성화 등 특정 시간에 한 번만 실행이 되거나 주기적으로 실행이 될 필요가 있는 기능들이 있습니다.이를 위해 필요한 것이 서버 스케줄러인데, 오늘은 제목에서 알 수 있듯이 JavaScript 파일을 Linux에 기본 내장된 기능인 cron 스케줄러에 등록해 보겠습니다. 2. cronhttps://help.ubuntu.com/community/CronHowto CronHowto - Community Help WikiIntroduction Cron is a system daemon us..
React Native Top Sheet 직접 구현 #2
·
Front-End
지난번에 gesture handler, reanimated 라이브러리를 사용해 top sheet를 직접 구현해 보았는데, 오늘은 top sheet가 확장/축소 됐을 때 다른 컨텐츠를 보여주고 하단에 자연스럽게 스크롤이 생기게 적용했다. 1. 컨텐츠 배치top sheet 아래 부분에 메인 컨텐츠가 표시되어야 하므로 Section 컴포넌트를 ScrollView로 묶어주었다.   현재 상태(top sheet가 축소된 상태)에서는 Section에 스크롤이 생기지 않는다.하지만 확장되면 늘어난 top sheet의 높이만큼 스크롤이 생긴다.    2. 확장/축소 컨텐츠위 사진처럼 서로 다른 컨텐츠를 자연스럽게 변환하기 위해 몇 가지 기능을 추가해야 했다. 2-1. useSharedVa..
React Native Top Sheet 직접 구현 #1
·
Front-End
회사에서 진행하는 Kotlin 앱을 React Native로 컨버팅 하는 프로젝트 진행 중 기획 단계가 끝나고 어떤 라이브러리를 사용할지 설계 중이었다. 기존 앱의 메인 페이지에는 상단에 드래그 가능한 Top Sheet가 구현되어 있는데, 열심히 찾아보아도 RN에선 Botton Sheet 라이브러리만 있을 뿐 원하는 Top Sheet 라이브러리는 없었다. # 가장 많이 사용하는 Bottom Sheet 라이브러리https://ui.gorhom.dev/components/bottom-sheet/ React Native Bottom Sheet | Gorhom UIA performant interactive bottom sheet with fully configurable options 🚀ui.gorhom.d..
Python -> Node.js 컨버팅 회고
·
Back-End
웹 스크래핑을 할 때 일반적으로 많이 사용하는 언어는 아마 파이썬일 것이다.다른 언어에 비해 배우고 쉽고, 웹 스크래핑에 특화된 라이브러리들이 많기 때문일 것이다. 그러나 JavaScript에 익숙한 사람이라면 새로운 언어를 배우지 않고 node 환경에서 웹 스크래핑을 하는 것도 좋은 선택지라고 생각한다. https://blog.apify.com/web-scraping-javascript-vs-python/ Web scraping in JavaScript vs. PythonLearn how to choose the right tools for web scraping in 2024.blog.apify.comJavaScript is rightfully referred to as the language of ..
뒤늦은 라스콘4 후기
·
Etc
https://rising2024.rocketpunch.com/ 라스콘4 - Rising to Global 🚀FAQ 🧐rising2024.rocketpunch.com라이징 스타트업 콘서트는 로켓펀치에서 주관하는 컨퍼런스다.트랙 A와 B로 나누어 신청을 받았고 운 좋게 트랙 A에 당첨되어 참석할 수 있었다.  1. 인공지능 세상을 만드는 AIoT : 혁신 기술과 실용 사례Assistant Professor / Director of Smart Communities and IoT Lab - 김정윤 1. AIoT a. 기존의 인공지능과 사물인터넷을 융합한 기술2. AIoT의 장점 a. 초연결성, 초지능성, 초융합성 모든 사물이 사람과 연결되고, 인간의 사고 능력을 뛰어넘는 인공지능을 활용하여, 기존 기술로는..
PHP -> Node.js 컨버팅 회고
·
Back-End
매주 약 18만 개의 숫자 조합을 생성하고 DB에 저장해야 하는 업무가 있다. Kotlin으로 짜인 앱에서 숫자 조합을 생성 요청을 보내면 서버에 있는 PHP 코드가 해당 로직을 확인한 뒤 숫자 조합을 생성하고 DB에 저장하게 된다. 하지만  요구사항에 실시간으로 스크래핑한 후 몇 가지 알고리즘 조건을 지켜야 했기에 18만 개의 조합을 모두 DB에 저장되기까지 약 4시간 정도의 긴 시간이 걸렸다. 앞으로 계속 사용해야 할 코드이기 때문에 Javascript로 컨버팅하기로 했다. 1. cheeriohttps://cheerio.js.org/docs/intro Welcome to Cheerio! | cheerioLet's get a quick overview of Cheerio in less than 5 mi..