Dahee's Solution Hub

CSR: Client Side Rendering- 렌더링이 클라이언트 쪽에서 일어난다.- 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. - 클라이언트는 그것을 받아 렌더링을 시작한다. SSR- SEO 최적화- SSR이 서버 자원을 더 많이 사용한다.  돔트리- 왜 hook이 바뀔 때 돔트리가 바뀌는건지 HOC: High Order Component- 컴포넌트 로직 재사용을 위한 패턴- HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다.- 함수형 컴포넌트가 등장하고 나서는 거의 사용되지 않는다. 고차 컴포넌트 지옥에 빠질 수도 있기 때문.- 고차 컴포넌트는 사이드 이펙트가 전혀 없는 ..

React Native에서 폰트 사이즈는 어떻게 관리할까? 그냥 피그마에서 본 폰트크기가 10이라면, fontSize: 10 으로 하면 될까? 기기에 맞게 대응해주는 방법이 있다. 물론 더 세세하게 나누자면, 디바이스의 가로가 (a~b)px: 8, (b~c)px: 10, (c~d)px: 12 이런식으로 나눌 수도 있겠다. 그러나 그렇게까지는 세세하게 나눈 상황은 아니라서, 우리는 폰트사이즈르 계산할 때 하나의 함수를 통하고, 그 안에서 PixelRatio를 이용하기로 한다. PixelRatio란? 글꼴 크기에 대한 축척 비율을 반환합니다. 이 비율은 절대적인 글꼴 크기를 계산하는 데 사용되므로 이에 크게 의존하는 모든 요소는 이 비율을 사용해서 계산해야 합니다. 안드로이드: Settings > Displ..

너무나도 완벽한 블로그가 있어 그대로 첨부하였다.  https://yong-nyong.tistory.com/46#--%--env-d-ts

react native에서 apollo client를 이용한다. 클릭 이벤트가 발생할 때마다 특정 mutation을 호출하는데,이 mutation이 호출될 때마다 재렌더링이 2번 되는 것을 발견했다. 바로 이 mutation이다.62 line에서 return값 배열의 두번째 원소에는 loading, data 등이 들어가는데,mutation을 호출하면 이 loading과 data값이 업데이트되면서 총 2번의 렌더링이 더 진행되는 것이다. 그래서 결과값은 필요없다고 알려주고 재렌더링을 방지하는 옵션이 있지 않을까? 해서 찾아봤는데,역시나 있었다.https://www.apollographql.com/docs/react/data/mutations/#ignoreresults Mutations in Apollo C..

import { getStatusBarHeight } from 'react-native-status-bar-height'; const statusBarHeight = getStatusBarHeight(false); // skip android = false; const deviceHeight = Dimensions.get('screen').height; const windowHeight = Dimensions.get('window').height; deviceHeight: 기기 전체 세로길이 windowHeight: 앱이 차지하는 만큼의 세로길이 statusBarHeight는 상태바의 세로길이 공식문서 링크: https://reactnative.dev/docs/dimensions 문제는 windowHei..

https://github.com/zo0r/react-native-push-notification GitHub - zo0r/react-native-push-notification: React Native Local and Remote NotificationsReact Native Local and Remote Notifications. Contribute to zo0r/react-native-push-notification development by creating an account on GitHub.github.com이 라이브러리를 사용할 때 주의점이 있다.보다시피 id를 설정할 수 있는데, 한번 지정된 id는 다시 사용하지 않는 것이 좋다.안그러면 이 푸시에 넣은 데이터를 꺼내올 때 예전 id의 데..

어느날... 이러한 CS가 왔다.광고를 다 봤는데도 상태바에 가려져서 X버튼을 누르지 못했다는 것!현재 react native에서 보상형 영상 광고를 띄워주기 위해@react-native-firebase/admob: 11.5.0을 사용하고 있다. 서드파티... admob을 원망하며 admob+statusbar를 키워드로 이슈를 찾아봤는데 마땅히 해결책이 없었다.-> 그런데 상태바를 가리는거면.. 상태바를 없애면 되는 문제 아닌가? 싶었다. 당장 react-native에서  StatusBar를 이용해 숨겨보았다.상태바 부분을 터치범위로 두고, 상태바가 있을 때와 없을 때 각각 터치가 가능한 지 실험해보았다.예상한대로, 상태바가 있을 때는 클릭이 가능했고 없을 때는 불가능했다. 위 영상에서 사용한 코드를 첨..

[React Native] linkTo 사용 시, The 'navigation' object hasn't been initialized yet 문제 해결 방법 (react-navigation NavigationContainer 마운팅된 직후를 onReady로 감지하기)특정 페이지에 도달 할 수 있는 링크인 딥링크를 이용하고 있다. 앱이 완전히 닫힌 상태에서 딥링크로 앱을 열면,(Android의 경우) Linking.getInitialURL 로 (iOS의 경우) Linking.addEventListener('url', handleOpenUrl) 로앱을 열게 한 url 장본인(?)을 알 수 있다.(이 글은 Android 기준으로 코드를 작성했습니다.) const url = "roubitapp://root-t..

채팅화면을 구성하는 2가지 방법에 대해 알아봅시다!(FlatList의 inverted, onContentSizeChange) 1. FlatList의 inverted prop 사용const data = [ "안녕하세요! 채팅을 입력해주세요", "안녕", "반갑습니다!", "나는 보라야",] inverted prop을 사용하면data는 위가 아닌 아래부터 배치가 됩니다. (좌)이 상태라면, data가 추가될 때마다 위에 쌓이게 됩니다.따라서 data.reverse()를 통해 data의 순서를 역으로 세팅해줍니다. (우) 아주 간단하죠! 그런데 data의 첫원소인 "안녕하세요! 채팅을 입력해주세요"가 빨간박스의 좌상단이 아닌, 파란박스의 좌상단부터 배치되게 할 수는 없을까요? 그렇다면 inverted는 포..

메세지 큐 시스템: SQS,Worker,Cron,Queue API Server목표- 대량의 푸시를 Main Server 영향 가지 않도록 [정해진 시간에,  따로, 안전하게] 보내기: 유저 경험 최적화🔥: DB 부하 줄여 비용 절감🔥 현재 문제 상황: Main Server에서 [DB에게 무리한 데이터를 요청]하고 [무거운 로직을 메인서버에서 돌려] 사용자에게 푸시를 보내는 과정에서 부하가 발생하여, [비용이 들고] [유저 경험을 안좋게] 만든다. 문제점: [DB에게 무리한 데이터를 요청]해결법: DB에게는 최대한 심플하게 데이터 요청where절에 많은 요청 금지. 최대한 select만 해서 데이터 가져오고, 나머지 데이터 필터링은 (DB보다 값싼) 인스턴스 안에서 하자. 문제점: [무거운 로직을 메인..