'React Native'에 해당되는 글 1건

  1. 2020.03.31 5_Expo설치 및 실행환경 구축
React Native공부2020. 3. 31. 23:24

이제 React Native 개발을 위해 Expo를 설치해 봅시다.

사이트(https://expo.io/learn)에 방문하여,

STEP02 항목의 [Download Node.js]버튼을 눌러 

Node.js를 설치합니다(최신 버젼이던 범용버젼이던 관계없음).

 

Node.js는 JS기반의 프로그램을 개발할 수 있는 플랫폼인데, 상세한 사용법은 패스하고,

Expo 설치과정 설명 위주로 포스팅 하겠다.

Node.js는 JS기반으로 구성된 서버 사이트 서비스를 JS로 구현할 수 있게 만든 런타임이다.

정적 파일 서버, 웹 응용프로그램, 메시징 미들웨어, HTML5 멀티 플레이어 게임용 서버 등을 만들 수 있으며,

특히 실시간 웹 애플리케이션 개발하기 좋은 기술이다.

 

Expo는 Node에 패키지 형태로 구성되어 구동되는 시스템인거 같다.

Node 설치 중 뜨는 화면인데, 필요할지 몰라 설치하기로 했다.

 

설치는 굉장히 오래 걸립니다(전 20분 이상 걸린 것 같네요).

도중에 Enter도 눌러줘야 하고, 멈춘것 같지만, 그냥 오래 걸리는 화면에서 딴일 하다보니

어느새 설치화면 창이 사라져 있더군요.

 

Node가 다 설치되었으면 Expo를 설치해 봅시다.

사이트 안내에 따라 수행하면됩니다.

 

STEP03

CMD화면에 npm install expo-cli --global  를 입력해주면 Expo가 설치됩니다.

npm이라는 생소한 용어가 나오는데, Node Package Manager의 약어로, 

node.js기반으로 개발된 오픈 소스를 모듈화 하여 관리하는 모듈이다.

npm을 이용하여 웹 개발에 필요한 jQuery, gulp, webpack 등의 모듈을 npm명령어를 통해 쉽게 다운받아 쓸 수 있다.

npm에 대한 상세 설명은 여기로 > https://docs.npmjs.com/about-npm/

설치가 끝나면, 다음과 같이 표기되면서, 설치가 종료됩니다.

 

STEP 04

역시 CMD창에서 expo init my_project 를 입력하여 프로젝트를 생성해 줍니다.

그러면 아래와 같은 선택화면이 뜨는데, blank 선택 그대로 Enter를 누르면 됩니다.

잠시 시간이 소요된 후 프로젝트가 생성되었다고 뜹니다.

STEP 04의 나머지 문구를 입력하여 실행 가능하다는 안내도 해주는 군요.

cd my_project

npm start

를 입력하면, 개발환경 화면이 브라우져에 뜨게 됩니다.

개발환경에서 코딩 후, 여기서 "Run in web browser"를 누르면

웹 환경에서 실행 결과를 볼 수 있다(다음 포스팅에서 테스트).

 

단축키를 눌러 에뮬레이터 화면을 실행할 수 있고, 종료를 위해서는 Ctrl+C를 누르면 됩니다.

 

또한 코딩한 결과를 폰에서 보기 위해서는 OS에 맞게 expo 앱을 설치합니다.

아이폰 설치: https://itunes.apple.com/app/apple-store/id982107779 
안드로이드 설치: https://play.google.com/store/apps/details?id=host.exp.exponent

나중에 폰에서 결과를 보려면 QR코드를 스캔하면 폰에 다운로드 후 결과화면을 볼 수 있습니다.

 

설치 및 실행환경 구축편은 여기까지.

다음 글에서는 코딩환경 구축 및 실행을 해보도록 하겠습니다.

 

참고자료 

*전반 컨텐츠 : https://expo.io/
*Node, npm관련 설명 : https://kdydesign.github.io/2017/07/15/nodejs-npm-tutorial/

Posted by 이온의 일상