거의 알고리즘 일기장

정말 오랜만의 글이다!.. 일도 정신없었고 바쁘기도 했어서 정말 간단하게 뭐했는지 정도로 써보겠다.!..그냥 skia를 이용해서 이런것도 할수있다~ 정도로 이해해주면 좋겠다. 이번에 가져온 주제는 조금 재미있는 주제이다!바로바로 react native skia의 runtime shader를 이용한 불 이펙트를 만들어 보는것이다! 이게 완료되면 여러가지에 적용해볼수 있다 (outline effect) (예시들은 다음과 같다.) 불 이펙트 오늘의 그림일기에 들어간 Outline 불 이펙트자 그럼 ㄱㄱㄱ~사전지식아무래도 이런 구현은 shader를 다루기 때문에 sksl을 알고 있거나 혹은 glsl 같은 쉐이더 언어를 알고 있다면, 꽤나 쉬운내용이다. 만약에 모르겠다면, 아래의 문서를 조금 읽으면 이해가 될것이..

이번 인프콘 2024에서 React Native와 함께 인프런 앱 새로 만들기 라는 주제로 발표를 진행했었는데, 이 글은 그 후기이다.발표를 하게 된 이유사실 인프런에 입사하게 되면서 꼭 해야겠다고 생각한것이 컨퍼런스에서 한번 발표를 해보자 였다.하지만, 원래는 이렇게 까지 빨리 할 생각까지는 없었는데,  우리팀의 cto인 향로가 말했던 이야기중에원래 발표를 싫어했어서 항상 발표를 피했었다. 근데, 어느순간 이게 너무 싫어서 발표를 맡아서 하게 되었고 이제는 더이상 발표를 하는것에 있어서 두려움이 있지는 않다. 팀원들도 이런 경험을 가졌으면 좋겠다.라는 뉘앙스의 이야기를 듣고 오케이 어짜피 할꺼면 빨리하자! 라고 생각을 고쳐먹고 바로 발표를 하겠다고 하게되었다.발표의 주제 선정주제 선정 자체는 간단했다...

기존에 앱 만들때는 성능측정 & 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..

오늘은 잠깐 할 시간이 생겨서 실린더와 구 매시를 구현했다. 이미 강의를 통해 directx로 구현해봤던 것들인데, 다시 짜보려니까 머리가 안돌아가서 혼났다 ㅠ 암튼 했으니 굿~

세가지 조명 (directional, point, spot)을 구현하였다. 구현의 어려움보다는 memory layout을 어케 넘겨야 적절하게 넘어가는지 docs를 봐도 당최 뭔소린지 모르겠어서 한참 시간을 날렸다. 이 글을 보는 사람이 있다면, 그냥 webgpu 유틸리티 구현체들이 npm에 있는것 같은데 그거 쓰는게 정신건강에 이로워 보인다. 조명의 구현방식은 홍정모 선생님의 그래픽스 강의 2편에서 실습해본 조명 코드기반으로 그 코드를 이해하고 그 수식대로 옮겨보았다. 눈으로 보이는게 참 재밌긴 하다.

최근 그래픽스에 관심이 생겼다. (찾다보니 c++ 강의로 좀 유명하셨던 홍정모님의 그래픽스 강의를 1, 2편을 보게 되었다.) 수학이 조금 껴있기도 하고 퇴근후 듣다보니 많이 졸았지만 보이는것들을 코딩하는게 재밌어서 1, 2편까지는 가까스로 다보았다! 하지만, 그냥 넘어간 부분이 너무 많아 개념적으로 헷갈리는 부분이 많아서 처음부터 혼자의 힘으로 간단한 랜더러를 만들어보기로 했다. directx로 해볼까도 했지만, webgpu라는 feature가 브라우저 스펙으로 들어왔다길래 이걸로 해봤다. (아직 사용은 시기상조이긴 하다) webgpu를 이용해본 간단한 후기는 당연한 이야기지만 directx보다 훨씬 불편하고 자료도 적고 지원범위도 적고 그렇다. 예를 들면 fill mode가 따로 없는것으로 보여서 w..

이번에 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는 세팅하면서 자료도 없고 몇가지 짜증난 부분이 있었어서 정리해둔다. 변경해야 할 사항은 크게 세가..