[React Native] 개발 환경 설정 (feat. TypeError, Xcode error code 65)

김헤일리·2023년 3월 30일
react native
0

React Native

목록 보기
1/1

앞으로 다닐 회사에서 React Native를 사용할 예정이기 때문에 사전에 익숙해지고자 개발 환경을 설정해봤다.
이전에 과제를 할 땐 Expo를 사용했었는데, RN CLI를 사용하는 것은... 참 스트레스 받는 여정이었다. 😢

그래도 어찌어찌 ios 환경까지는 설정을 했고! (android는 나중에...)

개발 환경을 설정하면서 왜 React Native 공식 문서에도 Expo CLI 탭이 있는지 알 수 있을 정도로 이상하게 에러도 많이 생겼었다. 하지만 일단 성공했으니, 이번에 정리해서 다음엔 덜 헤매겠다는 안도감도 들었다!

1. React Native에 대한 간단한 정리

🖥️ React Native 기본 정보

리액트 네이티브는 ios와 android에서 동작하는 네이티브 모바일앱을 만드는 자바스크립트 프레임워크이다.

RN을 사용해서 코드를 작성하면 RN은 ios와 android로 요청을 보낸다. 이때 요청을 보내는 통로를 bridge라고 한다.
바벨이 트랜스파일링을 하는 것과 비슷한 개념이라고 볼 수 있다.
React Native는 React와 다르게 웹 환경에서 개발하는 것이 아니기 때문에 브라우저가 없고, bridge가 외부와 소통을 담당하는 것이다.

보통 앱 개발을 진행할 때, 각각 OS 환경에 맞는 언어를 사용한다. ios는 Swift, Objective-c 코드를 플랫폼에 타게팅하는 컴파일러가 존재하고, android는 Java, Kotlin을 android 플랫폼에 타게팅하는 컴파일러가 존재한다.

하지만 React Native는 크로스 플랫폼 앱으로서, 하나의 프레임워크로 두 가지의 운영체재를 위한 앱을 제작할 수 있다.

❗️리액트 네이티브의 흐름:

  1. 이벤트를 기다린다. (ex. 버튼 클릭!)

  2. 이벤트 발생 시, iOS와 android는 해당 이벤트를 감지하고 이벤트의 데이터를 수집한다.
    - 화면의 어디에서 이벤트가 발생했는지,
    - 해당 이벤트가 버튼 클릭이라고 했을 때 눌러진 시간 등
    - 이벤트에 대한 정보가 이벤트 데이터이다.

  3. RN는 감지된 이벤트를 가지고 JSON 메세지를 생성해서 자바스크립트로 보낸다.

  4. 개발자가 작성한 자바스크립트 코드는 Bridge를 통해 JSON 메세지를 받아 해당 이벤트에 대한 동작을 실행한다.

  5. 코드가 실행되면 RN는 iOS, android 운영체제에 해당 동작에 대한 메세지를 보낸다.

  6. 운영체제가 동작에 대한 명령을 실행시킬 때 사용자의 UI가 변경된다.

❗️ 정리하자면,

  • 앱이 존재한다.
    - 앱 안에 React Native가 존재한다.
    - React Native 안에 "JavaScript Interpreter"가 존재하고,
    - 번역기 내부에 개발자가 작성한 HTML, CSS, JS 파일이 있다.
    - 앱 안에 Bridge가 존재하고, React Native는 Bridge와 소통한다.
    - Bridge 는 각각의 모바일 운영체재와 소통을 진행한다.

  • 사용자가 이벤트를 발생 시켰을 때,
    • event -> OS system -> RN (bridge) -> HTML, CSS, JS -> RN (bridge) -> OS system -> update
    • 위와 같은 과정이 발생한다.

위 시스템에서 HTML, CSS, JS를 제외한 모든 애들은 앱개발을 위한 인프라이며, android에서 인프라는 Java로 진행되고, iOS에선 Objective-c와 Swift로 만들어진다.


🖥️ React Native의 장단점

