[React Native] Expo 프레임워크 사용하지 않고 React Native 프로젝트 생성하기

오늘은 React Native 본연의 프로젝트를 생성해보려고 합니다.

매번 Expo 프레임워크를 사용해서 프로젝트를 만들어서 빌드도 하고 관리했는데 리얼 React Native의 프로젝트를 생성해보고 싶었습니다.

React Native 문서에서도 '대부분 개발자들은 Expo 같은 React Native 기반의 프레임워크를 사용하는 경우가 많습니다'라는 문구가 있을 정도입니다. 심지어 Expo 팀은 React Native 팀과의 협력 관계입니다.

https://reactnative.dev/docs/environment-setup

Get Started with React Native · React Native

 

아무튼 그래도 많이 해봤던 Expo 프레임워크를 사용하지 않고 본연의 React Native 프로젝트를 생성해보겠습니다. React Native 본연의 의 프로젝트를 생성한 이유는 창업팀에서 기획 도중에 온디바이스로 모델을 추가하는 방식이 나왔어서 자료 조사를 하다가 Expo로는 파이썬 코드와 연동해야한다는 점에서 한계가 있었습니다. 그래서 React Native 프로젝트를 생성해보고자 했습니다. (결국 온디바이스로 하는 것은 날아갔네요,, 또 어떤 모델로 만들어지는 지 전달 받는 게 없어서 마음이 편하진 않네요)

 

아무튼! 

바로 시작하겠습니다.

아래의 링크에서 참고하였습니다.

https://reactnative.dev/docs/getting-started-without-a-framework?package-manager=npm

Get Started Without a Framework · React Native

1. react-native-cli와 @react-native-community/cli를 일단 기존에 있는 정보는 uninstall해줍니다. (react native를 설치하지 않은 노트북이면 상관없겠지만 혹시 모를 오류를 대비하여)

npm uninstall -g react-native-cli @react-native-community/cli

 

2. 프로젝트이름을 넣어서 reactnative 프로젝트를 초기화 해주면서 새로 생성해줍니다.

npx @react-native-community/cli@latest init 프로젝트이름

Do you want to install CocoPods now? 라는 문구가 나오는 데 

CocoPods는 code를 통해 맥에서 개발을 할 때 꼭 필요한, 혹은 필요성을 언젠가는 느끼게 될 라이브러리 관리 도구입니다.

위와 같이 프로젝트가 생성되었습니다. 만약 오류가 생겼다면 댓글 남겨주세요. 함께 풀어봐여

 

3. 프로젝트를 실행하기 전 metro를 실행시켜줍니다.

npm start

여기에서 metro는 간단하게 자바스크립트 코드를 빌드하는 관리 도구입니다. 자세한 내용은 다음에 포스팅하겠습니다(꼭꼭,,!)

https://reactnative.dev/docs/metro

Metro · React Native

 

 

4. metro 실행을 해주고 새로운 터미널을 생성합니다. 그리고 android를 실행해줍니다.

npm run android

이때 노트북이나 pc의 Java_Home 잘 설정해줘야합니다.

저는 맥북이라서 .zprofile을 사용하는데 JAVA_HOME이 잘못 되어 있어서 계속 에러가 났었습니다

안드로이드 스튜디오, xcode가 설치되어 있어야 합니다.

 

안드로이드로 시작

 

 

5. 다음으로 ios 실행해줍니다. 그전에 xcode 업데이트와 실행해보겠습니다.

상단 링크에는 안드로이드 실행하는 것 밖에 없어서 ios를 따로 찾았습니다. (마음대로 하면 꼭 에러가 생기더라구요)

https://reactnative.dev/docs/running-on-simulator-ios

 

xcode의 시뮬레이터를 실행해줍니다

xcode를 업데이트 해줘야 했습니다..

역시 너무 느리네요,, 또 어떤 에러가 있을지,,

 

약관 동의 해주고, 사용할 iphone만 선택 해줬습니다(캡처를 못했네요)

또 설치중,,

continue를 선택해서 프로젝트를 열어줍니다

 

프로젝트를 열지 않아도 시뮬레이터만 실행해도 됩니다

시뮬레이터를 실행해주고 

 

 

ios로 앱을 실행합니다.

npm run ios

에러 발생했네요

npx react-native doctor 로 에러난 부분은 확인해봅니다.

npx react-native doctor

결과

swift인 경우에도 이런 에러가 발생하는 건가봅니다. 저는 react native이기 때문에 다시 서치해볼게요

그치만 react native로 할때에도 pod관련해서는 install 해야 한다고 하더라구요. 그래서 저도 설치해봤습니다

cd ios
pod install

 

https://ohwhatisthis.tistory.com/14

[Xcode] Error: unable to open configuration settings file 에러

 

위와 같이 로그가 나왔네요, 하나한 확인해보면 좋을 것 같네요

 

그리고 다시 실행해줬습니다.

npm run ios

휴 성공했네요

 

metro에서도 실행했다고 됐네요

 

 

Expo를 사용하지 않고 생React Native 프로젝트를 생성하고 실행까지 완료했습니다.

이번에 배웠던 점은

npm start로 metro를 실행한 상태에서

각 시뮬레이터를 대기 시킨 후

npm run android

npm run ios

터미널에 입력하여 실행해주는 것입니다.

 

 

 

역시 프레임워크를 사용하지 않으니 react native 문서를 의존하여 진행했다는 점에서 다시 한번 문서의 중요성을 느끼게 되었습니다. 그리고 GPT로 '어차피 GPT도 인터넷 찾아서 알려주는 거니까 찾는 일을 대신해주겠지'라고 생각했습니다. 하지만 저번 eas 빌드도 그렇고 이번도 그렇고 꼭 문서를 바탕으로 stack overflow나 커뮤니티에 올라온 글이 최고였습니다. 개발자로서 문서를 자주 읽어야 한다는 점을 다시 한번 다짐하게 된 계기가 됐습니다. 

다음에도 또 해야지