[React Native Web] 에러 정리

react native web 5편을 작성하기전에 react native를 실행할때 겪은 에러에대해서 정리를 하도록 하겠습니다.

 

React Native는 크로스 플랫폼 개발 프레임워크이기 때문에 일반 네이티브 개발보다 에러가 날 상황이 많습니다. 

 

지금까지 겪은 에러의 이유는 대표적으로,

 

1. 맥 OS업데이트 

2. Xcode 업데이트

3. 다른 맥혹은 PC에서 git저장소를 받아 npm install > pod install을 마치고 실행할때

 

위의 3가지 이유인데, 위의 상황들에서도 에러가 나지않고 실행하는 팁 및 해결방법을 공유하겠습니다

 

- Xcode를 Appstore가 아닌 애플 소프트웨어 다운로드 페이지에서 받기

개인프로젝트를 할때라면 Xcode버전변경에따라 에러도 해결해보고 하겠지만, 실무에서 React native로 앱을 개발하는데

 

앱스토어에서 업데이트 했다고 에러가 난다? 기분좋게 회사에서 새컴퓨터를 받아서 최신 Xcode를 설치하고 git으로 옮겨 받아서

 

실행했는데 에러가난다? 프로젝트 일정에 큰 차질이 생길 수 있습니다. 실무에서는 이런 상황을 최대한 피해야하기때문에 

 

처음 React native를 설치할때의 Xcode버전을 따로 기록해두는 편이 좋습니다. 

 

그리고 해당버전은 애플 개발자 다운로드 페이지

 

물론 첫 설정때의 Xcode를 계속 유지하는것은 아니고 React native도 버전업을 하기 때문에, 프로젝트의 필요한 기능이

 

새로운 버전에 존재한다면 버전업을 해야하고 그때는Xcode의 버전업을 고려해봐야 합니다.

 

- ios flipper 에러 

 

ios의 경우 ios폴더에서 pod install만 하면 큰 문제없이 실행되는데, 최근에 pod install 후 react-native run-ios를

 

실항하면 flipper에러가 나는 경우가 있습니다. 이럴땐 ios > Podfile에서

use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end

이 부분을 삭제하신 후 ios폴더에 Pods를 삭제하고, pod install로 재설치 하고 실행해야합니다.

 

- 안드로이드 sdk에러 

 

안드로이드의 경우 ios처럼 굳이 pod install과 같은 것 없이 안드로이드 스튜디오, jdk설치, 환경변수설정(.bash_profile)만

 

해주면 정상 동작해야하는데, 다른 맥에서 저장소를 받아서 실행하면 이 환경변수에서 설정한 값을 제대로 찾지 못하는 경우가 있습니다.

 

그럴땐 .bash_profile에서 잘 인식되게 고치는게 최선이지만. 안될경우 android폴더에서 local.properties파일을 생성 후 

 

sdk.dir=/Users/{유저이름}/Library/Android/sdk

유저이름을 입력하고 저장해줍니다. (통상적으로 mac의 경로이므로 window나 임의의 장소에 설치하였다면 그에 맞게고쳐줍니다.)

 

그뒤 react-native run-android

 

- @babel/preset-env 문제

 

react native web을 위해서 babelrc나 babel.config.js에서 사용된 @babel/preset-env 떄문에 ios와 android에서 

 

cant not find variable:require라고 뜨면서 실행되지 않는 문제가 발생되었다. @babel/preset-env를 삭제하면

 

간단하게 해결되지만, 분명 이전에는 아무 영향을 주지않았는데 이유를 알 수가 없습니다..