📱Application/React-Native

[React Native] React Native-Expo 개발환경 구축하기

dlalwl_jpg 2024. 5. 30. 19:37

아래 블로그를 참고하여 React Native-Expo를 이용해 개발 환경을 구축해볼 것이다.

https://jae-study.tistory.com/145

 

[React Native] Expo로 리액트 네이티브 설치하기

왕초보를 위한 React Native 101 https://nomadcoders.co/react-native-for-beginners 노마드코더 강의를 참고하고 있습니다. 리액트 네이티브란? 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일

jae-study.tistory.com


1. expo-app 설치하기

vs code에서 터미널을 열어 원하는 위치에 아래 명령어를 입력하여 프로젝트를 만들어준다.

npx create-expo-app 프로젝트명


2. expo-app 설치하기

프로젝트 폴더로 이동 후 아래 명령어를 입력하여 실행해준다.

npm expo start


3. 모바일 연동하기

나는 IOS를 이용하기 때문에 앱스토어에서 Expo Go앱을 설치해주었다.

안드로이드는 플레이스토어에서 Expo 앱을 설치해주면 된다고 한다.

앱 설치 회원가입, 로그인을 해준다. 그리고 노트북과 핸드폰이 같은 와이파이로 연결되어 있는지 확인한다.

그리고 npm expo start를 실행했을 때 나온 QR코드를 인식해주면 오른쪽과 같이 Expo Go에서 잘 열리는 것을 확인할 수 있다.


4. 브라우저 연동하기

브라우저를 이용해서 작업을 해야 한다면 아래 사이트로 이동해서 작업을 진행하면 된다.

https://snack.expo.dev/

 

Snack - React Native in the browser

Write code in Expo's online editor and instantly use it on your phone.

snack.expo.dev

그럼 핸드폰에서 보여지는 것과 동일하게 작업이 가능하다.