코딩을 보라

파일구조에 대한 블로그 글을 쓰려는데... 파일트리를 도출하는 방법이 궁금해졌다. 무슨 명령어 하나만 치면 나오는거겠지? 그러했다. $ brew install tree tree를 깔고, $ tree tree 명령어를 실행하면 된다. 원하는 폴더만 트리를 보고싶다면, $ tree {폴더경로} 이렇게 사용하면 된다. 참 쉽다!! 참고 https://macinjune.com/all-posts/mac/tip/%EB%A7%A5unix-%ED%84%B0%EB%AF%B8%EB%84%90%EC%97%90%EC%84%9C-tree-command%EB%A1%9C-%ED%8A%B8%EB%A6%AC-%ED%98%95%EC%8B%9D%EC%9D%98-%ED%8C%8C%EC%9D%BC-%EA%B5%AC%EC%A1%B0-%EB%B..

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로 만..

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

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