[철학과 개발] #14 실시간 도움 주고 받기 프로젝트 생성

P & D

Research and Development가 아니라 Philosophy and Development의 P & D 입니다. 개발글에 있어서 새로운 시도를 하고 있습니다. 그저 개발기를 적어 내려가는 것이 아니라, 어떤 철학을 가지고 개발을 해나가고 있는지, 어떤 시도를 했는지, 개발은 어떻게 하는지를 적어 내려갑니다. 이번 시리즈는 도움을 주고 받는 방법 - 이타인클럽의 철학과 개발 과정을 다룰 것입니다.

이전글 - [철학과 개발] #13 실시간 도움 주고 받기에 필수적인 것들

철학: 일단 시작하자!

철학과 개발 시리즈 글을 보면, 도움 주고 받기를 실천하기 위해 많은 방법들을 시도했습니다. 마지막 남은 방법이 바로 모바일 앱 개발이었습니다.

앱 개발 경험은 간단한 안드로이드 앱 두 세개 만들어 마켓에 올린 게 다였습니다. 이런 상태에서 안드로이드는 물론이고 아이폰용 앱까지 개발하기로 마음 먹었는지 모르겠습니다. 경험은 별로 없지만 왠지 할 수 있을거란 자신감만 있었습니다.

항상 뭔가 프로젝트를 시작할 때, 이 기능, 저 기능 포함하여 설계하려는 버릇이 있습니다. 이 때도 블록체인 기술이 포함된 설계를 했습니다. 세세한 기능도 포함하면서, 거창한 기능까지 구현하려고 하는 것은 앱 개발에 있어서 좋은 방향이 아닙니다.

세세하고 거창한 설계가 나쁘지는 않습니다. 그러나 앱 개발은 핵심 기능이 빨리 돌아가는 것을 확인하는 게 무엇보다 중요합니다.

구현할 것이 너무 많으면 설계가 하다가 포기하는 경우가 생깁니다. 그렇기 때문에, 일단 최소한의 기능 구현을 목적으로 시작해야 합니다.

일단 시작합니다!

개발

타깃

한국 및 외국에서 서비스를 목적으로 하는 앱이기 때문에 안드로이드 앱과 아이폰 앱을 모두 개발할 수 있는 프레임워크인 React Native를 선택했습니다. 블록체인 기능을 과감히 뒤로 미루고 최신 React Native 버전인 0.6+ 이상을 선택했습니다.

개발환경

아이폰 앱 개발은 맥에서만 가능합니다만, 주요 개발은 리눅스에서 진행합니다. 아이폰 앱 개발할 때만 맥으로 옮겨서 빌드하는 방식을 택합니다. 따라서 구현부분은 별다른 언급이 없다면 리눅스 환경입니다.

리눅스: 우분투 18.04.3
yarn: 1.21.1
Node.js: 12.14

React Native 관련 설치

설치 참고. https://androidwave.com/install-and-setup-react-native-on-ubuntu/

Node.js 설치 및 yarn 설치
JDK1.8 설치

$ sudo apt update
$ sudo apt install openjdk-8-jdk openjdk-8-jre

.bashrc에 다음과 같이 JDK관련 환경변수 설정

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
export JRE_HOME=/usr/lib/jvm/java-8-openjdk-amd64/jre

React Native CLI 설치

$ sudo yarn global add react-native-cli

Android Studio 설치

Android Studio를 설치하고 .bashrc에 환경변수 설정

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Android Studio를 열어서 가상 기기 생성 (Android Virtual Device)
생성한 AVD를 Android Studio를 실행시키지 않고, 콘솔에서 AVD만 빠르게 실행시킬 수 있도록 alias 생성. .bashrc에 alias 추가.

alias run_avd9='/home/etain/Android/Sdk/emulator/emulator -avd Pixel3'

AVD 기기 보기 명령

$ emulator -list-avds

AVD 실행 에러 해결
에러 상황/해결 참고. https://stackoverflow.com/questions/37300811/android-studio-dev-kvm-device-permission-denied

qemv-kvm을 설치하고, 사용자를 kvm 그룹에 추가하여 해결

$ sudo apt install qemu-kvm
$ sudo adduser $USER kvm

사용자를 kvm 그룹에 추가하고 반드시 로그아웃해야 함. 그래도 안되면 재부팅해야 함.

프로젝트 생성

리액트 네이티브 개발하다 보면 expo라는 것을 자주 보게 됩니다. 이것은 리액트 네이티브 개발을 좀 더 편하게 해주는 툴박스 같은 것입니다. 간편한 점도 있지만 expo에서 제공되는 기능이외의 기능을 사용할 수 없기에 문제의 소지가 있어서 가장 일반적인 CLI 툴로 프로젝트를 생성합니다. 프로젝트 이름은 helpus입니다.

$  react-native init helpus

이렇게 하면 대략 다음과 같은 폴더 구조가 만들어집니다.

> android
> ios
> node_modules
package.json
App.js

android폴더는 안드로이드 앱 관련 파일들이 위치합니다.
ios폴더는 아이폰 앱 관련 파일들이 위치합니다.
node_modules은 필요한 dependency 모듈들이 설치되어 있습니다.
App.js는 앱의 메인 파일입니다. 편의상 이 파일을 app이란 폴더를 만들고 그 안에 넣습니다.
package.json는 dependency 모듈의 필요 버전이 나타나 있습니다.

이로서 껍데기 프로젝트가 생성되었습니다.
아 너무 졸려서 더 못쓰겠습니다 ㅜ.ㅜ

다음에 이어서 Firebase 프로젝트 생성과 관련하여 철학과 개발 시리즈를 써보겠습니다.

도움 주고 받는 앱 helpus

앱 사용자 중 다음과 같은 도움이 가능하 사용자들이 있습니다.

최면 상담, 치료
영어, 일본어 관련 문제
건강 상담, 심리 상담
숙박, 용돈 (미확인)

물론, 저도 명상, 루시드 드림 관련 상담이 가능합니다.

구글 플레이: https://play.google.com/store/apps/details?id=club.etain.helpus
애플 앱 스토어: https://apps.apple.com/us/app/helpus-instant-help-in-town/id1496615309
APK 파일 다운로드설치: https://etain.club/download
소개 영상

사용법

보다 자세한 내용은 홈페이지를 참고해 주세요.
https://etain.club