▶ AI시대에서 개발자가 사는 법

5분 읽기
Last updated on

리액트 네이티브

📱 개요

리액트 네이티브에 관심이 생겼다. 이미 리액트 네이티브로 프로젝트를 한적이 있어서(개발을 직접하진 않았지만…) 완전 생소하진 않았다. 구글링을 해보니 플러터와 용호상박을 이루고 있었는데 개인적으로는 리액트 네이티브가 우세한 형국으로 보였다.

왜 리액트 네이티브인가?

오랜 기간을 웹개발자를 하다보니 자바스크립트는 너무 익숙하다. 오랜기간 운전을 하거나 보드를 타거나 하면 이후 부터는 몇년만에 운전이나 보드를 타러가던 거부감없이 빠르게 적응하는 것과 마찬가지다. 자바스크립트를 엄청 잘하는 것도 아니지만 화면에 적용시킬만큼은 알기 때문에 리액트에서 사용하는 타입스크립트는 편안하게 느껴졌다.

크로스 플랫폼의 필요성

회사에 앱개발자가 둘이 있는데 IOS, AOS 개발자다. 아이폰과 안드로이드폰에 대응하기 위해서 어쩔수 없이 개발자가 기기종류별로 둘이 최소인원이 되었는데 각자의 퍼포먼스가 다르다.

예를들면:

  • 아이폰 개발자가 일주일에 개발이 가능하다면
  • 안드로이드는 2주일이 걸린다

아이폰개발과 안드로이드개발의 난이도 차이인지 환경의 차이인지 개발자의 역량의 차이인지는 정확하게 모르지만 리액트 네이티브라는 크로스플랫폼을 지원하는 솔루션으로 개발을 한다면 이런 차이를 줄일 수 있다고 생각한다.

네이티브 개발자들의 저항

여기에서 허들이 발생하는데, 이런 크로스플랫폼으로 개발하는 것을 아이폰이나 안드로이드 개발자가 좋아하지 않는다는 것이다. 개인적인 성향으로는 납득이 잘 안가지만 그럴 수도 있다고는 생각한다.

네이티브의 장점도 많으니 무조건 리액트 네이티브로 해야한다고 말할 순 없다. 그렇지만 회사에서 게임이나 아주 많이 인터렉티브한 앱을 만들지 않는 이상, 리액트 네이티브와 같은 크로스 플랫폼은 무조건 써야 한다고 생각한다.

그냥 스팩만 보고 판단하기로는 플러터쪽은 해 볼 생각이 들지도 않는다. 먼저 리액트 네이티브를 써보고 좋은면 플러터는 안써보는 것으로 해야겠다.

🛠️ 환경구성

공식 홈페이지로 가보자: 리액트 네이티브 환경 설정 링크

환경구성을 위해서 두가지 방법이 있는데:

  • Expo라는 것을 이용하는 것
  • React Native CLI를 이용하는 방법

초보자는 Expo Go Quickstart를 보고 좀 아는 사람은 React Native CLI Quickstart를 보고 따라하라고 하는데 나는 그래도 좀 아는 편이지 않을까? 그리고 좀 더 있어보이는걸로 하자라는 생각으로 React Native CLI Quickstart를 선택해서 진행해보려고 한다.

개발 환경 선택

  • Development OS: macOS를 선택
  • Target OS: Android와 iOS 둘 다 할 생각이지만…

일단 난 아이폰은 개발자 구매를 안한 상태라서(연 10만원정도 듬) 안드로이드로 우선 진행해보겠다. 안드로이드 개발자는 구매를 했었다.(오래전에 3만원정도에 구매, 평생 사용가능)

📦 필수 패키지 설치

1. Node 설치

brew install node

2. Watchman 설치

brew install watchman

3. 자바 개발자 도구 설치

brew tap homebrew/cask-versions
brew install --cask zulu11

4. 안드로이드 스튜디오 설치

본인 맥에 맞는 버전을 내려받아서 설치한다: 안드로이드 스튜디오 링크

Android 13.0을 체크하고 Apply 버튼 클릭.

5. 환경 변수 설정

.zprofile에 다음 코드를 추가:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

🚀 새로운 어플리케이션 생성

npx react-native@latest init AwesomeProject

React Native 로고 아스키 아트

         ######      ######
      ###    ####  ####    ###
    ##    ###        ###    ##
   ##    ####        ####    ##
   ##    ####        ####    ##
   ##    ##            ##    ##
    ##    ###        ###    ##
      ###    ####  ####    ###
         ######      ######
         
    Welcome to React Native!
    Learn once, write anywhere

🔧 트러블슈팅

CocoaPods 설치 에러

처음 실행시 다음과 같은 에러가 발생할 수 있다:

error ✖ Installing CocoaPods
error An error occured while trying to install CocoaPods, which is required by this template.

해결방법:

  1. Ruby 버전 업그레이드
brew install rbenv
rbenv install -l  # 설치 가능한 버전 확인
rbenv install 3.2.2
rbenv global 3.2.2
  1. CocoaPods 설치
sudo gem install cocoapods
  1. 기존 react-native-cli 제거
npm uninstall -g react-native-cli @react-native-community/cli

C Compiler 에러

Xcode가 설치되어 있지 않은 경우 발생할 수 있다:

configure: error: C compiler cannot create executables

해결방법: Xcode를 App Store에서 설치

🎮 시뮬레이터 실행

Android 실행

cd "/Users/andew/Projects/reactnative/AwesomeProject"
npx react-native run-android

iOS 실행

cd "/Users/andew/Projects/reactnative/AwesomeProject"
npx react-native run-ios

또는 Xcode에서 직접 실행:

  • AwesomeProject/ios/AwesomeProject.xcworkspace를 Xcode로 열기
  • Run 버튼 클릭

✅ 완료!

시뮬레이터가 자동으로 실행되면서 React Native 앱이 구동된다!

🎯 다음 단계

  • 코드 구조 파악하기
  • 간단한 컴포넌트 만들어보기
  • 네비게이션 구현하기
  • 상태 관리 적용하기

📚 참고 자료

“Learn once, write anywhere” - React Native의 철학처럼 한 번 배워서 어디서나 사용할 수 있는 크로스 플랫폼 개발의 매력을 느껴보자!