리액트 네이티브로 앱 개발하기 — 1
글을 쓴다는 것이 익숙한 일이 아니다보니 어떤 주제로 글을 쓸지 고민이 많았다.
UFO 에 합류한지 1년이 되는 시점이니 지난 1년을 뒤돌아보면서 회고 형태로 글을 적어볼까?
리모트 근무에 관해서 경험과 장단점들을 정리해볼까?
그동안 있었던 수많은 프로젝트들에 대한 뒷이야기들을 정리해볼까?
새로 진행하는 프로젝트에서 사용하기 위해서 공부하는 리액트 네이티브 기술을 정리해보기로 했다.
프로젝트를 진행하면서 그 과정을 기록하는 것도 의미가 있을것 같다.
앱 개발하는데 리액트 네이티브 기술을 선택한 이유는 뭘까?
앱 개발은 퀄리티와 퍼포먼스 측면에서만 보면 네이티브로 개발하는게 가장 좋다.
iOS 와 안드로이드에서 제공하는 SDK 를 사용해서 각 환경에 최적화 된 앱을 두벌 개발해야 하는 것이다.
하지만 현실적으로 모든 서비스들이 네이티브 기술로 앱을 개발하기에는 투입되는 개발 리소스가 너무 많고 비효율적이다.
한명의 개발자가 iOS 와 안드로이드 네이티브 앱을 개발하기는 어렵다보니
프로젝트 참여 개발자가 늘어나고 이에 따라 커뮤니케이션 비용도 증가하게 된다.
이런 저런 이유로 웹 기술 기반으로 iOS 와 안드로이드를 같이 지원할 수 있는 하이브리드 앱 개발을 검토하게 되는 것이다.
하이브리드 앱 개발 기술도 워낙 종류가 다양한데 리액트 네이티브는 어떤 특징을 가지고 있을까?
일단 페이스북에서 개발한 오픈소스 프로젝트라는 점과
개발은 웹 기술 기반으로 개발하고 네이티브 결과물을 제공한다는 점이 가장 큰 특징이다.
과연 실제로도 어느정도의 개발이 용이하고 네이티브 앱과 유사한 성능을 보일수 있을지는 프로젝트를 좀 더 진행해봐야 확인할 수 있을것 같다.
리액트 네이티브 react-native
https://facebook.github.io/react-native/
react 는 페이스북이 웹 개발을 쉽게 하기 위해 만든 기술
react-native 는 리액트의 접근방법을 모바일로 확장한 페이스북의 오픈소스 프로젝트
기존의 모바일 자바스크립트 툴들이 웹뷰를 통해 인터페이스를 구축하는 하이브리드 방식이라면 리액트 네이티브는 자바스크립트로 작업하지만 인터페이스는 네이티브 위젯으로 표시하는 방법
리액트 네이티브 장단점
(출처 : https://realm.io/kr/news/why-react-native/)
장점
- 무료이고 활발하게 개발되고 있는 오픈소스이다.
- React.js 를 사용한다.
- 페이스북등 좋은 레퍼런스가 빠르게 늘고 있다.
- 네이티브 결과물을 제공한다.
단점
- 모든 코드를 재사용할 수 있는건 아니다
- 내부적인 proxy 구현들으로 인해 제약이 발생하기도 한다.
- 아직 버전이 낮은 편이고 계속 개발중이라 API가 업데이트가 될 수 있다. 현재 iOS, 안드로이드 별도로 되어있는 API가 하나로 합쳐질수 있는 것들도 있어서 API 정리가 계속 진행될 것으로 보인다.
첫번째 난관 : 개발환경 설정하기
OSX 환경을 준비해야 한다. 개발자라면 맥을 써야만 하는건가.. 게다가 앱 개발을 한다면 선택의 여지가 없는것 같다.
https://facebook.github.io/react-native/docs/getting-started.html#content
xcode 가 있어서 iOS 개발환경 구축은 쉽지만 안드로이드 개발 환경 셋팅은 어렵다.
https://facebook.github.io/react-native/docs/android-setup.html#content
처음 설정시 에뮬레이터 구동까지 진행도 쉽지 않지만 에러 메시지들을 구글 검색하면서 겨우 해결했다.
두번째 난관 : 낯선 코딩 스타일
리액트 네이티브는 웹 기술을 기반으로 하지만 스타일이 기존의 HTML 과 CSS 와는 전혀 다르다.
render() 예시
<View style={styles.background}/> <Text style={styles.base} /> Hello World </Text></View>
스타일 시트 예시
var styles = StyleSheet.create({ base:{ width:38, height:38, }, background:{ backgroundColor:’#222222', }, active:{ borderWidth:2, borderColor:’#00ff00', },});
처음에는 낯선 스타일에 거부감이 좀 있었지만 리엑트에서 위와 같이 JS 만으로 CSS 까지 표현하면서 해결하고자 하는 고민들을 읽고나니 개발 의도가 이해가 가면서 거부감이 많이 줄어들었다.
React: CSS in JS
https://speakerdeck.com/player/2e15908049bb013230960224c1b4b8bd?#
Problems with CSS at scale
- Global Namespace
- Dependencies
- Dead Code Elimination
- Minification
- Sharing Constants
- Non-deterministic Resolution
- Isolation
세번째 난관 : 디버깅 환경 익히기
react-native 공식 사이트의 튜토리얼을 보면서 기본적인 콤포넌트 배치를 통한 화면 구성하는 작업을 익혔다.
https://facebook.github.io/react-native/docs/tutorial.html#content
추가로 Tuts+ 의 Get Started With React Native 강의 동영상을 보면서는 좀 더 복잡한 구조의 샘플 앱 개발을 학습하고 무엇보다도 중요한 디버깅하고 로그 남기는 방법을 익혔다.
https://code.tutsplus.com/courses/get-started-with-react-native
기본적으로 소스 코드 수정은 텍스트 에디터에서 하고 에뮬레이터에서 Live Reload 기능을 켜두면 소스 코드가 수정되서 저장될때마다 수정된 내용을 확인할 수 있다.
Show Inspector 를 통해서 레이아웃 배치를 조정할 수 있다.
Debug in Chrome 이나 Debug in Safari 기능을 사용하면 React Deveoper Tools 같은 확장 프로그램 설치를 통해 디버깅 작업을 수행할 수 있다.
또한 소스 코드에 console.log() 나 console.dir() 등으로 로그를 남기고
브라우저의 개발자 도구 — Console 탭에서 데이터나 로그 정보등을 확인할 수 있다.
네번째 난관 : snowflake 익히기, react-redux 개념잡기
개발 생산성과 이후 유지 보수를 고려해서 프레임워크를 사용해서 개발을 진행한다.
이번 프로젝트에서는 snowflake 라는 프레임워크를 사용하기로 하고 검토하고 있다.
snowflake : https://github.com/bartonhammond/snowflake
snowflake 는 react-native, Jest, Redux, Hapi, Parse.com, OpenShift, TComb, Validate.js 등의 기술이 쓰이고 있다.
이 기술들을 익히고 익숙하게 습득하는 것이 현재 진행중인 상태이다.
다음번에는 snowflake 를 구성하고 있는 기술요소등에 대한 내용들을 정리해보고 Bitrise.io 서비스를 사용해서 CI(Continuous Integration)작업등에 대해서 정리해보려고 한다.
