거의 알고리즘 일기장

기존에 앱 만들때는 성능측정 & crash report 등을 무료인 firebase의 제품들을 많이 사용했다. 1.. firebase crashlytics2. firebase performance  이번 기회에 데이터독을 붙여보게 되었는데, 이건 미쳤다.session을 확인해볼수 있어 문제가 생겼을때, 디버깅에 엄청나게 유리하고.. firebase에도 있기는 하지만, sourcemap 만 등록해두면 어느 코드에서 문제가 생긴지도 알려주는식으로 엄청나게 강력하다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ  그리고 react native의 경우에는 화면의 랜더링 측정이 조금 애매하고 하려면 서드파티를 쓰거나 직접 maker를 만들어서 찍는 (start marker는 js, end marker는 Native에서 찍어야함) 귀..

서문최근에 회사에서 만든 앱이 강의를 보는 앱이었다. rn으로 하다보니 내가 원하는 모션을 정확하게 구현하기가 힘든 부분이 있었다. 조금 더 설명하자면, 비디오를 보고 있는중 세로모드 -> 가로모드(full screen) -> 세로모드로 갈때 하단의 자료 섹션(유튜브로 치면 비디오 info 부분)이 같이 돌아가는데, 나는 유튜브처럼 세로모드로 남아있어 줬으면 했다. 원하는 모션 찾아본 바로는 해당 모션을 구현하기 위해서는 info에 해당하는 저 섹션이 supportedinterfaceorientations 라는 property를 사용해야 가능한것으로 보였다. 그리고 문제를 해결하기 위해서 이런 의식의 흐름으로 찾아보았다. -> 문제를 해결하기 위해서는 ui view controller를 추가하고 옵션을 ..

오늘 점심에 재미있는 실험에 대한 아티클을 읽었는데, 공유차원에서 올린다. 자세한 내용은 직접 보는것이 좋다.https://blog.theodo.com/2023/10/native-views-rn-performance/ Using RCTView & RCTText in React Native for Performance Gains | TheodoComparing the performance of rendering View and Text elements on React Native, using regular and native views. Assessing the impact of the new architecture on iOS and Android, with insights into rendering t..

이번에 1. fastlane을 이용해서 react native 앱의 빌드와 배포를 자동화하고 2. github action workflow를 이용해서 특정 trigger시 1번의 내용을 진행하도록 하는 업무를 맡아서 진행했다. fastlane을 이용해서 ci/cd pipeline 구축 자체는 자료와 예제가 많으니 어떻게 진행하는지는 생략하고 대략적으로 fastlane이 하는것이 무엇이고 주의해야 할점 몇가지만 남겨놓으려고 한다. 나를 위해?..ㅋㅋ fastlane이란? 위의 그림처럼 ios, android app 배포시에는 단계가 있다. 별거 아닌 것들이지만 배포시마다 저 과정들을 해주는건 지겨우므로 일련의 과정들의 자동화를 도와주는 도구라고 생각하면 된다. 그리고 fastlane을 구축하고 나면 ci/..

필자는 개인적으로 프로젝트에 기능을 추가할때, 미니 프로젝트를 만들어서 테스트를 충분히 해본 이후 적용하는것을 선호한다. 하지만, 미니 프로젝트를 너무 여러개 만들다보니 예전에 만들었던것을 잊고 새로 세팅하고 새로 세팅하는 금붕어 같은 짓으로 시간을 쓰곤했다. 그래서 떠올린게 최근에 만든 turborepo가 no configuration 수준으로 설정이 간편해서 이걸 이용해 모노레포 환경을 만들면 관리하기 편하지 않을까? 생각해서 시간이 남을때 조금씩 해보게 되었다. 솔직히 Next, react, expo 까지는 문서에 적혀있기도하고 example 보고 세팅하기 편했다. 근데, react native cli는 세팅하면서 자료도 없고 몇가지 짜증난 부분이 있었어서 정리해둔다. 변경해야 할 사항은 크게 세가..

