Don’t worry about failures

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 장점 - 커스..

React native 회사를 이직하게 됐다. 이번 회사는 react native를 통해 앱 개발를 하려는 회사이다. 개발 관련 회사가 아닌, 미디어 회사이고, 신사업으로 앱 개발 사업으로 진출을 하기 위한 팀빌딩 시점에 내가 합류를 하게 됐다. 걱정과 설렘으로 시작을 기다리고 있다. 신사업이고 팀규모가 매우 작게 시작하여, 프런트엔드 개발자는 혼자로 시작해야한다. 상사도 존재하지 않고, 문제를 겪었을 때 혼자서 해결해 나아가야한다. 이 부분이 가장 큰 걱정이기도 하면서 설렘 포인트이다. 많은 경험을 하면서, 성장을 할 수도 있기 때문이다. 3년 차 개발자가 단독으로 개발을 시작하는 것은 어떻게 보면, 무모한 행동일 수도 있다. 하지만, 나는 이를 즐길 수 있을거같았다. 그래서 나는 시작하기로 했다. 들..

k번째 수 function solution(array, commands) { const answer = []; for(const command of commands) { const [from, to, getIndex] = command; const sliceArray = array.slice(from - 1, to); sliceArray.sort((a,b) => a - b); answer.push(sliceArray[getIndex - 1]); } return answer; } 프로그래머스에서 코딩테스트 문제를 풀다 한 case에서 fail이 떴다. 아무리봐도 이상한 점이 없었으나,, 계속 찾아본 결과 sort에서 문제를 발견했다. 처음 sort하는 과정에서 단순 sort()를 사용했다. 하지만, sor..