Don’t worry about failures

이번 글은 react native는 아니고, native 단에 대해 글을 작성해본다. 영상 편집의 경우 react native로는 한계가 있어 native를 통해 구현하기로 했고, 이 부분은 엄청 오랫동안 고생했던 문제이다 1. UIPanGestureRecognizer와 UIRotationGestureRecognizer 이 둘의 이벤트를 줄 때 문제가 있었다. 로테이션을 돌린 후에 pan gesture를 취하면 로테이션 돌린 각도만큼 휜 상태로 움직인다.. 이를 찾기 위해 엄청 고생했다. 일단 문제에 대한 답을 얻기 위해 stackoverflow에 남길 글이다. https://stackoverflow.com/questions/71062879/image-moving-while-rotating?noredir..

react native에서 슬라이더를 구현할 일이 생겼다. 하지만, 내가 원하는 타입의 슬라이더는 존재하지않았다. 보통의 경우 다 이런식의 형태만 슬라이더 라이브러리만 존재했다. 하지만, 내가 원하는 형태는 아래와 같은 형태이다. 1. 문제 가장 큰 문제는 위와같은 라이브러리를 찾지 못했다는 것.. 2. 해결책 ( 1 ) 직접 구현 처음에는 pangesturehandle를 통해 구현을 직접하려고 했다. idea ) 아래와 같이 여러 view layer를 쌓아 handler에 따라 늘리고 줄이고 시도 문제 - pangesturehandle에 따라 빠르게 view의 넓이를 변경 시킬 때 계산의 오차로 인해 원하는 값이 나오지 않았다. 몇번이고 수정하고 디테일을 살려봤지만, 실패. ( 2 ) 슬라이더 라이..

react-native-video 오픈소스를 사용하며, 가벼운 문제를 발견했다. 이 문제 때문에 기능에 제한이 생겼고 이를 발견한 나는 pr까지 올리는 경험을 하게 되었다. 문제 video filter 프로퍼티 값을 넘겨도 제대로 출력이 되지 않음. 원인파악 1. debuging Xcode를 통해 해당 라이브러리 디버깅을 한다. 2. not break 해당 부분을 디버그를 했지만, break가 되지 않는 것을 발견 3. 추적 react-native단에서 부터 추적해 나간다 4. 문제 발견 react-native-video는 자체적으로 typescript로 되지 않아 @types/react-native-video을 통해 type compile과정을 겪는다. 여기서 문제가 발생했다. 위의 사진을 보면 fil..

이전 글 (https://sangwonny.tistory.com/44) React native 구동 방식 ( 구 ) 어떠한 라이브러리 혹은 프레임워크를 제대로 사용하기 위해 해당 라이브러리가 어떻게 작동하는지에 대해 알아보는 것이 중요하다고 생각한다. 이에 react native가 어떻게 구동하고 있는지 파악 sangwonny.tistory.com 에 이어 리액트 네이티브 새로운 아키텍처 도입에 대해 살펴보겠다. 새로운 아키텍처의 도입에 있어 가장 중요한 것은 native 영역과 javaScript 영역의 직적접인 소통할 수 있게하는 것이다. 브릿지를 통해 간접적, 비동기적 방식으로 인한 문제를 해결할 수 있게 된 것이다. JSI 1. 엔진 교체 가능 react native는 javascriptCore ..

어떠한 라이브러리 혹은 프레임워크를 제대로 사용하기 위해 해당 라이브러리가 어떻게 작동하는지에 대해 알아보는 것이 중요하다고 생각한다. 이에 react native가 어떻게 구동하고 있는지 파악하기 위해 이 글을 써내려가겠다. 리액트 네이티브의 구 아키텍처와 새로운 아키텍처에 대해 살펴볼것이다. 구 아키텍처 우선, 위의 사진으로 간단한 흐름을 파악해보자 1. 유저가 버튼을 클릭 2. 클릭에 의한 이벤트는 native threads에서 브릿지를 통해 js thread를 실행. 3. 해당 결과 값을 브릿지를 통해 다시 native threads에 전달하여 유저에게 해당 이벤트에 맞게 화면을 보여준다. 엄청 간단하게 흐름을 보면 이렇다. 이제 자세하게 파악해보자 ( 설명 후 위의 간단한 단계를 디테일하게 풀어..

여러 서드파티 라이브러리를 사용하다 다음과 같은 에러 메세지를 만났다. "Tried to register two views with the same name RNCViewPager" react-native-pager-view의 버전 문제였는데, 나의 버전은 최신 버전이었고, Scrollable-tab-view의 라이브러리에서는 "react-native-pager-view": "^4.2.4" 버전이 사용되고 있었다. 이에 따라 버전 문제가 있어, 나의 패키지에서 4.2.4로 맞추면서 해결 되었다. 추가로 다음과 같은 문제도 있었다. react-native-scrollable-tab-view 이 패키지 내부에서 일어나는 버그가 있었다. 이를 직접 수정할 수 있었지만, 일단은 다른 사람이 이미 수정해서 오픈 ..

어떠한 프레임에 갇히기 싫어 expo를 사용하지 않고 react-native cli를 통해 시작했기 때문에 구조를 잡기 위해 더 많은 고생을 했다. mvvm 패턴 구조를 잡기위해 하나의 모델링이 필요했다. 알아보면서 해당 패턴이 가장 작업하기에 혹은 유지보수하기에 명확하다는 생각이 들어 이를 반영하기로 했다. 최근 트렌드라고 하기엔 그렇지만 리액트도 그러고 많은 부분이 view단에서 정말 view의 역할만 하도록한다. 이 이유는 재사용성을 강조하고, 유지보수가 강조되고 있기 때문이라 생각한다. 이에 나 또한 mvvm패턴을 제대로 반영하기 위해 노력 중이다. 위의 구조로 구성하였다. 하나하나 살펴보자. 1. component View에 해당한다 우선, screen을 기반으로 해서 component dire..

이직에 앞서 react native에 대한 전반적인 Setting 준비하고 있다. Angular와 다르게 역시 react는 커스터마이즈 setting이 필요하다. 서드파티에 대해 여러가지 알아보면서, Expo와 React native CLI를 통해 개발 할 수 있는 것을 알았다. 우선, 이 둘에 대해 비교분석을 해보자. 검색했을 때 흔하게 나오는 장단점은 Expo 장점 - 손쉬운 배포 - os에 영향을 받지 않음 ( xcode, android X ) - 빠른 셋팅 - 내장된 모듈이 많다 ( 장점이자 단점 ) 단점 - 원시 언어 모듈 사용불가 - 빌드 파일 크기가 매우 큼 ( 불필요한 모듈도 다 포함 되어 있기 때문 ) - 블루투스 이용불가 - 빌드 시간 길다. React native CLI 장점 - 커스..