썬이의 IT세상

JavaScript 또는 TypeScript로 회원가입 기능을 작성할 때, 반드시 들어가야 하는 부분 중 하나가 ID(혹은 Email) 을 입력하는 부분에 유효성 검사를 해주는 것이다. 이는 주로 정규식과 .test(id) 함수를 사용해서 검증하곤 하는데, 이번 포스팅에서는 ID에 (@ 이하 부분) 영문과 숫자, 그리고 일부 특수문자만 허용하게 하는 정규식을 다뤄보고자 한다. 조건 1. ID에는 영문과 숫자, 일부 특수문자만 허용한다. 2. ID에는 영문만 또는 숫자만 입력 가능하나 '특수문자만' 입력할 수 없다. 위 조건에 해당하는 정규식과 함수는 아래와 같다. export function isValidId(id: string): boolean { const validCharacters = /^[a-z..

페이징 기능이 들어가는 View의 경우에는, FlatList의 onEndReached 속성을 사용해서 스크롤의 하단에 닿았을 때 pageSize를 늘려주거나 page를 변경해주어 api를 새로 호출해주게 되는 페이징 기능을 주로 사용하게 되는데, 필요에 따라 flatList가 아닌 ScrollView에서 이 기능을 사용해주어야 할 때가 있다. 다만 ScrollView에서는 onEndReached 속성이 없기에 따로 구현해주어야 하는 단점이 있는데, 이럴 때 ScrollView의 onScrollEndDrag 속성을 잘 활용하면 문제없이 구현이 가능하다! onScrollEndDrag 는 사용자가 ScrollView 안에서 스크롤 동작을 끝냈을 때 발생되게 되는 이벤트인데, 이 동작이 끝나는 타이밍을 스크롤의..

앱 개발을 하다보면 자주 맞닥뜨리게 되는 이슈 중 하나인, 디바이스마다 폰트 크기가 달라 특정 디바이스에서 UI가 깨져보이는 현상이 종종 발생하곤 한다. 이럴 땐 별도의 라이브러리를 사용해서 디바이스의 폰트 설정에 맞추어 size를 분기하는 방법도 있지만 리소스가 많은 프로젝트의 경우 이미 선언한 텍스트 크기를 하나하나 다시 바꾸기에는 시간도 많이 걸리고 하나의 컴포넌트라도 놓치는 순간 오히려 더 이상해보이는 결과를 초래할 것이다. 이에 나는 사용자의 디바이스 폰트크기 설정에 관계없이 지정한 FontSize를 랜더링해주는 방법을 선택했는데, 해결 방법은 아주 간단하다 Solution index.js ... import {Text} from 'react-native'; // add this Text.def..

문제점 보통 iOS 앱을 빌드하여 스토어에 등록하거나, testfilght에 올릴 때 위 이미지처럼 General > Identity > Version, Build 를 수정해서 올리곤 한다. 하지만 최근에 아카이브한 앱들이 아무리 빌드번호를 올려도 이전 번호로 고정이 되어 이슈가 있었는데, (Version만 올리고 빌드번호는 올리지 않아도 업데이트는 된다) 그래도 되던 기능이 안되고 이게 계속 올라가지 않으면 또 진짜 이슈로 번질 수 있기 때문에, 이를 해결하기 위한 방법을 적어본다. 해결 방법 평소 진행하던 방법대로 General > Identity > Version, Build 를 수정한 후에, 이에 따른 빌드번호(Build)를 info.plist의 Bundle version을 같이 맞춰주면 정상적으..

이번 포스팅에는 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..

임의의 두 지점이 있다고 가정해보자. 각각의 두 지점은 고유의 위도/경도 값을 갖게 되는데 이 좌표값을 이용해 두 지점 사이의 거리를 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 등 많은 속성들이 있는데 몰라서 잘 사용하지 못하는 경우가 많다. 이를 계기로 더 공부해봐야지 ㅎㅎ

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