[React Native] - "치열한 하루" 모바일 앱 개발 #1

서론

지금까지 항상 클론 코딩이나 과제만 해봤지 실제 서비스를 개발해 본 적은 없었다. 그러다 운 좋게도 사업을 한다고 하는 친구들의 부탁으로 인생 첫 외주(?)를 맡게 되었다. 한 번도 모바일 앱 개발을 공부해 본 적도 개발하겠다는 생각조차 안 했던 나에게 첫 개발이 실제 서비스를 제공해야 하는 모바일 앱이라니... 부담감과 걱정이 있었지만 한 편으로 학생이 아닌 진짜 개발자로서의 첫 작업물이 나올 수 있겠다는 생각에 흔쾌히 수락했다. 첫 개발에 1인 개발을 할 자신이 없어서 42 서울에서 사람을 구해 협업을 하기로 했다. 사업 아이디어에 대한 시장 반응을 살펴보기 위한 프로토 타입용 앱이었기에 되도록 빠르게 출시해야 했다.

 

"치열한 하루"는 GPS 기반 일정 관리 앱이다. 기존 일정 관리 앱과 다르게 일정 장소에 위치 서비스를 이용해 사용자가 일정 시간 내에 일정 장소에 있는지 없는지 검사하는 기능을 제공한다. 또한, 이 위치 서비스가 백그라운드, 즉 앱을 사용하지 않을 때에도 동작을 한다. 더 자세한 내용은 핵심 기능 구현 챕터에서 설명하도록 하겠다.

 

기술 스택

• React Native / React Hooks / Redux
• Baas - Firebase (Firestore)
• JavaScript
• GitHub

빠른 시간 안에 Android와 iOS, 두 플랫폼용 앱을 개발해야 해서 React Native 프레임워크를 선택했다. 사실 Flutter도 생각하고 있었지만 생소한 Dart를 배우는데 시간이 오래 걸릴 것 같아서 친숙한 JavaScript를 사용할 수 있는 React Native로 결정했다. 백엔드는 서버리스로서 복잡한 백엔드 코드 없이 API만 호출해서 간편하게 백엔드를 구축할 수 있는 Firebase를 사용하기로 했다. DB를 Firestore와 Realtime Database 중에 하나 골라야 했는데 데이터를 관리하기 비교적 쉬운 Firestore을 선택했다.

* react-native-background-geolocation 라이브러리가 Android는 유료여서 결국 iOS만 개발하기로 했다.

 

개발 환경 설정

React Native 앱은 expo앱과 non-expo앱으로 나뉘는데 expo앱은 환경 설정이나 사용, 개발, 배포하는데 편리하다. 첫 개발이다 보니 복잡한 환경 설정을 안 해도 되는 Expo를 사용해서 개발을 하다 외부 라이브러리를 추가할 수 없는 문제가 발생해서 급히 Eject를 통해 non-expo앱으로 바꿨다. non-expo앱으로 바꾸면 ios, android 빌드 폴더가 생기는데 이는 Xcode와 Android Studio를 통해서 직접 개발 환경을 설정해야 함을 의미한다.

 

개발하는데 뭐가 제일 어렵냐고 물어본다면 나는 자신 있게 환경 설정하는 게 제일 어렵다고 말할 것이다. 코드 오류는 디버깅을 통해 차근차근 고쳐나가면 되지만 환경 설정 오류는 답이 없다. (특히 M1 맥북은 악질 중의 악질...) 하지만 개발자의 덕목이 무엇이던가... 바로 구글링이다!! 이 글을 읽고 있는 나처럼 개발자를 꿈꾸고 있는 사람들에게 말해주고 싶다. 과장 좀 보태서 말하면 개발은 1%의 로직과 99%의 구글링으로 이루어진다고 생각한다. 모르면 무지성 구글링이 답이다. 삽질하다 보면 언젠가 해결 방법이 나온다.... 화이팅!!!

 

외부 라이브러리를 추가할 때 Xcode 설정이 필요한 라이브러리들이 존재한다. 따라서 해당 라이브러리들의 README를 차분히 잘 읽어보고 진행하면 된다. 팁이 있다면 외부 라이브러리 테스트용  Workspace을 하나 만들어서 설치, 설정을 삽질해보고 프로젝트 Workspace에 삽질한 대로 적용하면 프로젝트 작업 공간의 설치, 설정 오류로 인한 복잡한 뒤처리를 안 해도 된다.