본문 바로가기

소셜독

 (13)
산책기록 데이터 압축해서 DB에 저장하기 산책데이터를 DB에서 저장하여 사용하고있는데, 산책을 오래해서 데이터가 많이 쌓이게 되면, 용량이 너무 커져서 저장이 되질 않는다. 그래서 최대한 양을 줄여보기로 했다. 약 100KB에 근접하면 DB에 string형태로 저장이 되질 않는다. 물론 저장이 된다고 하더라도, 수십 KB는 좀 문제가 있는 사이즈임이 분명하다. 개선을 시작해 보자. [ {latitude: 37.3364485, longitude: -121.8576395}, {latitude: 37.3356827, longitude: -121.8587522}, {latitude: 37.334909, longitude: -121.8599979}, {latitude: 37.3341251, longitude: -121.8612771}, {latitude..
react-native-maps 줌 state로 관리하기 const [mapZoom, setMapZoom] = useState(0) { setMapZoom( Math.ceil(Math.log(360 / region.longitudeDelta) / Math.LN2), ); }} > Math.ceil(Math.log(360 / region.longitudeDelta) / Math.LN2), 수식을 통해 현재 화면내에 그려진 지도의 영역을 통해서 줌레벨을 계산해 낼수 있다. user가 지도를 줌 할때, 해당 이벤트가 동작하고, 줌 된 상태의 레벨을 계산하여 state에 반영한다.
GoogleMaps PolyLine 전체 보기 산책기록을 누르면, 해당 기록의 모든 폴리라인이 한눈에 들어오게 카메라를 이동시키는 코드를 작성했다. 생각보다 잘 동작한다. https://stackoverflow.com/questions/36685372/how-to-zoom-in-out-in-react-native-map How to zoom in/out in react-native-map? I am using react-native to build a map application. The api I am using is from this link: https://github.com/lelandrichardson/react-native-maps. Below is the code I bring the map on my app. I wonde... sta..
산책기록 gps 필터링 개선 오늘은 산책정보를 좀 더 보기좋게 바꿔보려고 시도를 했다. 고등학교때 센서데이터를 보정하기 위해 칼만필터를 사용했던 기억이 나서, 칼만필터를 써보기로 결정했다. kalman-filter kalman-filter Kalman filter (and Extended Kalman Filter) Multi-dimensional implementation in Javascript. Latest version: 1.9.4, last published: 10 days ago. Start using kalman-filter in your project by running `npm i kalman-filter`. There are no other projects in the np www.npmjs.com 간단하게 원리를 ..
산책 기록 기능 Geolocation + Foreground Tasks 이 글은 소셜독의 기능 중 하나인 산책기록 기능을 구현하면서 겪은 문제들을 기록하기 위해서 작성되었다. https://github.com/mauron85/react-native-background-geolocation GitHub - mauron85/react-native-background-geolocation: Background and foreground geolocation plugin for React Native. Tracks use Background and foreground geolocation plugin for React Native. Tracks user when app is running in background. - GitHub - mauron85/react-native-back..
ApolloClient Authentication Error Handling 오늘은 전부터 해결하려고 고민했던 ApolloClient로 AccessToken을 자동 갱신하는 기능을 구현했다. 전에 다른 에러를 검색하다, 에러 핸들링 함수를 통해서 자동으로 AccessToken을 갱신하는 방법에 대해서 본것 같았다. 그래서 그 부분을 검색해봤더니, 이미 문제를 해결해서 포스팅한 사람이 있었다. https://chanyeong.com/blog/post/47 Apollo Client 토큰 재발급 :: chanyeong 클라이언트와 서버가 통신할 때 토큰을 사용할 경우 토큰을 탈취당할 우려가 있기 때문에 보통 API에 접근할 때 사용하는 Access Token과 Access Token을 재발급 받는 Refresh Token으로 구성하는 경우가 많 chanyeong.com 덕분에 아주 쉽..
bcrypt로 비밀번호 암호화 bcrypt 라이브러리 주소 bcrypt bcrypt A bcrypt library for NodeJS.. Latest version: 5.0.1, last published: a year ago. Start using bcrypt in your project by running `npm i bcrypt`. There are 3360 other projects in the npm registry using bcrypt. www.npmjs.com NestJS의 경고. 비밀번호는 단반향으로 암호화해서 DB에 저장해야한다. Nest에서 예로든 bcrypt라이브러리를 적용해 보자. 도큐먼트를 좀 읽어보자 Security Issues And Concerns Per bcrypt implementation, only..
React + Apollo Client-Side Pagination Cache 이 글은 React + Apollo Client 환경에서 Pagination된 데이터를 캐싱하기 위한 코드를 기록하기 위해서 작성되었다. 클라이언트에서 Cache 를 하려고 하는 이유. 1. API콜을 줄임으로써, 서버부하 감소. 트래픽 감소. UI반응 지연 감소. 대부분의 Cache이유와 동일한 이유이다. 서버로부터 가져온 데이터가 실시간으로 변화하는 데이터가 아니라면, 굳이 불러왔던 정보를 두고 새로 불러 올 필요가 없다. 새로 불러오게 된다면 사용자는 매번 로딩을 기다려야 할 뿐만 아니라, 서버에 부하도 생기게 되고, 이는 서버의 처리 지연과 인프라 비용증가로 이어지게 된다. 이부분을 해결하기 위해 cache를 사용한다. 2. Cache를 구조에 맞게 잘 작성한다면, 데이터 변경시에도 캐시를 이용할..

티스토리툴바