subtle & plausible

내비게이션입니다. 안드로이드앱 개발할 때는 내비게이션에 별로 신경쓰지 않았는데, iOS앱을 개발할 때는 왜 이렇게 push냐 modal이냐로 고민을 많이 하게 되는 것일까요. 결과물 (https://github.com/utrpanic/today-what-else/tree/react-native-ch7/ReactNative/RNNYT)샘플 코드에서 선보이고 있는 NavigatorIOS와 NavigationExperimental은 현재 모두 deprecate 되었습니다. react-navigation(https://reactnavigation.org/)을 대신 사용해보다가 샘플을 계속 따라가기가 버거워져서, 다시 원복하고 대신 react-native-navigation-experimental-compat을 ..

TIL/리액트 네이티브 2018. 5. 30. 21:48

NYT API (http://developer.nytimes.com/)이름과 이메일만 일러주면 시원하게 API Key를 보내줍니다.https://api.nytimes.com/svc/topstories/v2/technology.json?api-key=5b21804f73ce4fe7a23e518ae7c4e9a4 결과물 (https://github.com/utrpanic/today-what-else/tree/react-native-ch6/ReactNative/RNNYT)시키는대로 샘플만 따라하다보니 전체 그림이 보이질 않습니다. 요소들을 하나씩 짚어보고 코드만 봐서는 이해가 안가는 부분의 문서를 참조하겠습니다.StoreRedux 애플리케이션은 오직 하나의 store만 갖습니다. 애플리케이션의 state tree..

TIL/리액트 네이티브 2018. 5. 22. 08:38

Flux (https://facebook.github.io/flux/)Flux는 전통적인 MVC 아키텍쳐를 대체하기 위해 페이스북에서 제안한 아키텍쳐입니다. 일반적인 MVC 아키텍쳐에서 Controller를 중심으로 데이터가 양방향으로 오가는 것과 달리 플럭스는 다음과 같은 특징을 갖습니다.데이터 흐름의 일방향화공유된 가변 상태의 제거각 컴포넌트들이 상태를 단방향으로 전달하는 동안, 모든 상태 변경은 오직 Store가 담당하고 있습니다. 이렇게 가변성을 한 곳에 집중시킴으로써, 버그가 발생했을 때 개발자가 들여다봐야할 곳을 명확하게 만들어 줍니다. Redux (https://redux.js.org/)Redux는 Flux를 기반으로 구현된 데이터 처리 라이브러리입니다. 다만, Flux를 그대로 구현한 것은..

TIL/리액트 네이티브 2018. 5. 8. 00:38

Atom(https://atom.io/)으로 작업을 하다가 중간에 IDE를 하나 소개 받았습니다.Visual Studio Code (https://code.visualstudio.com/)새벽 4시까지 오타와의 전쟁을 치르고 나니 허무함이 밀려오네요. '와 `를 구분해서 쓰는 걸 보니 정신이 아득해집니다. 리액트 개발자가 리액트 네이티브를 공부하는 게 아니라 앱 개발자가 리액트 네이티브를 공부하는 상황이라, 리액트 컴포넌트(https://reactjs.org/docs/hello-world.html)와 리액트 네이티브 컴포넌트(https://facebook.github.io/react-native/docs/getting-started.html)를 각각 확인해야 합니다. 자유도 높은 문법 덕분에 계속 API..

TIL/리액트 네이티브 2018. 5. 7. 04:44

상상과는 달리 디자인 적용을 위해 CSS를 사용할 필요는 없었습니다. 다만 요소도 방식도 CSS와 매우 유사한 것은 분명하네요. 속성들이 다 머릿속에 들어가 있어야 디자인 스펙을 따라잡을 텐데, 지금 시점에 이걸 다 외우고 있을 수도 없고... 목표 삼을 토이 프로젝트가 시급합니다. 스타일을 정의하는 방법으로 두 가지가 있습니다. 1. JSX에 직접 기술하는 '인라인 스타일' 2. 자바스크립트 객체로 정의하는 '스타일 객체'. StyleSheet를 사용하면 컨테이너 객체가 제공되고, 스타일의 속성들이 올바른지 검증도 해줍니다. 복수의 스타일이 적용될 때, 같은 속성이 중복으로 정의되어 있으면 뒷 쪽에 있는 속성이 적용됩니다. 리액트 네이티브는 스타일링에 있어서 다른 접근 방식을 채택한다. CSS의 상속 ..

TIL/리액트 네이티브 2018. 4. 21. 17:21

Hello World 프로젝트를 생성하고, 크롬 개발자 도구를 통해 디버깅할 수 있는 간단한 방법을 일러줍니다. 막힘없이 시키는 대로 따라할 수 있었습니다. 크롬 개발자 도구를 늘 동경하고 있었는데, 이렇게 접하게 되어 기쁩니다. 앱개발 경험 뿐이라 급한대로 집에 굴러다니던 HTML5&CSS 책을 함께 훑기 시작했습니다. Hi there 리액트 네이티브 패키저는 바벨을 이용해 이 JSX 코드를 다음과 같이 트랜스파일한다.return React.createElement(Text, null, 'Hi there') 리액트 네이티브 앱을 디버깅할 때, 그 앱은 프록시 모드로 구동된다. 이는 앱의 자바스크립트가 디바이스나 시뮬레이터의 자바스크립트코어 엔진이 아닌, 크롬 V8 자바스크립트 엔진에서 실행된다는 의미다..

TIL/리액트 네이티브 2018. 4. 18. 05:39