❗️장점

  • React Native를 이용하면 기존 Native 앱 개발에 있어서 android는 Kotlin, iOS는 Swift를 이용해서 따로 개발해야했던 반면에, 하나의 코드로 android와 iOS를 둘 다 개발할 수 있다.

  • HTML, CSS, JavaScript로 이루어진 웹뷰로 렌더링을 하는 것이 아니라 해당 플랫폼의 표준 렌더링 API를 사용한다. React Native는 작성된 마크업을 플랫폼에 따라 그에 상응하는 진짜 네이티브 엘리먼트로 전환한다.
    기존 html css js를 사용하는 모바일앱들은 웹뷰를 이용해서 렌더링하기 때문에 속도가 느리다.
    • 웹뷰 특징:
      - 웹뷰는 앱에서 웹브라우저를 이용해 화면을 보여주는 방식을 의미한다.
      - 웹뷰는 반응이 조금 느리기 때문에 UX를 해칠 수 있다 (깜박임 현상 등)
      - 웹뷰는 개발 속도가 빠르다. (결제의 경우 PG사에서 구현해놓은 결제 모듈과 API를 사용할 수 있다)
      - 웹뷰를 사용할 경우, 앱과 웹에서 같은 경혐을 할 수 있다. (반응형으로 대비가 가능하다)

  • 자바스크립트 사용자의 경우 러닝커브가 낮다. 기존 리액트와 흡사한 점도 많다.

❗️단점

  • 초기 개발 환경 구축과 실제 앱 개발 시 다소 시간이 소요된다
  • 운영체제에서 새로운 버전이 공개됐을 때 리액트 네이티브가 업데이트해줄때까지 기다려야한다.
  • 네이티브 브릿지를 사용하기 때문에 네이티브 개발 방식보단 성능이 떨어진다.
  • mac 환경일 경우에만 iOS/Android 둘 다 지원이 된다.

🖥️ Expo CLI란?

React Native 관련 환경 설정 검색 시, 굉장히 많이 검색되는 환경 설정 도구이다. Expo는 기본적 설정이 다 구성되어 있으며 native 파일을 숨겨놓고 자동으로 관리한다.

Xcode, JDK, cocopod 등등 React Native를 사용하기 위해 따로 설치해야하는 과정이 Expo엔 없기 때문에 개발 환경 구축이 쉬워 많이 사용되고있다.

공식적인 도구는 아니지만, 워낙 많이 사용되기 때문에 RN 공식 문서에도 따로 탭이 존재한다. (공식 문서 링크)

별도의 emulator까지 설치해야하는 React Native와 다르게 Expo 앱을 핸드폰에 설치해서 작성하는 코드를 핸드폰에서 직접 구동할 수 있다.

❗️Expo 동작 방식

  • Expo는 로컬에 두 개의 서버를 띄운다.
    • 모바일 클라이언트에 React Native가 번들링한 JavaScript 파일을 띄워주기 위한 서버와,
    • expo-cli와 모바일 클라이언트의 통신을 위한 서버가 있다.

  • Expo는 RN 앱을 받아와서 Expo Client 안에서 실행시킨다.

  • 개발자가 작성한 JS 코드는 Expo 모바일 클라이언트 안에서만 동작하기 때문에 Native 언어로 된 (Swift, Obj.-C 등) 라이브러리를 사용할 수 없다.

🖥️ Expo의 장단점

❗️장점

  • 개발 환경 구축이 용이하고, 실제 개발 과정 또한 쉽고 편리하다.
  • 에뮬레이터를 따로 설정할 필요 없이 개인의 핸드폰에서 구동할 수 있다.

❗️단점

  • OS layer와 직접 상호작용이 불가능하다. (Java, Kotlin, obj-C, Swift로 추가 작성이 불가능하다)

  • Expo에서 제공해주는 모듈만 사용할 수 있다.
    • Expo에서 지원하지 않는 기능을 사용하기 위해선 해당 부분을 "eject" 해야한다.
    • "eject"할 경우, 작성한 JS 앱을 Expo 모바일 클라이언트 밖으로 꺼낼 수 있다.
    • 다만 Expo 외부에서 실행 시키기 위해서 Xcode, Android Studio 등의 Native 인프라가 필요하다.

  • expo에게 종속적이기 때문에 자유도가 낮다.

결론적으로 Expo는 사실 작은 프로젝트에 어울릴 정도로 실무에서 활용하기엔 불편한 점이 많다.
특히 몇몇 기능을 제대로 구현할 수 없다는 게 가장 큰 단점이기 때문에, 나 또한 과제는 Expo로 했지만 미리 React Native의 개발 환경을 설정해보려고 한다.

개발 환경 설정이 악명이 높기 때문에... 첫 출근 시 헤매지 않으려면 (혹은 덜 헤매려면) 미리 매를 맞아봐야 할 것 같다.


2. React Native 개발 환경 설정하기

📦 필요한 Dependencies 다운 받기

