본문 바로가기

IT, 인터넷/리액트, 리액트네이티브, EXPO

리액트 네이티브 expo 설치 및 실행하기(앱 만들기)

반응형

리액트 네이티브와 expo의 차이점을 애기 하자면, 리액트 네이티브는 네이티브 코드도 사용을 하여서 광범위하게 

개발이 가능 합니다. 하지만 expo는 지원되는 api가 아니면 사용이 불가 합니다.

하지만 expo가 개발을 빨리, 그리고 쉽게 앱을 만들수 있다는 장점이 있습니다.

하지만 네이티브코드를 지원하지를 않기 때문에 지원되지 않는 api는 사용이 불가 합니다.

예를 들어서 카카오로그인을 들자면 expo document에 가보시면 아직 카카오는 지원을 하지 않습니다.

https://docs.expo.dev/versions/latest/

 

API Reference - Expo Documentation

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

docs.expo.dev

api reference에 가보시면 지원되지 않는걸 알수 있습니다.

그래서 카카오로그인 처럼 지원이 되지 않는 경우에는 우회를 해서 해결을 할수가 있습니다.

그 방법이 리액트 네이티브의 웹뷰를 사용을 하는 것 입니다.

웹뷰를 사용하면 카카오로그인의 rest api를 사용하여 개발이 가능 합니다.

이처럼 expo에는 아직 지원되지 않는 api가 있지만 시간이 지나면 점점 더 api는 많아 질거라 봅니다.

지금도 2년전과 비교를 하면 엄청 많은 api 생겨나서 예전 보다는 expo의 활용이 좋아 졌습니다.

저는 개인적으로 expo로 앱을 개발을 하는걸 추천을 합니다.

 

먼저 expo를 사용을 하려면 node js를 설치를 해야 합니다.

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

해당 사이트에서 14.17.6 lts 신뢰도가 높은 node js를 설치를 합니다.

설치를 하면 npm이 사용이 가능 한데 npm으로 expo를 설치를 해줍니다.

cmd 커멘드창을 열어서 expo를 npm으로 설치를 하여 줍니다.

cmd창에 npm install -g expo-cli 를 입력을 해서 설치를 하여 줍니다.

설치가 다 되었으면 이제 expo 프로젝트를 만들어야 합니다.

적당한 폴더를 만들어서 expo 프로젝트를 만들어 줍니다. 저는 d드라이브에 만들도록 하겠습니다.

d 드라이브에 test 라는 폴더를 만들어서 expo-project라는 expo 프로젝트를 만들겠습니다.

명령어는 expo init my-project 입니다.

여기서 blank를 선택후에 설치를 하여 줍니다.

그러면 expo-project가 만들어 집니다.

만들어진 expo-project 폴더로 이동을 해서 code . 을 입력을 하면 비주얼스튜디오 코드가 띄워 집니다.

비주얼 스튜디오 코드는 해당 홈페이지에서 다운로드 할수 있습니다.

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

비주얼 스튜디오 코드는 여기서 다운 받으시면 됩니다.

이제 visual studio code가 띄워지면 ctrl + ` 를 눌러서 터미널을 띄워서 npm start를 하면 expo 프로젝트가 실행이

되어 집니다.

그리고 간단하게 expo롤 날씨앱을 만들수 있는 expo document가 있습니다.

https://velog.io/@soonitoon/React-native%EC%99%80-Expo%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EB%A7%8C%EB%93%A0-%EB%82%A0%EC%94%A8%EC%95%B1

 

React-native와 Expo를 이용한 날씨앱 만들기

첫 React-native 앱을 만드는 법을 배우며 공부한 내용입니다.

velog.io

여기를 보고서 날씨앱을 만들수 있습니다.

expo가 처음인 분들은 익숙치 않을수 있지만, 아시는 분이라면 금방 할거라고 봅니다.

 

그리고 expo eject 라는 명령어가 있습니다. expo로 개발을 하였는데, 꼭 네이티브 코드를 써야 하는 상황이 온다면

expo의 eject 명령어로 expo workflow를 사용 할수 있습니다.

https://docs.expo.dev/introduction/managed-vs-bare/

 

Workflows - Expo Documentation

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

docs.expo.dev

관련 문서이고요.. 여기 보시면 expo로 관리되는 프로젝트를 expo eject 명령어로 bare workflow로 만들어서

네이티브 코드를 사용 할수 있다고 나옵니다.

반응형