썬이의 IT세상

이번 포스팅에는 React 혹은 RN에서 API 호출과 효율적인 캐싱을 주로 담당하는 react query 라이브러리. 그 중에서도 주요 기능인 staleTime과 cacheTime에 대해 전반적으로 알아가보는 시간을 가져보자. 이 포스팅은 다른 프론트 개발자분께서 알기 쉽게 올려주신 자료를 보고 참고하여 정리한 것으로, 좀 더 자세한 정보를 얻길 원한다면 https://ttaerrim.tistory.com/53 리액트 쿼리의 StaleTime과 CacheTime 리액트 쿼리를 처음 사용할 때 헷갈릴 수 있는 개념 중 하나인 staleTime과 cacheTime에 대해 알아보도록 하겠습니다. ✎ staleTime stale의 사전적 정의는 [신선하지 않은, (만든 지) 오래된]입니다. 말 그 ttaerr..

오랜만에 새로운 mac에서 개발환경을 처음부터 세팅하는 중에, brew를 설치하고 다음 스텝으로 이동하려는데 command not found: brew 라는 에러로 내 발목을 잡고있었다. 해결 방법은 역시 brew를 처음 install할 때 주어지는데 제발 에러나면 에러메시지 보는 습관좀 들이자 ㅠ_ㅠ install에 성공했다고 하면 터미널 하단부에 위 이미지처럼 Next steps: 하며 친절하게 설명되어 있는데 이를 따라가주면 된다. Run these two commands in your terminal to add Homebrew to your PATH: (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/ktaeyang/.zpro..

요즘같이 덥고 습한 날🥵야외보다는 에어컨 빵빵한 실내가 최고죠! 이런 타이밍에 가까운 영종도에 새로운 대형 카페가 오픈했다는 소식을 듣고 드라이브 겸 영종도로 출발 - ! 네비를 찍었을 때 중산고 맞은편에 떡하니 위치해 있어서 여기가 맞나? 싶었는데 막상 가보니 어마어마한 크기(코스트코 정도..?)와 세련된 외관의 카페가 반겨주더라구요! 매장 입구 옆에 2층 주차장으로 올라갈 수 있는 공간이 있는데 주차장 가는길도 엄청 세련되어 있더라구요 카페 입장하기도 전에 인테리어에 먼저 반하고 시작 ㅎㅎ 건물은 1F : 매장 2 - 4F : 주차장 그리고 루프탑으로 이루어져 있는데 아직 생긴 지 얼마 안돼서 그런지 루프탑은 아직 운영하지 않는다고 해요! 주차장에서 엘리베이터를 타고 1층 매장으로 들어오자마자 보이는..

임의의 두 지점이 있다고 가정해보자. 각각의 두 지점은 고유의 위도/경도 값을 갖게 되는데 이 좌표값을 이용해 두 지점 사이의 거리를 km, m 단위로 변환하여 구해보는 예제를 다뤄보겠다. 거리를 구하는 로직을 간단히 설명하자면, 두 지점의 좌표값을 각각 라디안으로 변환한 후 삼각함수를 이용해 두 지점의 차를 구한다. 두 지점의 좌표값을 라디안으로 변환하기 위해 DEGREES_PER_RADIAN 상수를 먼저 선언해준다. // 라디안 단위를 도 단위로 변환하는 상수 const DEGREES_PER_RADIAN = 180 / Math.PI; 지구의 반경(6371km) 또한 선언해준다. // 지구 반경 (단위: km) const EARTH_RADIUS_KM = 6371; // 두 지점 사이의 거리를 계산하는 ..

진행중인 프로젝트에 푸시 알림 등의 서비스를 이용하는 데 역시 Google Firebase만한 게 없다. 이런 Firebase를 앱과 연동하고 사용하기 위해 Firebase와 관련된 라이브러리를 npm install 한 후 ios 디렉토리에서 pod install을 하게 되면 간혹 아래와 같은 문제로 충돌이 나는 경우가 있다. [!] CocoaPods could not find compatible versions for pod "FirebaseCoreExtension": In snapshot (Podfile.lock): FirebaseCoreExtension (= 10.12.0) In Podfile: RNFBMessaging (from `../node_modules/@react-native-fireb..

만약 View 컴포넌트에 {children} 위와 같이 행으로 나열되는 컴포넌트를 배치할 때, 아래 예시 이미지와 같이 화면을 벗어나는 경우가 생기는데 이럴 경우 텍스트 영역만 아래로 확장하고 싶을 것이다. 이를 해결하는 방법은 아주 간단한데, flex-shrink 스타일만 준다면 해결된다. ... 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 안드로이드도 물론 적용된다. flex 관련된 스타일의 경우 flexShrink를 포함하여 flexGrow 등 많은 속성들이 있는데 몰라서 잘 사용하지 못하는 경우가 많다. 이를 계기로 더 공부해봐야지 ㅎㅎ

성수역 부근에는 분위기 맛집들이 굉장히 많아서 어디를 가야 좋을 지 고민하는 분들을 위해 성수역 근처에 괜찮은 파스타 맛집을 찾는 분들을 위해 분위기, 맛, 인테리어 모두를 사로잡은 이탈리안 레스토랑을 소개하려 한다. 노비아 에 노비오 서울 성동구 성수이로 96 호텔포코 2층 핫플들이 많은 성수역 3번출구에서 2-3분 정도 걸어가면 호텔 포코 건물이 나오는데 식당은 호텔 건물 2층에 위치해 있다. 안으로 들어오면 예쁜 실내 좌석과 야외 테라스 좌석도 있었으나 밖은 너무 더워서 패스... 노비아 에 노비오의 시그니처 메뉴 중 하나인 감자뇨끼가 정말 맛집이라는데, 우리는 파스타가 목적이었으므로 차돌 묵은지 오일 파스타&바다조개 바질 오일 파스타로 주문! 식전빵은 정말 보기에도 정말 정갈한데 갓 나온 포슬포슬..

앱에 커스텀 폰트를 적용할 때 iOS에서는 추가할 폰트를 넣어주고, info.plist - Fonts provided by application 항목에 각 폰트를 추가해줘야 적용된다. 하지만 위와 같이 info에 작성을 해줘도 폰트가 적용되지 않는 현상이 생기는데, 이럴 땐 혹시 폰트를 넣어줄 때 폴더째로 넣지는 않았는지 체크해보자. 위와 같이 폰트를 넣을 때 폰트의 상위 폴더(fonts) 까지 같이 있다면, info.plist를 아래와 같이 수정해주면 해결된다. 경로 이슈는 언제 봐도 어이없지만 매번 하는 실수.. 위 이미지와 같이 폰트명 앞에 폴더명인 fonts/ 를 넣어주면 된다.

홈 피드를 새로고침하는 등의 기능을 구현하려면 react native scrollview의 refreshControl props를 활용하면 매우 편한데, 아무리 스크롤을 당겨도 refreshControl이 동작하지 않는 경우에 scrollView에 위와 같이 bounces={false} 로 되어있는 지 확인해보자. 나는 스크롤뷰를 사용할 땐 indicator와 bounces를 모두 false 해두는 습관이 있는데, 스크롤뷰를 아래로 스와이프 했을 때 바운스되면서 동작하는 RefreshControl인데 그 bounces 속성을 꺼두었으니 안나오는게 당연하다.. refreshControl usage import {RefreshControl, ScrollView} from 'react-native'; ... ..

시작하기 크로스 플랫폼 앱의 단점중 하나인 버튼 위치 1px만 옮겨도 앱을 업데이트 해야하는 굉장히 불편한 부분을 보완하고자 Code push 라는 어마어마한 서비스가 나왔는데, 이를 적용하고 테스트해보려면 실제로 스토어에 업데이트 된 앱이 있어야 하므로 사이드 프로젝트 겸 code push 테스트를 위한 앱을 만들어보고자 한다. 새로 만들어보는 김에, 이전 Private Box는 윈도우 환경에서만 개발했기에 RN으로 만들었음에도 안드로이드만 배포했었는데, 이번엔 Android/IOS 둘다 배포해보고자 한다. 개발 프레임워크 : React Native v0.72.1 사용 언어 : Typescript v4.8.4 프로젝트 생성 RN 타입스크립트 프로젝트를 간단한 명령어로 생성할 수 있다. 프로젝트를 생성하..