YumeHANA YUME'S DEV

web에서는 localstorage가 존재해서 사용자를 기준으로 저장하는게 아니라면 localStorage를 활용하여 간단한 데이터를 저장할 수 있다. react native도 마찬가지로 asyncStoage가 존재하며 여기에 localStorage처럼 key, value형태로 저장이 가능하다.앱 테마 설정경우 이를 활용해서 저장하면 편하게 관리할 수 있기때문에AsyncStorage를 활용하여 데이터를 저장 Initializedasync-storage 패키지를 설치npm install @react-native-async-storage/async-storageUseage설정한 테마를 저장할 것이므로 테마 값 관리 같은 경우는 아래 글을 참고https://yumedev.tistory.com/90 [ Reac..

앱을 만들면서 항상 테마 설정을 하는데 react native의 테마 설정하는 방법을 찾아보는데 대부분이 hook을 이용해서 구현하는 방법들이 대부분 이었다. 근데 이러면 내가 원하는 곳에 원하는 색을 넣을려면 해당 컴포넌트에서 결국 hook을 사용해야하기때문에컴포넌트에서 계속 hook을 불러와서 쓰는 불편함을 없애고 싶어서 다른 방법으로 구현해보았다. Initialized우선 hook을 사용하지 않고 할려고 해도 상태관리는 해야하기때문에 zustand를 이용npm install zustandZustandzustand에서 theme 값과 변경 함수를 정의 theme의 타입은 아래처럼 select에서 선택해서 설정할 수 있게 할 것이므로 해당 key값을 가져와서 타입 정의export const select..

앱개발을 하면 하단의 네비게이션이 거의 필수이기에bottom-tabs 패키지를 사용하여 bottom navigation기능을 구현Initializedbottom-tabs를 사용할때는 react-native-screens를 같이 설치해줘야한다.그렇지 않으면 계속 react native에서 해당 스크린을 찾을 수 없다고 계속 에러가 발생하게 된다. npm install react-native-screens @react-navigation/bottom-tabsUseage우선 전역으로 bottom navigation을 적용할 것이므로 app.tsx 파일에 NavigationContainer를 만들어준다.import { SafeAreaProvider,} from 'react-native-safe-area-con..

react native에서 svg icon을 사용하기 위해 svgIcon component를 생성Initialized우선 svg icon을 사용하기 위해서 react-native-svg 패키지를 설치해준다.npm install react-native-svg 이후 타입스크립트를 사용하기때문에 types > svg.d.ts파일을 생성// svg.d.tsdeclare module "*.svg" { import React from 'react'; import { SvgProps } from 'react-native-svg'; const content: React.FC; export default content;} tsconfig.json에서 types폴더를 include해줘 svg 타입을 ..

뭔가 음식점 찾을때마다 블로그 리뷰를 기준으로 많이 찾아보는데어디갈지 모르면 리뷰가 가장 많은 곳으로 가는데계속 페이지 넘겨가면서 찾는게 힘들어서 아예 블로그 리뷰를 크롤링해서 장소를 추천하는 사이트를 만들어보고자했다. 아직은 계속해서 수정을 진행하고는 있지만, 기능들은 작동해서 일단 배포를했다. https://blogexplorer.vercel.app/ 오디가지? search-place.vercel.app 우선 메인 화면으로는 카테고리와 장소 및 키워드를 입력 후 검색 버튼을 누르면네이버 블로그 api를 호출하며 해당 장소와 키워드로 블로그 리뷰 100개를 가져온다. 이후 네이버 블로그 리뷰의 글의 제목과 미리보기 설명문구를 합쳐서 해당 글에장소로 의심될만한 장소의 단어를 찾는다 이 과정에서 형태소 ..

검색한 장소를 카카오 지도에 표시하기 위해서 카카오지도 api를 활용했다. 카카오 개발자 센터에서 api를 발급받고 난후 카카오 지도는 Javascript Key를 사용한다.Initializedkakao sdk를 사용하기위해 해당 라이브러리를 설치해준다.react-kakao-maps-sdk는 kakao map을 react에서 편하게 쓸 수 있게 되어있는 라이브러리이어서좀 더 편하게 사용할 수 있다. 예전에는 ref로 직접 참조해서 사용했었는데 해당 라이브러리를 사용하면 단순히 컴포넌트만 불러와서 사용할 수 있어서 편하다.npm install react-kakao-maps-sdk 이후 .env.local파일에 환경변수를 등록해준다.앞에 NEXT_PUBLIC을 안붙히면 route에서만 해당 환경변수를 불러올..

네이버랑 카카오 api를 활용하여 데이터를 가져오는 프로젝트를 하고 있는데이 경우에 계속 api를 호출하면 횟수가 금방 줄어들기때문에 이를redis를 활용하여 캐시 관리하여 횟수를 줄이고자 했다. upstash를 활용하여 redis를 사용하기로 했다.Upstash는 Redis나 Kafka를 서버리스 방식으로 사용할 수 있는 서비스이다.https://upstash.com/ Upstash: Serverless Data PlatformUpstash is a serverless data platform providing low latency and high scalability for real-time applications. Optimize your data infrastructure with Upstash'..

db를 사용하기 위해 간단한 정보를 저장할 것이기에 무료 클라우드 DB인 mongoDB를 사용하기로 했다. Installment우선 mongoDB를 사용하기 위해 mongoDB라이브러리를 설치npm install mongodbInitalizedmongoDB 페이지를 에서 connect 버튼을 누르면 connect정보를 준다. 이를 .env.local에 환경변수를 등록 이때 env.local에 환경변수를 저장할때는 따옴표 안에 넣어서 사용 이상하게 따옴표안에 안넣으면 계속 DB연결에서 오류가 발생했다. 이후 mongoDB util파일을 만든다.이는 매번 DB를 호출할때 DB를 연결을 하지 않기 위해서처음 실행했을때 해당 유틸이 실행되면서 client instatnce에 연결정보를..