코딩을 보라

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

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

작년에 촬영했던 React Native 강의에서는 파트1,2를 맡았다. https://fastcampus.co.kr/dev_online_renative/?utm_source=google&utm_medium=cpc&utm_campaign=hq%5E221101%5E213604&utm_content=react%20native%20module&utm_term=&gclid=Cj0KCQjwxYOiBhC9ARIsANiEIfa38W-r1gn6kZpiB9pzHCoM-LL_8vBzSpXDlOcZ4pBoWTLdG8lQfPMaAoEcEALw_wcB React Native를 활용한 빠르고 완성도 높은 앱 개발 with 21개 프로젝트 초격차 패키지 Online. | 패스 21개 프로젝트로 학습하는 'React Native로 만..

특정 페이지에 도달 할 수 있는 링크인 딥링크를 이용하고 있다. 앱이 완전히 닫힌 상태에서 딥링크로 앱을 열면, (Android의 경우) Linking.getInitialURL 로 (iOS의 경우) Linking.addEventListener('url', handleOpenUrl) 로 앱을 열게 한 url 장본인(?)을 알 수 있다. (이 글은 Android 기준으로 코드를 작성했습니다.) const url = "roubitapp://root-tab/setting" 위 url로 앱을 열면 SettingScreen이라는 화면으로 navigate해야한다고 가정해보자. 코드는 아래와 같이 짤 수 있다. (자세한 딥링크 세팅은 이곳을 참고) import React, { useEffect, useState } f..

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

Debounce 도입 배경 아래 화면은 루빗 앱에서 진행되는 회원가입의 최종 화면이다. - "이대로 시작할래" 버튼을 누를 때 회원가입 API 호출이 일어난다. - API 호출 결과, DB에 User가 하나 생성된다. - 이 때 "이대로 시작할래" 버튼을 여러번 누른다면? User가 여러개 생성된다. - 그렇다면 User가 여러개 생성되는 것을 방지해야한다. - 방지하기 위해 버튼을 누르는 순간 loading state를 true로 만들어 해당 버튼을 비활성화 시킨다. 위 조건을 코드로 구현하면 아래와 같다. const [totalSignupLoading, setTotalSignupLoading] = useState(false); /** 회원가입 */ const signup = () => { setTot..