react native를 이용해 헬스케어 관련 프로젝트를 진행하게 됐다. 지금까지 웹 프로그래밍만 진행해오다 처음 시작하는 프로젝트인지라 모든게 생소했다. 하지만 react와 비슷한 형태로 ios, android 앱을 만들 수 있다는 것은 큰 메리트라 생각한다.
철저하게 m1맥의 입장에서 진행했으며, 잘 보고 따라하시면 문제 없이 프로젝트를 시작할 수 있다!
설치하기
먼저 리액트 네이티브의 개발 방식은 크게 Expo cli와 React Native cli로 나뉜다. 이는 패키지 형태와 기본 형태로 나눠서 개발할 수 있는 셈이다.
Expo로 시작하면 편하게 세팅할 수 있지만, 나중에 Eject라는 과정을 거쳐야하고, 프로젝트가 커질수록, 네이티브 모듈을 추가하거나 커스텀할 때 번거로움이 생긴다. 그러나 일일이 설치해줘야하는 것들이 적고, 바로 앱 시뮬레이터를 돌려볼 수 있다.
React Native Cli는 처음 세팅해줘야할 것은 많지만, 높은 자유도와 범용성으로 프로젝트가 길어지거나 규모가 커질때 유연하게 대처할 수 있다.
이번 시간에는 React Native Cli 위주로 설치하는 방법을 알아보자.
1. node
homebrew를 이용해서 먼저 node부터 설치해주자.
버전은 node -v로 확인할 수 있다.
brew install node
brew install watchman그리고 파일 변경 추적을 위해 watchman도 설치해주자.
2. IOS 세팅
이젠 IOS 개발을 위해 app store에서 xCode를 설치해주자.
비록 1.5점의 평가를 받은 비운의 어플이지만 이게 없으면 시도조차 하지 못한다.
Xcode를 열고 메뉴에서 preferences를 선택해주고
locations에서 command line tools에서 최신버전을 선택해주면 된다.
cocoaPods
해당 툴은 IOS 개발에 사용되는 의존성 관리자다.
react-native로 앱 개발을 하려면 꼭 필요하니 설치해주자.
설치가 완료되면 버전 확인을 해주자.
문제 없이 설치 된다면 다음 스텝으로 넘어가면 된다.
sudo gem install cocoapods
pod --version
3. Andoroid 세팅
이제 안드로이드 세팅이다. 안드로이드 앱 개발에 필요한 Java Development Kit이라는 JDK를 설치해주면 되는데, homebrew도 좋지만 m1 맥북 사용자라면 직접 java 홈페이지에서 설치하는 것을 추천한다.
java jdk라고 검색 후 오라클 페이지로 들어가자
가장 왼쪽에 있는 java 다운로드에 들어가서 아래로 조금 내려보면
툴킷을 다운받을 수 잇다. 이때 Arm64라는 녀석을 다운받아주자..
이전에 작성된 블로그를 보고 따라하다가 괜히 인텔 버전을 받기라도하면,,
그 긴 시간을 다시 할애해야하니 애초에 잘 보고 다운받는 습관을 들이자.
이후에 마찬가지로 버전을 확인해주자.
java -version
javac -version // java 컴파일러 
아직 끝이 아니다.
안드로이드 스튜디오를 설치해줘야한다.
아마 이게 가장 많은 시간을 소요할 것이다.
구글에 안드로이드 스튜디오를 검색해서 설치 파일을 내려받자.
일반적인 설치 플로우다.
다만 개발자스럽게 하려면 install type이란 화면이 나온다.
이때 과감하게 custom을 선택하고 넘어가자.
그리고 ui모드가 나오는데 당연히 국룰은 다크모드다
이제 이동하면 SDK Components Setup 화면을 볼 수 있다.
여기서 Android Virtual Device를 선택하고 Next 버튼을 눌러 설치를 진행해주자.
이때 performance에 intel은 본인의 맥북이 intel 칩셋이라면 선택해도 된다.
아니라면 넘겨주자.
Intel의 HAXM(Hardware Accelerated Execution Manager) HAXM은 Intel CPU를 실행하는 컴퓨터에 대한 가상화 엔진입니다. - MS Build
이후부터는 일반적인 소프트웨어 설치 과정과 동일하니 Finsh를 눌러 스튜디오 설정을 완료해주면 된다.
안드로이드 스튜디오 설치가 완료되면 실행을 확인하고 다음 스텝으로 넘겨주면 된다.
여기서부터는 조금 주의해야한다. 커스터마이즈를 눌러준 다음 아래 보이는 주황글씨의 all settings를 눌러 이동해주자.
제대로 찾아서 들어갔다면 다음과 같은 화면을 볼 수 있을 것이다.
오른쪽 하단의 show package Detail을 눌러 다음과 같은 리스트를 찾아 설치해주면 된다.
- Android SDK Platform 29
- ARM 64 v8a system image
- Google APIs ARM 64 v8a System Image
- Google Play ARM x86 Atom_64 System Image
m1 사용자들은 인텔이 아닌 ARM을 선택해주자,, 사실 이것때문에 쓴 글이니 주의하길 바란다.
다음은 환경 변수 설정이다. 스튜디오를 환경변수에 등록해줘야 제대로 작동하는 것을 볼 수 있다.
# export ANDROID_HOME=$HOME/Library/Android/sdk
export ANDROID_HOME=자신의 안드로이드SDK 위치/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위에 코드를 복사해서 그대로 zsh, bash에 붙여주면 된다.
source ~/.zshrc환경변수를 제대로 적용했다면 터미널을 열고 adb를 입력해서 확인해보자
실행
이제 모든 설치과정을 끝냈다. CRA를 통해 리액트 네이티브 프로젝트를 실행해보자. 리액트에 익숙한 사람이라면 비슷한 과정이라 금방할 수 있을 거라 생각한다.
npx react-native- init AwsomeProject터미널에서 해당 코드를 실행하고, ios, android가 무사히 작동하는지 알아보자
npm run ios
npm run andriod
이제 제대로 리액트 네이티브를 배워보는 시간을 가지면 된다!
모두 화이팅,,!
두번다시 나같은 실수를 하지 않길 바라며,, 글 마무리하겠다.