상황 평화롭게 집에서 코딩하던 권모씨 어느날 이런 메일을 보게 되는데... "이제 정책적으로 android target sdk를 33이상으로 올려야 하나보다! 뭐 올려봤자 뭐가 문제가 있겠어 그냥 올리지 뭐~" 자 그렇다 내 이야기다 ㅠ target sdk를 올리면 당연히 breaking change가 있을수도 있었을텐데 왜 그걸 몰랐을까 ㅠㅠ 이제 이게 어떤 부분이 문제였고 어떻게 해결했는지 설명해보겠다! 문제 찾기 문제가 무엇인지 처음부터 유추해보자 로직이 문제일까?? 문제가 되는 부분의 로직은 일기를 이미지로 다운로드할 경우의 로직이었다. 권한 요청을 정상적으로 하고 권한을 제대로 받은 경우에는 돌아가는데 문제 없는 코드이다! 로직적인 문제도 없어 보이고 sdk 33 미만의 시뮬레이터에서는 제대로 ..

그림일기 프로젝트의 캔버스의 퍼포먼스 향상작업을 하던 도중에 react native skia에 대해서 접하게 되었다. 이 모듈은 rn의 퍼포먼스의 한계상 못했던 다양한 앱을 만들수 있을거 같아 이 모듈을 적극적으로 사용한 앱을 하나 기획하고 만들게 되었다. (앱의 1차버전은 이미 만들기는 다 만들었고 play store는 통과, app store는 아직 미제출 상태이다!) 심사 통과 완료~ https://play.google.com/store/apps/details?id=com.kwonkunkun.whiteboard&pli=1 모션드로우 - Google Play 앱 그림을 그려 재미있는 애니메이션을 만들어보세요! play.google.com https://apps.apple.com/us/app/%EB%A..

이 글은 최근 expo만을 이용해서 앱을 만들고 배포까지 해보고 만든 후기이다. 약 1년전에 이런글을 적은적이 있다. https://kunkunwoo.tistory.com/279 react native 약 1년간 사용해본 얕은 후기 react native를 작년 12월쯤 expo로 이용해본것을 시작으로 사용한지 약 1년쯤 지났다. 최근들어 rn에 대한 회의감이 들기 시작했다. 그래서 한번 rn 약 1년 사용기를 정말 얇게 남겨보고자 한다. 주의!: kunkunwoo.tistory.com 이 당시에는 꽤나 rn에 대한 불신이 가득한 상태로 적어서 조금 부정적으로 적었던거 같다. 현재는 rn 자체에 꽤나 익숙해져서 그런지 디버깅이나 이런게 수월해져 다시 긍정적으로 생각하고 있지만, 초심자들 입장에서는 벽이 ..

왜 개선하는가?? 오늘의 그림일기 앱의 무한스크롤은 1. useEffect의 dependencyArray에 따라 fetch 함수 실행 -> 2. fetch 함수 success시, state를 기존의 state에 추가 하는 방식으로 짜여져 있었다. 이러다보니 꽤나 많은 부분을 신경써줘야 했고 많은 부분이 불편했는데, 내가 느낀 단점은 이랬다. 1. useEffect 자체가 api를 fetching하는데 적합하지 않다. 단적인 예로 1. strictMode에서 2번씩 실행되도록 되어있음. 2. dependencyArray를 이용하는 방식이라 이걸 컨트롤하기가 쉽지가 않다. 2. 짜야할 로직이 많다. loading, refresh, error에 대한 컨트롤 로직이 꽤나 많다. 그래서 개선해야할 필요성이 있다고..

이번에 설명할 두가지 라이브러리는 간단하게 input들의 관리가 가능하게 도와준다. 이 친구들을 만나고 다양하게 빡치던 input validation check 로직의 쾌적함이 달라졌다. 밑의 설명을 읽어도 되지만, 여기까지 읽었는데 혹한다 싶으면 그냥 공식문서 읽으러 가길 바란다. https://react-hook-form.com/get-started Get Started Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com https://github.com/jquense/yup GitHub - jquense/yup: Dead simple Object schema validation Dead s..