썬이의 IT세상

앱에서 위 이미지와 같은 UI를 구현할 때, 주로 flatList의 numColumns를 사용하는데,각 컴포넌트 사이의 간격(column)과 각 줄 사이의 간격(row). 즉 gap을 줄 수 있는 방법이 있다. flatList의 style에 gap 속성을 주면 동작하지 않는데, contentContainerStyle과 columnWrapperStyle에 각 gap 스타일을 주면 동작한다. Row(행) : contentContainerStyleColumn(열) : columnWrapperStyle 코드는 아래와 같이 선언해주면 된다.

요즘의 UX/UI 설계는 보통 사용자 기반의 의사결정으로 이루어집니다.또 서비스의 비즈니스 모델을 명확히 하려면 앱이 얼마나 퍼널 구조로 되어 있는지가 중요하겠죠!그렇기 위해서는 앱에 사용자 동작을 트래킹 할 수 있는 솔루션을 연동해야 합니다. 수많은 트래킹 솔루션 중 Mixpanel에 대해 알아보고자 하는데요!믹스패널은 유료 플랜을 사용하지 않고도 웬만한 트래킹 함수들을 앱에 연동할 수 있다는 큰 장점이 있죠.이번 포스팅에서는 RN 앱에서 믹스패널을 연동하고 간단히 사용자를 트래킹해보는 예제를 다뤄봅시다. 📌 1. 시작하기SDK 설치 및 연동방법 공식문서에 더 잘 작성되어 있으니 참고해주세요!1-1. mixpanel.ts 파일 생성하기믹스패널 함수들을 사용하기 위해서는 믹스패널 토큰값으로 mixpa..

XCode에서 시뮬레이터로 앱을 실행할 때, 자주 보게되는 에러 중 하나가 undefined symbols: Undefined symbols linker command failed with exit code 1 이다. 자세한 에러 로그를 확인할 수 없을 뿐더러 구글링 해봐도 XCode상의 DrivedData 혹은 podfile을 지우고 다시 pod install을 해라 같은 해결 방법... 나는 쫄보라 rm -rf 같은 명령어는 최대한 지양하는 편인데, 다행스럽게도 간단히 이 에러를 해결할 수 있게 되었다. ⚒️ How to Resolve? XCode > Product > Destination > Destination Architectures 탭에서 Show Apple Silicon Destination..

React Native 환경에서는, svg 파일을 바로 불러올 수 있는 기능을 지원하지 않는다. 때문에 svg 파일을 임포트 하려면 react-native-svg 패키지를 반드시 추가해줘야 하며 react-native-vector-image 등 별도 라이브러리를 추가 인스톨하여 사용하게 되는데, 위 방법에서는 svg 파일을 assets 폴더에 넣고 별도의 'generate' 명령어를 통해 android / ios 에서 인식할 수 있도록 해주고 npm 서버도 리로드(가끔은 cache도 비워줘야 동작하는 이슈ㅠ) 해주어야 하는 번거로움이 있어 디자인 팀에서 svg 아이콘을 추가해달라고 요청하면 '시간 좀 걸려요..' 라고 대답하는게 일상이었다. (이전 개발자는 그냥 png로 export 하더라..) 이런 불..

사용자에게 앱을 배포하기 위한 환경으로는 여러 케이스가 있지만, 어떠한 경우든 develop(개발 서버), production(운영 서버) 로 나누어 작업하는게 원칙이다. 또한 API URL이나 Key 등 개발자 또는 팀만이 알아야 하는, 오픈소스에 올리면 안되는 정보들을 관리하는 env(환경 변수 파일)는 거의 모든 앱,웹 개발 환경에서 사용되고 있다. 그렇다면 prod 서버와 dev 서버 등 여러 환경을 배포할 때 일어날 수 있는 수많은 휴먼 리스크를 방지하고 근본적으로 서버 환경을 변경할 때마다 env파일을 일일이 수정하는 번거로움을 최소화하려면, 각 서버 환경에 사용되는 env파일을 각각 작성해두고 개발자가 "개발 서버를 보고싶어!" 또는 "운영 서버를 보고싶어!" 할 때 자동적으로 해당 env ..

react native에서 긴 이미지를 보여줄 때, 썸네일 형식으로 이미지를 보여준 후 해당 이미지에 버튼 이벤트를 걸어 전체보기 화면을 구현하고 싶을 때가 있다. 이 경우 css에서는 object position : top 을 주면 바로 해결되지만, 안타깝게도 react native에서는 해당 기능을 지원하지 않는다. 이 문제를 해결하기 위해 내가 생각해낸 방법은 ScrollView의 height를 원하는 고정값으로 선언하고 그 안에 Image를 감싼 후, scrollenabled={false} 로 스크롤을 막아내면 되지 않을까? 였다. 결과는 매우 성공적이었다. 아래는 예시 코드이다. Usage type TImageSizeProps = { width: number; height: number; }; ..

포스팅 부제에도 나와있듯이, RN으로 개발을 하다보면 map() 함수로 특정 배열을 랜더링 시킬 때, 함수를 감싸는 부모 컴포넌트를 View가 아닌 빈 태그() 로 지정할 때가 있다. 테스트 코드 const tmpArr = [0,1,2,3,...] return ( ... tmpArr.map((res, idx)=>{ return ( {res} ) }) ... ) ... 위와 같은 테스트 코드를 랜더링 시키면, React Native는 Warning: Each child in a list should have a unique "key" prop. 우리가 자주 보는 Warning을 뱉어낸다. 사실 우리가 원하는데로 랜더링은 시킬 수 있지만, 해당 컴포넌트를 랜더링 시켜주는 페이지를 들어갈 때 마다 디버깅 경고..

보통 서버에서 데이터를 받아와서 화면에 뿌려줄 때, 정해진 디자인 형식대로 오지 않아 프론트단에서 수정해야 하는 경우가 생긴다. 예를 들어, temp_dt : 'yyyy-mm-dd' 이런 식으로 들어오는 Date 데이터가 있다고 가정해보자. 서버에서는 yyyy-mm-dd 로 날려주는데 기획 상에서는 yyyy.mm.dd 형식을 원한다면 이 때마다 백엔드 팀에 형식을 고쳐달라고 말하기 애매할 때 (당연히 프론트에서 수정해야죠!) 이를 수정하기 위해 data.temp_dt.replace('-','.') 으로 코딩한다면 결과값은 아래와 같을 것이다. result : 'yyyy.mm-dd' ㅎㅎ.. 문자열 전체를 검증하고 모든 값을 바꾸려고 할때는 replace보다 split과 join을 같이 사용하면 간단히 해..

react-native에서 chart UI를 구현할 때 주로 react-native-chart-kit 라이브러리를 사용하는데, GitHub - indiespirit/react-native-chart-kit: 📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart 📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap) - GitHub - indiespirit/react-native-chart-kit: 📊React Native Chart Kit: Lin... ..

어떠한 객체 temp_obj에, 특정 key의 value값을 검색해서 boolean값을 반환하고 싶을 때, Javascript의 some() 함수로 쉽게 데이터를 검색할 수 있다. // Test Data const temp_obj = { a : { state : 'ready' }, b : { state : 'ready' }, c : { state : 'complete' } } 위와 같은 형식의 객체가 있을 때, temp_obj 안에 각각 들어있는 객체 중 complete가 한개라도 있다면 True를, 아니면 False를 반환하는 함수는 아래와 같다. // 데이터를 검증하는 함수 function checkApprovalStatus(data: TDataProps): boolean { // 해당 key들의 상..