란테의 펀드로이드

저번 글에 이은 mobX 3탄입니다. 저번엔 MobX 의 API에 대한 이야기는 제쳐두고, 갑자기 React MobX의 설계론에 대한 이야기를 해버렸습니다. 이번 편에는 개인적으로 MobX의 조금 알기 힘들고 조심해야겠다고 느낀 기본적인 부분에 대해서 적어보겠습니다.【DevTools】이미 MobX의 코드를 만들어본 분중에, DevTools를 도입하지 않은 분이 있다면 꼭 도입해봐주십시오. 이 페이지에 를 마운트해서 도입하는 방법이 소개되어있습니다 .ChromeExtension를 도입해두면, 마운트없이 같은 기능을 이용가능하게 됩니다. 본편의 내용을 이해하는데 도움이 될것으로 보입니다.observable형에 대해서observable값에는, JS프리모티브, 참조, 플레인오브젝트, 클래스 인스턴스, 배열, 맵..

저번 글에 이은 2탄입니다. MobX에는 Redux와는 다르게, 복수의 Store가 존재하며, 복수의 Provider를 보유할 수 있습니다. Redux에도 Provider가 있지만, 그것은 컴포넌트의 루트에 한개만 존재하고, 초기 설정만 끝마치면 평소에는 의식할 일이 없는 존재입니다. MobX에서, Store를 어디에서 생성하고 어떻게 Provider를 전달하는게 좋은 설계일까요. 이 관점에 대해 깊이 고찰한 글을 찾을 수 없었기 때문에, 독자방침이지만 끄적여보도록 하겠습니다 (친절한 태클을 기다려봅니다. )Redux 답습 패턴Redux 구현 경험자도, 또 경험이 없는 분도 이 방법이 가장 이해하기 쉽다고 생각합니다. 'Provider를 한개만 갖도록 한다' 입니다. 이렇게 하면 모든 컴포넌트가 전체의 ..

이글을 읽는 분들은 Redux를 도입하신 분, 또는 이제부터 React의 상태관리를 도입하려는 분일거라 생각합니다.그렇습니다 "Redux 코드는 너무 길지만, 익숙해지면 괜찮겠지?" 라고 생각 하는 분들을 위한 글입니다. 자기자신은 Redux 도입파 였지만 front-end-handbook-2017에 이름이 올라있는 MobX에 관심이 생겨 조사해봤습니다. 그 결과, 이글을 쓰게 되었기 때문에 개인적으로 Redux보다 낫다고 느낀 이유를 적어보겠습니다.코드량이 압도적으로 줄어든다. Store개념이 알기 쉽다. inject를 활용하면 jsx를 pure하게 구현할 수 있다.데코레이터층이 존재한다.코드량이 압도적으로 줄어든다한개의 쌍방향의 값을 컴포넌트에 표시하기 위해서, Redux에서는 아래와 같은 작업이 필..

리액트 네이티브 컴포넌트의 생명주기는 안드로이드 액티비티 생명주기와 비교하면 종류도 많고 복잡합니다.그래서 각 생명주기 별 특징과 사용방법을 한눈에 정리해봤습니다.리액트 네이티브 개발중인 분들에게 도움이 되면 좋겠네요.

서드파티의 네이티브용 SDK로 만든 컴포넌트를 React Native 에서 사용하고 싶어서 조사해봤습니다. 공식은 영어를 읽을 수 있다고 해도 설명이 부족하거나 쓸데없는 내용이 많아서 이해하기 힘들다고 생각했습니다.저는 안드로이드 자바 초심자이기 때문에 나쁘게 생각하지 말아주세요. 프로퍼티 설정이나, 타 API 사용은이런저런 설정이 필요합니다.Android편은 이쪽에서 볼수 있습니다.공식 문서https://facebook.github.io/react-native/docs/native-components-ios.html가장 심플한 구현 코드RCTViewManager를 계승한 헤더파일(.h)과 구현파일 (.m)을 작성합니다.。[XXXX]Manager라고 이름을 지어야 합니다. XXXX가 JS에서 호출할 이름..

서드파티의 네이티브용 SDK로 만든 컴포넌트를 React Native 에서 사용하고 싶어서 조사해봤습니다. 공식은 영어를 읽을 수 있다고 해도 설명이 부족하거나 쓸데없는 내용이 많아서 이해하기 힘들다고 생각했습니다.저는 안드로이드 자바 초심자이기 때문에 나쁘게 생각하지 말아주세요. 프로퍼티 설정이나, 타 API 사용은이런저런 설정이 필요합니다.iOS는 이쪽에서 확인해주세요.공식 문서https://facebook.github.io/react-native/docs/native-components-android.html가장 심플한 코드Native Component의 Name 과 View 인스턴스를 반환하는 Manager 클래스를 작성합니다.Manager클래스（그리고 다른 Java module）를 포괄하는 Pa..

저번에는 네이티브 코드와 함께 쓰는 리액트 네이티브 프로젝트를 구성해봤습니다. 해당 프로젝트 구성을 보면 아래와 같습니다. android , ios 폴더는 각각 네이티브 프로젝트 폴더입니다.react-native 빌드를 실행하고 나면 각각 네이티브 프로젝트에 반영됩니다.리액트 네이티브 코드는 index,android.js 와 index.ios.js 에 있습니다.여기에서 화면을 어떻게 그릴지 어떤 동작을 할지 지정하게 됩니다.각각의 컴포넌트 구성요소를 그리고 스타일을 정의하는 코드들이 보입니다.리액트 코드를 이용해서 UI를 그리도록 하는데, 다음은 component 폴더에 Custom Component를 만들고그것을 화면에 가져와서 사용하는 법에 대해서 적겠습니다. 안드로이드 빌드를 한다면 터미널을 통해,..

리액트 네이티브를 테스트 해보기 위해 샘플앱을 제작하기로 했습니다. 그 준비 과정을 적어두기 위해 블로깅합니다. 풀 리액트 네이티브 앱이 아닌 안드로이드, ios의 네이티브 코드와 함께 사용하기 위한 방법입니다. Node, Watchman 먼저 Homebrew 를 이용해서 node 와 watchman을 인스톨합니다. brew install node brew install watchmanIf you have already installed Node on your system, make sure it is version 4 or newer.Watchman 은 파일시스템의 변화를 캐치하기 위해 페이스북이 만든 툴입니다. 보다 나은 성능을 위해 설치할 것을 추천합니다. The React Native CLI np..