소프트웨어 마에스트로 과정에 참여하면서 게임 외에 가장 관심이 생겼던 분야는 모바일과 머신러닝이었다. 게임은 이매진컵이나 기타 개인 프로젝트로 진행해봤었지만, 흔히 하는 안드로이드나 iOS는 만들어 본 적이 없었기 때문에 간단한 앱을 척척 만들어 내는 주위 동기들을 보면 신기할 따름이었다. (반대로 동기들이 내가 게임 만드는 걸 신기해하더라….)
iOS?! Android?!
아무튼, 내가 이전에 해보지 않았던 새로운 분야였기 때문에 이것저것 많이 시도해보았다. 처음에는 Swift를 이용하여 iOS를 좀 만져봤고, 다음에는 안드로이드를 살짝 만져보았지만, 자바를 좋아하는 편이 아니라 금방 싫증이 났다. 좀 더 다른 방법들을 찾아보다가 FUSE Tool을 사용해 보았는데, 안 하던 분야 + 야매학습 덕분인지 만들어보기 좀 힘들었던 것 같다. 작업하다가 출몰되는 Unknown Error들이 FUSE를 던지는데 한몫했기도 했다. 차라리 유니티로 같은 기능을 더 빨리, 안정적으로 만들 수 있을 것 같은 느낌이랄까?
그러다가 페이스북에서 만든 리액트 네이티브(React Native)를 접하게 되었고, 나름 괜찮다고 생각되어서 공부하는 김에 포스팅을 시작하려 한다. (아직은 FUSE보다 좋은 것 같다)
설치
앞으로의 포스팅은 제가 개발하는 환경인 OS X 기준으로 포스팅을 작성하려 합니다.
Atom 에디터 Atom 에디터는 오픈소스이면서 활용 가능한 플러그인이 많아서 많은 개발자에게 사랑받는 편집기 중에 하나이다. 물론 꼭 Atom 에디터를 사용하지 않고 써브라임 텍스트 같은 다른 에디터를 사용해도 충분하다.
Atom 에디터는 여기에서 다운 받을 수 있다.
01. homebrew 설치
/usr/bin/ruby –e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
이제 brew 명령어를 사용할 수 있습니다. node.js 설치도 필요하니 brew를 이용해 설치해주세요.
02. node 설치
brew install node
03. React Native Command Line Tools
npm install –g react–native–cli
04. 같이 설치하면 좋은 패키지들
1. Watchman : 페이스북(Facebook)에서 만든 파일시스템 변화 감지 툴입니다.2. Flow : 정적 타입 체커입니다. brew install watchman brew install flow
프로젝트 시작하기
react–native init [ProjectName]
모든 설치가 끝났다면 프로젝트 파일을 만들어야겠죠? react-native init [프로젝트명]을 입력하면 해당 폴더에 알아서 리액트 네이티브 프로젝트를 만들어 줍니다. 안에는 샘플 코드와 필수적인 네이티브 폴더들이 있습니다. 하이러키를 살펴보면 아래와 같습니다.
