지난 30일동안 이전에 안드로이드로 만들었던 앱을 flutter로 새로 만들었다. 바로 성경앱이다. 이 앱은 2012년 1월에 안드로이드앱으로 만들어서 2014년까지 유지보수를 했었다. 당시 안드로이드에서는 제대로 된 ebook 리더도, 쓸만한 성경앱도 없었기 때문에 안드로이드 개발 연습도 할 겸 필요한 앱도 만들겸 만들었던 것 같다. 성경 - Google Play 앱 간단한 성경앱입니다. 읽기 쉽고, 원하는 구절을 쉽게 찾을 수 있습니다. 웹버전도 있어요. - http://holybible.joostory.net 문의나 제안 있으시면 메일로 보내주세요. - email : holybible@joostory.net play.google.com 안드로이드 폰을 사용하면서 이 앱을 잘 사용하다가 아이폰을 사용..

react를 사용하는데 redux는 필수적인 요소라고 할 수 있다. 이제는 다른 방법들도 많은 것 같지만 결국 redux와 같이 app 전체에서 공유하는 공통 state를 사용하는 것은 비슷하다. import React, { Component } from 'react' import { connect } from 'react-redux' import { changeName } from './actions' @connect(state => ({ name: state.name }), dispatch => ({ handleChangeName: (name) => { dispatch(changeName(name)) } })) class MyComponent extends Component { constructor(..

React Hooks는 functional component를 사용할 수밖에 없다. 애초에 그러려고 만든 거니까. 그동안 redux와 react를 connect하기 위해서 hoc를 사용했는데 decorator를 사용했었다. import React, { Component } from 'react'; import { connect } from 'react-redux'; @connect(state => ({ name: state.name })) class MyComponent extends Component { render() { const { name } = this.props; return ( {name} ); } } export default MyComponent; 이 decorator는 class에만 ..

이 발표를 보고나서 Dan Abramov에게 묘한 매력을 느꼈다. 영어도 잘 못하면서 팔로우를 시작했다. Reactjs에 대해서 이런저런 것을 많이 보게 되었다. 그리고 어느 덧 발표했던 기능이 정식출시했다. 이름은 React Hooks다. 기본 개념 Hooks소개의 Motivation에도 말하고 있지만 Hooks의 기본 목적인 간결함이다. 다음의 코드는 Hooks를 사용한 코드다. import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 이 코드가 얼마나 ..

Flutter에서 router를 사용하면 Screen을 전환할 때 데이터를 넘겨줄 수가 없다. 그래서 어쩔 수 없이 redux같은 글로벌 저장소를 사용해야만한다. UI만 만들 때는 별생각없이 만들어도 됐지만 데이터가 들어가면서부터는 삽질에 삽질을 거듭하고 있다. 지금도 모두 해결한 것은 아니지만 일단 지금까지 겪었던 일들을 정리해본다. Navigation React에서는 무조건 router를 사용하는 것이 편했다. 아무래도 한곳에서 접근가능한 페이지를 모두 관리하고 있는 편이좋기 때문이었다. 그것은 너무 web 방식이라고 생각했는데 Flutter에서도 router를 비롯한 다양한 방법의 스크린 전환을 안내하고 있다. 자연스럽게 app에 route를 설정해서 사용하게 됐다. initialRoute: '/'..