사내에서 3개월간 React Native를 처음 접한 주니어 개발자가 혼자서 Create Project부터 스토어 배포까지 겪었던 회고록을 정리하면서 React Native에 대한 경험을 공유드리고자 합니다.
이 포스팅을 통하여 RN(React Native)에 대해 처음 접하시려는 분들부터 RN으로 프로젝트를 착수 중인 개발자 분들에게 조금이나마 도움과 공감이 되었으면 좋겠습니다😄
(회고록이어서 격식체는 빼고 하겠습니다.)
우리 회사는 개발자 인원이 풀스택 1명, 프론트엔드 1명(본인)으로 영세 수준의 규모이다.
프로젝트 사이즈를 보았을 때 본래 5명 이상의 편제가 필요하였지만, IT문화가 잡히지 않은 회사라 개발자 구하기가 쉽지가 않았다..
주요 프로젝트의 착수 8개월 차에 그동안 미뤄왔던 앱 개발도 해야 할 상황이 닥쳤다.
백엔드는 진행하던 프로젝트와 연동되는 거라 프론트인 내가 자연스레 맡게 되었다😂
사실 외주를 맡길 수도 있을 부분이었지만 React로 개발을 계속해서 해왔고 프로젝트의 난이도도 높지 않아 보여,
나의 경력에 회사 프로젝트를 리딩하여 핸들링 할 수 있는 기회는 잘 없을거라 생각하여 욕심을 내어 잡았다. (아직 잘 한 일인지는 모르겠다...)
그렇게 시작하게 된 React Native 프로젝트.. 우선 개발 스택부터 정립을 해야했다.
1. React Native CLI
CLI 와 expo 중에 고려를 해야하는데, 처음에 CLI를 차용하기로 한 이유는 expo를 굳이 안 써도 충분한 라이브러리들이 제공되어있어 expo의 필요성을 못 느껴서였는데. 막상 프로젝트를 진행하다보니 생각보다 네이티브단에서 직접 건드려야하는 부분들이 굉장히 많았다.
때문에 이런 부분에서 expo를 했다면 굉장히 골머리를 썩혔겠다는 생각이 든다.
개인적으로 느낀 결론은 expo를 쓸 이유가 없다면 쓰지 말자...
https://reactnative.dev/docs/environment-setup
Setting up the development environment · React Native
This page will help you install and build your first React Native app.
reactnative.dev
2. Apollo graphQL
주요 프로젝트가 아폴로 그래프큐엘을 사용을 하고 있었고, DB가 연동되는 앱이었기에 당연히 사용하는 스택이었다.
그러나 세팅 후에 문제가 두 가지가 있었는데
(1) apollo/client 하위 버전에서는 호환이 안 된다. 정확한 버전은 기억이 안나지만 3.5.0였나 3.6.0 버전을 설치하고 테스트를 보니, 신기한게 useQuery는 되는데 useMutation이 먹지를 않는 것이다..(반대일 수도)
3.7.0-alpha.5 버전으로 업그레이드하여 해결을 보았다.
(2) 실기기에서는 실서버에서만 구동이 된다는 것이었다. 이를 모르고 로컬서버로 테스트를 보니, AVD에서만 정상 작동하고 실기기에서는 터지니 원인을 찾기 전까지 애 좀 먹었다.
https://www.apollographql.com/docs/react/integrations/react-native/
Integrating with React Native
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
www.apollographql.com
3. NativeBase
주요 프로젝트에서 사용하고 있는 MUI와 유사해보이고 기획서와 비견하였을 때 커버할 수 있을 정도의 충분한 컴포넌트를 보유하고 있어 해당 UI 라이브러리를 사용하기로 하였다.
아쉬운 점은 각각의 컴포넌트별로 제공되는 props의 설명이 공식 문서에서 부족하여 불편한 감이 있긴 하였다.
NativeBase: Universal Components for React & React Native
NativeBase 3.0 lets you build consistently across android, iOS & web. It is inspired by the Styled System and is accessible, highly themeable, and responsive.
nativebase.io
4. Firebase
이것도 마찬가지로 주요 프로젝트가 Firebase를 사용하고 있었고, 앱에서 노티피케이션 기능을 제공해야했다.
React Native와 firebase를 연동하기 쉽게 해주는 라이브러리가 있어 어렵기 않게 구현하였다.
React Native Firebase | React Native Firebase
Welcome to React Native Firebase! To get started, you must first setup a Firebase project and install the "app" module. React Native Firebase is the officially recommended collection of packages that brings React Native support for all Firebase services on
rnfirebase.io
여기까지 세팅을 완료하였을 때 생각보다 빨리 끝낼 수 있겠다는 오만함을 가지고 있었다.
정작 정말 중요한 세팅을 보지 않아 피를 보게 될 것도 모른 채로🥹🥹
글이 길어지니 다음 포스팅으로 넘어가겠습니다.
'Experience > Developer' 카테고리의 다른 글
| DAMP 원칙을 고수하여 코드 직관성 높이기 (0) | 2023.04.27 |
|---|---|
| DRY 원칙을 고수하여 코드 작성 효율성 높이기 (0) | 2023.04.27 |
| React Native로 세팅부터 배포까지 후기, 장단점 등 회고록 (2) - 네이티브단 환경 설정 (0) | 2022.07.18 |