썬이의 IT세상

사용자의 앨범에 접근하거나 카메라 촬영을 하여 이미지를 등록하는 등의 기능은 거의 대부분의 앱에서 사용된다. React Native에서 사용자의 앨범과 카메라에 접근하여 이미지 파일을 불러오는 라이브러리는 다양하며, 라이브러리마다 해당 기능을 사용하는 방법이 다르지만 보통 함수 내에서 Promise를 호출하여 사용자 동작에 따른 callback으로 처리하는 방법이 대다수이다.컴포넌트 내에서 카메라 기능을 호출하는 함수, 사용자의 앨범에 접근하는 기능을 하는 함수, 이에 따른 처리 로직 등을 선언해야 하고 이러한 기능을 하는 컴포넌트가 다수개 있다면 일일이 컴포넌트 내에 선언하는 것보다 전역으로 사용 가능한 공통 모듈을 작성하는 편이 유지 보수와 확장성 측면에서 훨씬 더 유리할 것이다.만약 함수가 컴포넌트..

요즘 시장에서 도메인에 대한 분석은 아주 중요한 부분입니다.아무리 잘 만들어진 앱이라도 사용자에게 불편한 경험을 준다면 그들은 가차없이 앱을 지우고, 이전의 좋지 않은 경험 때문에 신규 버전이 나와도 떠난 사용자들이 다시 돌아올 가능성은 거의 희박합니다. 이러한 불상사를 막기 위해 우리는 앱에 사용자의 행동을 분석할 수 있는 도구를 반드시, 그리고 꼼꼼하게 세팅해두어야 합니다.RN 앱에서 보통 사용되는 사용자 행동 분석(PA, Product Analysis)툴은 믹스패널(Mixpanel), GA4(Google Analytics 4), 앰플리튜드(Amplitude) 등이 있으며, Firebase가 구글에 인수된 이후 지속적인 관심과 업데이트를 통해 GA4보다 사용성이 좋은 Firebase Analytics..

앱 내에서 스택 관리는 주로 react-navigation 라이브러리로 이루어집니다. 페이지 헤더나 별도의 버튼을 통해 이전 스택으로 돌아가는 "뒤로가기" 동작은 navigation.goBack() 함수를 사용합니다. 다만, goBack() 함수가 실행될 때마다 스택에서 -1이 되므로, 의도치 않은 동작이 발생할 수 있다는 점을 주의해야 합니다.const onBackEvent = () => { navigation.goBack() navigation.goBack() navigation.goBack()}return ( ... ...) 위 예제에서 onBackEvent 함수가 실행되면 3개 이전의 페이지로 되돌아가게 됩니다.실제로 뒤로가기 기능을 이렇게 구현할 개발자는 없겠지만,navigation..

사용자가 스토어에서 앱을 설치할 때, 안심하고 앱을 다운받는데에 가장 중요한 지표가 되는 것은 단연 스토어 내 리뷰라고 볼 수 있다.특히 내가 원하는 기능을 하는 앱을 검색하면 적어도 2개 이상은 비슷한 앱 리스트가 나오는데, 이럴 때 스토어 리뷰를 보고 앱 사용성이나 얼마나 많은 사용자들이 최근까지도 앱을 이용하고 있는지 미리 파악하고 다운받게 된다. 그런데 반대로 내가 어떠한 앱을 이용하고 있는 사용자일 때를 생각해보면, 서비스를 이용할 때에만 앱을 사용하지이 앱을 사용하면서 만족감을 느꼈다 할지라도 스토어까지 찾아가서 리뷰를 작성했던 경험은 없었다.단, 리뷰를 작성해달라고 자연스럽게 앱 내에서 팝업으로 요청이 오면 기쁜 마음으로 리뷰를 작성해주곤 했다.  자주 사용하는 앱에서 위와 같은 모달 팝업을..

처음 개발을 시작할 때는 그저 '방법론'에 불과했던 TDD는 이제 개발 언어나 프레임워크를 막론하고 사용자에게 보다 우수한 품질의 서비스를 제공하기 위한 필수적인 '개발 과정'이 되어가고 있다. 내가 개발하고 있는 앱도 신규 버전을 계속 업데이트 하면서 새로운 기능 때문에 기존 기능에서 충돌이 나는 경험도 있었는데, 이미 테스트가 된 기능이니 신규 feature로 나가는 부분만 테스트하고 기존 부분에서는 테스트하지 않고 배포했기 때문에 발생했던 이슈였다. 물론 TDD에 대해 고려하지 않았던건 아니다.해야하지만, 테스트 코드를 작성하는 시간에 요구사항을 더 쳐내야지 하는 생각에 나중으로 계속 미뤄왔었다.더이상 이러한 나태함에 빠지지 않기 위해 블로그에도 정리해가며 TDD 도입을 완료할 생각이다. 이번 포스..

앱에서 위 이미지와 같은 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..

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; }; ..