-
React-native expo 로 wonder weeks 앱 만들기 - 환경 세팅 하기React Native 2024. 12. 21. 21:25
솔로프리너? 들어본 적 있는가? Solo + Entrepreneur의 합성어로, 1인 창업가나 1인 기업가라고 칭해지는데. 나도 한번 해보고 싶어서 도전해 본다. React Native의 expo를 선택한 이유는. 현 FE개발자로 JS랑 React가 익숙했기에 React Native에 대한 진입장벽이 낮게 느껴졌고, 개발 한 번으로 IOS, Android 둘 다 배포할 수 있다니. 군침이 싹 돈다.
expo로 개발 한 이유는 별 생각 없었고, 공식 문서를 따라가다 보면 자연스럽게... expo로 개발을...
https://reactnative.dev/docs/environment-setup 예전에는 이렇게까지 밀어주는 느낌은 못받았는데.
공식 문서를 따라 환경 세팅을 해보자.
1. React-native expo 로 프로젝트 설치하고 실행하기
npx create-expo-app@latest
앱 이름을 입력하라고 한다. 만들 앱의 이름은 wonder_weeks를 입력하고 앤터를 치면 알아서 폴더를 만들고 실행이 끝나면. 어떻게 해야 할지 알려준다. 하라는 명령어 그대로 실행해 보자
cd wonder_weeks npm run android
필자의 경우 안드로이드 폰을 사용하고 있어서 android로 실행했다.
연결된 안드로이드 앱을 찾지 못해서 에러가 발생했다.
2. 앱 실행해보기
안드로이드 앱을 연결하기 위해서. 다시 공식문서로 가보자.
https://docs.expo.dev/get-started/set-up-your-environment/?mode=expo-go
본인 기기에 맞는 옵션을 선택하자. 옵션에 따른 설명이 하단에 나온다. Expo를 설치하라고 하니 설치하자.
Expo go 앱이 설치된다.
https://docs.expo.dev/get-started/start-developing/
실행 명령어가 바뀌었다.
npx expo start
실행해 보자.
QR 코드가 보인다. 한번 찍어보자.
앱이 실행된다.
정리
- React native에서 제공하는 공식문서를 따라 개발을 진행.
- npx create-expo-app@latest 를 사용해서 프로젝트를 생성
- npx expo start로 생성한 프로젝트를 실행
느낀 점
- React Native 개발 생각보다 해볼만 ? ㅋㅋ
728x90'React Native' 카테고리의 다른 글
React-native AsyncStorage로 로그인 정보 로컬에 저장하기 (0) 2024.12.25 React-native 모달 만들기 - 로그인 및 유저 정보 화면 (2) 2024.12.22 [리엑트 네이티브] React-Native-vector-icon (0) 2019.04.09 [리엑트 네이티브] Expo 기반 빌드 (0) 2019.02.07 [리엑트 네이티브] 레이아웃 (0) 2019.02.04