React Native는 공식 문서 설명이 친절했기 때문에 공식문서를 보고 따라갔고, 그 외 유튜브 영상을 활용하기도 했다.
기본적으로 설치해야할 항목:

  1. Node
    • JavaScript 구동을 위한 Runtime 환경
  1. Watchman
    • 페이스북에서 개발한 파일 변경 추적을 위한 툴
  1. CocoaPod
    • npm과 같이 의존성 관리하는 패키지
  1. Ruby
    • CocoaPod가 Ruby로 제작되었기 때문에 해석하기 위해 Ruby가 필요하다.
    • Mac은 기본적으로 Ruby가 설치되어있다.
  1. FFI
    • Foreign Function Interface의 줄임말로, Ruby-FFI는 다른 언어의 동적 링크 네이티브 라이브러리를 읽어와서 루비 코드로 실행할 수 있게 해주는 라이브러리이다.
    • M1에서 발견되는 에러를 줄여준다고 한다.
  1. Xcode
    • macOS와 같은 iOS 소프트웨어 개발을 위한 IDE
    • RN를 이용해 iOS 앱을 개발하기 위해 필요한 도구이다.
    • 해당 도구를 활용해서 emulator를 구동할 수 있다.

몇몇 항목들을 쉽게 설치하기 위해서 Homebrew를 설치하고, brew 명령어를 사용했다.
Xcode의 경우엔 그냥 앱스토어에 들어가서 직접 설치했다.


📦 환경 설정 과정 짚어보기

  1. 먼저 Xcode를 열고, >setting로 이동해서 "Locations" 탭으로 이동한다. 이때 "Command Line Tools" 항목에 뭔가가 선택되어있는지 확인하고, 선택되어 있지 않으면 선택한다.

  1. Xcode의 "Platforms" 탭으로 이동해서 에뮬레이터를 다운받아준다.

  1. node와 watchman을 설치한다.
    brew install node
    brew install watchman

  1. Cocoapods를 설치한다.

    sudo gem install cocoapods

    제대로 설치 되었는지 버전을 확인한다.

    pod --version

  1. React Native CLI를 설치한다.
    npm install -g react-native-cli

  1. React Native 프로젝트를 생성한다.

    npx react-native init RNProject (프로젝트명 아무거나)

    프로젝트를 실행했을 때, 이런 이미지가 터미널에 생성되면 성공!


  1. VSC에서 프로젝트를 실행한다.

    npx react-native start

    일단 RN를 먼저 구동시킨 후, 터미널을 하나 더 열어서 iOS 시뮬레이터를 구동시킨다.

    npx react-native run-ios

    시뮬레이터가 잘 구동되면서 아래와 같은 모습으로 나타나면 드디어!!! 완성이다.


3. 발생했던 에러

🐛 원인 모르는 이상한 문제

이래저래 만져보면서 전부 다 설정했을 때, 생성된 프로젝트 파일을 여니까 node_modules와 package.json, yarn.lock 파일 3개만 달랑 들어있었다.

이상했지만 일단은 프로젝트를 실행했는데... 

TypeError: cli.init is not a function....

대충 이렇게 생긴 문제가 발생했었다.

사실 환경 설정하면서 삭제하고 다시 하고 이런식으로 삽질을 몇번 했었는데... 공식 문서를 보니까 만약 이전에 global react-native-cli를 설치했다면 삭제하고 다시 하는 것이 에러를 없애는 방법이라고 쓰여있었다.

그리고 구글링 해보니 나와 같은 문제를 겪은 분이 있었고, 똑같은 방법으로 삭제하고 다시 설치했다.


🐛 Xcode가 말을 안 들었던 문제

어찌저찌 해결해서 다시 파일을 생성하니 정말 감격스럽게도 모든 파일이 들어있었다. 정말 눈물이 날 것 같았다.

설레는 마음으로 npx react-native run-ios 를 새로운 터미널에 입력했는데...

또 검색을 했다. 적어도 이번엔 쉬운 문제였는데, FFI를 설치하지 않았었다. 🙂 설치한 후에 다시 구동하니 문제 없이 돌아갔다.

우여곡절 끝에 이제 리액트 네이티브 설정을 iOS 한정으로 끝을냈고, 뭔가 진이 빠져서 일단 지금 상황에서 공부를 한 다음에 나중에 Android 환경을 설정해야겠다. Android 설정은 나중에 밑에 추가할 예정이다.

다 하고 나니까 딱히 어려운 작업도 아니었고, 구글에 자료는 차고도 넘쳤지만, 왠지 모르게 이리저리 헤맸다.
처음하는거라 그랬는지 모르겠지만, 컴퓨터가 원하는대로 행동하지 않을땐 역시 사람이 잘못하는거다.

컴퓨터는 죄가 없다 😂

profile
김헤일리
공부하느라 녹는 중... 밖에 안 나가서 버섯 피는 중... 🍄

0개의 댓글