개발 블로그

“왜 써야 하는지부터, 언제 쓰면 안 되는지까지”React Native를 하다 보면한 번쯤은 Animated를 마주치게 됩니다.공식 문서도 있고 예제도 많은데,막상 써보려고 하면 이런 생각이 먼저 듭니다.“이거… 왜 이렇게 어려워?”“useState로 opacity 바꾸면 되는 거 아냐?”“이걸 꼭 써야 해?”저도 처음엔 Animated가 괜히 복잡한 API 같았고,실제로 몇 번은 안 써도 될 곳에 억지로 쓰다가 코드만 더 꼬였던 적도 있습니다.이 글에서는리액트 개발자 기준에서 Animated를 왜 쓰는지, 언제 써야 하는지최대한 사람 말로 정리해보려고 합니다.Animated는 뭐 하는 놈인가?한 줄로 요약하면 이겁니다.“부드러운 애니메이션을 성능 저하 없이 처리하기 위한 도구”일반적인 리액트 상태 변경..

React Native에서 스크롤 중 Sticky Header를 만들었는데,버튼이 눌리지 않는 상황, 한 번쯤 겪으셨죠?저도 한참 삽질했습니다.화면에 분명히 버튼이 보이는데, 눌러도 반응이 없어요.“코드가 잘못됐나?” → “라이브러리 버그인가?”몇 시간 동안 고민한 끝에 원인을 찾았습니다.결론부터 말하면,Sticky Header 위에 다른 View가 겹치거나, 터치 이벤트를 막고 있는 경우가 대부분입니다.1️⃣ 문제 상황 정리FlatList / SectionList에 Sticky Header 적용버튼, 아이콘 등 터치 컴포넌트 정상 배치근데 눌러도 onPress 실행 안 됨iOS는 되는데 Android에서만 안 되는 경우 있음2️⃣ 원인 분석1. 다른 View가 위에 겹쳐 있음absolute 포지션 / ..

React Native에서 FlatList를 쓰다 보면스크롤은 되는데 터치가 안 되는 상황을 한 번쯤은 겪게 됩니다.아이템을 눌러도 onPress가 안 찍히고,“내 코드가 잘못된 건가?” 싶어서 한참을 들여다보게 되죠.저도 처음엔TouchableOpacity 문제인 줄 알았고,그다음엔 상태값 문제인 줄 알았습니다.근데 결론은 의외로 단순했습니다.ScrollView랑 FlatList가 겹쳐 있었어요.증상부터 정리해보면이런 상황이었습니다.FlatList는 잘 보임위아래 스크롤도 정상근데 아이템 클릭이 안 됨콘솔 로그도 안 찍힘특히 화면 끝까지 스크롤했을 때만 안 되는 경우도 있었고,iOS에서는 되는데 Android에서만 안 되는 경우도 있었습니다.이때 거의 대부분의 원인이ScrollView + FlatLis..

오랜만에 프로젝트 포스팅을 작성해본다.3개월정도 진행중인 프로젝트이며, 계속해서 업데이트 해나가고 있다.현재 안드로이드 ios 모두 배포되어 서비스를 진행중이다. "원씽" 이라는 책에서 새로운 습관을 만드는 데는 평균 66일이 걸린다는 구절을 읽고 이걸 활용한 프로젝트를 진행해야겠다는 생각이 들었다.  그래서 뇽뇽이 - 습관만들기, 66일 챌린지 를 만들어 보았다. 시중에도 비슷한 앱들이 있었지만, "습관 만들기" 라는 주제를 포기하고 싶지는 않았다.그래서 챌린지 앱이면서 커뮤니티의 성격을 지니게 하여 다른 앱과의 차별점을 두기로 하였다. 처음에는 앱에 모든 부분을 혼자서 만들었었는데, 디자이너 한분을 어떻게 알게되어 도움을 받아 디자인 개선을 진행하였다.그래서 지금은 디자이너 한 분이 앱을 사용해보면서..

100개 어플 프로젝트.. 요즘 이것저것 바쁘기도 하고, 아이디어도 고갈이 되어서 개인 프로젝트를 잘 진행못하고 있었다. 그러던 중 친구와 책 이야기를 하다가 친구가 자기가 읽었던 책을 나한테 추천을 해주려 했었다. 근데 내용은 기억하지만, 제목을 기억을 잘못해서 열심히 책을 인터넷에서 찾는 것을 보게 되었다. 찾는데 시간이 많이 소요되었고 꽤나 노력을 해서 찾았었다. 이럴때 내가 읽은 책을 간편하게 저장해놓고 간단한 메모를 할 수 있는 앱이 있으면 좋겠다는 생각이 들었다. 바로 플레이스토어에 검색을 해보았고, 비슷한 앱이 있긴 했으나, 그 앱은 전자책만을 대상으로 하고 있었다. 그 앱의 리뷰중 전자책만 다루니까 오프라인으로 읽은책을 기록할 수 없어서 불편하다는 리뷰가 있었다. 그 글을 보니까, 내가 지..

React Native expo 프로젝트에 구글 admob 광고를 넣는 방법을 정리해야겠다. 매번 만드는데 맨날 까먹어서 찾아본다. 1. expo 프로젝트 만들기 npx create-expo-app -t expo-template-blank-typescript . 타입스크립트 템플릿으로 나는 만들어준다. 2. 구글 애드몹 세팅 2-1. react-native-google-mobile-ads 설치 npm i react-native-google-mobile-ads 2-2. app.json 코드 추가 { ... "react-native-google-mobile-ads": { "android_app_id": "ca-app-pub-xxxxxxxxxxxxxxxxxxxx" } ... } 위에는 안드로이드일때이고, 아이..

저번 포스팅에서 언급했듯이 2023년 어플 100개 출시 프로젝트를 하고 있는데 첫번째 어플을 출시하였다. PC게임 맞추기 어플이다. 이 어플을 생각해내게 된 것은 플레이스토어에 라면 맞추기라고 치면 이렇게 나오는데 기능, 디자인도 엄청나게 간단한데 10만 다운로드 이상인 어플이 굉장히 많았다. 친구가 이걸 보고 PC게임 맞추기 없는데 만들어 봐라해서 만들게 되었다. 게임 형식은 이미지를 주고 글자를 맞추는 형식이다. PC게임 맞추기라고 치면 제일 상단에 뜬다. 상위노출이 이렇게 잘되는지는 몰랐다. 이런 게임이다... 구글광고가 있고 힌트보기를 누르면 30초 동영상 보상형 광고가 나온다. 개발은 퇴근후 짬내서 해서 일주일 정도 걸렸다. https://play.google.com/store/apps/det..