안녕하세요 홍벨로퍼입니다! 오랜만에 인사드리는것 같네요! 오랜만에 돌아온만큼 재미있는 프로젝트를 진행해보려고 합니다! 개인적으로 토스앱을 정말 사랑하고 그만큼 많이 애용하고있는데요 😘 그래서 토스앱에서 사용하고있는 TDS를 직접 최대한 카피해서 만들어보고 공유하고자 합니다! 그래서 오늘은 토스의 버튼 디자인 시스템을 같이 관찰해보고 분석한뒤, React-Native로 재사용할수있는 컴포넌트를 만들어봅시다! 앱 살펴보기 토스 앱에는 화살표와 함께 동작하는 버튼이 있습니다. 이 버튼은 누르게되면 살짝 작아졌다가 다시 튕겨져 나오는 행동을 보이고있는데요 예전부터 이 통통 튀는 UI를 만들어서 재사용해보고 싶다는생각이 들었었습니다! 토스 앱 분석 개발에 앞서 먼저 UI를 분석을 해봅시다! 먼저 해당 컴포넌트의 ..

react-native-gesture-handler를 사용해야하는 경우가 생겨서 react-native-reanimated를 추가했는데 빌드후 이전에는 나타나지 않았던 react-navigation의 stack뒤로가기 클릭시 앱이 꺼져버리는 버그가 생겼다. 이 버그는 Android에는 나타나지않았고, iOS에서만 나타나는 버그였고 패키지를 하나씩 지우고 깔면서 Reanimated에 문제가 있다는걸 알게되었다. 해당 문제는 react-native-reanimated의 3.4.1버전의 문제였고, 현재 제일 안정된 버전인 3.3.0으로 버전을 수정하니 해결되었다. 3.3.0 -> 3.4.0으로 넘어가면서 엄청 많은 패치가있었는데 해당 패치로 현재 깃헙에도 이슈가 많이 생겼다. react-native-reani..

React Native Track Player(RNTP)를 이용하여 백그라운드 모드에서도 음악을 재생할 수 있는 음악플레이어 앱을 만들려고 합니다! 이 글은 세팅과정에 관련한 부분만을 다루고있습니다! RNTP는 EventListner함수들을 통해서 앱내부 및 외부에서 이벤트를 전달받아 관련한 기능들을 수행하는 형태로 되어있습니다. 해서 ReactNative의 최상층이라고 할 수 있는 index.js에서 RNTP를 위한 서비스를 등록하고 시작하여야 합니다. TrackPlayer를 불러온 다음 registerPlaybackService를 통해서 재생 시 실행할 서비스파일을 등록해 줍니다. 플랫폼 세팅으로는 iOS의 경우 Xcode를 켜서 백그라운드모드를 추가해 주고 거기서 Audio, AirPlay, and..

리액트네이티브 버전 0.71+ 에서는 Flatlist의 listKey가 제거되었습니다. https://github.com/facebook/react-native/blob/main/CHANGELOG.md#removed GitHub - facebook/react-native: A framework for building native applications using React A framework for building native applications using React - GitHub - facebook/react-native: A framework for building native applications using React github.com listKey는 Flatlist를 한 페이지에 여러번..

안드로이드 배포시(내부, 프로덕션 포함) 갑자기 com.google.android.gms.permission.AD_ID 권한 오류가 발생하였다. 광고권한을 앱 내부에서 사용하고있으니 Manifest를 확인해보라고 하더라 하지만 Admob을 사용하지는 않았었고 Analytics때문에 해당 오류가 발생하였었다. 그래서 Play Console에서 앱 콘텐츠 > 광고 ID 에서 "앱에서 광고를 사용하나요?" 질문에 "예" 로 표기해주시고 하단에 목적으로는 애널리틱스를 선택해주면 완료!

평소처럼 안드로이드 빌드를 프로덕션으로 올리는 중이었는데, 번들을 올리니까 아래와 같은 오류가 나타났다 Android 11(API 수준 30)에서 Android 12(API 수준 31)로 이전해야합니다. 처음엔 굉장히 당황했는데 내가 아직 안드로이드를 30수준에서 사용하고있어서 그랬다. 일단 android/build.gradle에서 compileSdkVersion과 targetSdkVersion을 31로 변경하자. 이후 android/app/src/main/AndroidManifest.xml로 들어간다음 activity를 사용하고있는곳에 아래와 같은 코드를 추가하자 android:exported="false" 단 activity안에 intent-filter를 사용하고있다면 true로 설정해야한다. and..