[ReactNative]Expo CLI를 이용한 ReactNative 프로젝트 생성하기

 

 

https://github.com/facebook/react-native/releases/tag/v0.1.0

위 사이트에서 확인을 해보면 2015년 3월 27일에 ReactNative를 최초로 공개하였다. (이하 RN으로 줄여표현)

4년이란 시간이 흘렀고, 이 글을 작성하는 시점의 RN 버젼은 0.59이다. 

아직 인큐베이터 프로젝트라고 봐야하는 것일까.

 

 

https://facebook.github.io/react-native/showcase

위 페이지에 접속하면 RN으로 만들어진 수 많은 앱중 대표적인 앱들을 보려주고 있다.

인큐베이터 프로젝트라고 하기에는 너무 많은 기업이 이미 RN을 사용하여 서비스를 하고 있다.

그렇기에 궁금했고, 해보고싶었다.

 

 

나는 App개발을 해본적이 없는 사람이다. 생활이 무료하고 지쳐서 신나는 일이 없을까 고민하던 중에 무작정 앱을 만들어보고 싶어졌고 무엇으로 시작해야 할까 검색을 하다가 Expo와 React Native를 채택하게 되었다. Expo를 이용한 ReactNative 프로젝트를 생성해보자.

 

NODE 버젼 확인

https://docs.expo.io/versions/latest/introduction/installation/

위 페이지는 접속하면  expo공식 사이트의 인스톨 가이드를 확인할 수 있다. 버젼 10이상의 node가 설치되어 있어야 한다고 명시되어있다.  npm(Node Package Manager)을 설치하고 시작하라는 말이다.

 

npm -v 

6.7.0

node -v 

v11.10.0

 

위 명령어로 npm과 node의 버젼을 확인해보자

나는 이미 npm설치가 되어 있었기 때문에 node도 당연히 설치가 되어있다. 버젼을 확인해보니 10버젼 이상이다.

 

 

 

EXPO CLI 설치

그럼 expo를 사용하기 위하여  expo-cli를 설치해보자. 가이드에 아래의 명령어로 설치하라고 적혀있다. 아는게 없기 때문에 시키는대로 해본다.

npm -v npm install -g expo-cli 

 

프로그레스가 보여지며 설치가 시작된다 실행한 명령은 -g 옵션을 사용 하였기 때문에 글로벌 패키지에 expo-cli를 추가하게 된다.expo가이드에 있는 그대로 하긴 했다만.. 음 npm 글로벌 위치가 어디지?

 

 

 

그런데 설치중간에 WARN이 보여지다가 결국  ERR! 익숙한 영어가 보인다. permissions denied 일반 사용자이기 때문에 글로벌 패키지에 작업할 수 있는 권한이 없다.반사적으로 sudo를 이용하여 설치해야지 라고 생각하고 찾아보았는데, sudo설치는 하지 않는게 npm의 권고이다.일단 npm의 글로벌 위치를 확인해보자. 뭐 보나마나 /usr/local/lib일 것이다.

 

 

 

 

npm -g root

명령어를 이용하면 /usr/local/lib/node_modules라고 알려준다. 아마 yum으로  npm설치시에 path에 기본으로 잡혀있는 /usr/local 위치를 글로벌로 사용하는 것으로 짐작하고 일단 넘어간다.. 

 

ls -al /usr/local/lib

글로벌 위치인 /usr/local/lib의 권한은 당연히 root에게 있다. 일반 사용자 권한으로 글로벌 패키지에 추가를 하려고 하니 문제가 발생한 것이다.

 

그런데 나는 root가 아니라 일반 사용자 계정으로 작업을 할것이고, 굳이 글로벌 모듈을 root권한이 있는 곳에 두고 번거롭게 권한을 바꿔가며 작업할 이유가 없다. 그러므로 npm의 글로벌 위치를 현재 계정의 홈으로 변경하도록 하겠다.

 

 

.m2 폴더와 비슷한 개념으로 home위치 .npm 폴더를 생성하고, 

npm confing set prefix ~/.npm 명령을 실행하여 npm 글로벌 위치를 변경한다. 다시 npm -g root 를 입력하면 

/home/zeroradish/.npm/lib/node_modules 로 변경되어 있는 것을 확인할 수 있다.

./npm/bin 위치도 글로벌이 되어야 하기 때문에 개인이 사용하고있는 shell에 path를 추가해주어야 한다. 

bash를 사용한다면~/.bashrc,   zshell을 사용한다면 ~/.zshrc 파일에 작업하면된다.

 

이제 새롭게 지정한 글로벌 위치에 node를 설치해야한다.

 

 

 

npm install -g node를 입력하여 설치를 완료한다. 이제 아까 실패하였던 expo-cli를 다시 설치해보자.

 

 

 

 

 

npm install  -g expo-cli 

이번에 정상적으로 설치가 완료되었다.

 

 

 

 

npm search expo-cli 를 입력하여 설치된 것을 다시 한번 확인한다. 

 

 

 

 

EXPO Project 생성

 

expo -h

 

help에서 확인해보면 아래와 같은, init이라는 옵션의 사용법과 설명이 나와있다.

 

init|i [options] [project-dir]

Initializes a directory with an example project. Run it without any options and you will be prompted for the name and type.

 

 

expo init 명령으로 프로젝트를 생성할 수가 있다. 파라미터로 project-dir에 입력한 명칭으로 프로젝트 폴더를 생성하게 되고 꼭 입력하지 않아도 프로젝트를 이름을 물어본다고 적혀있는거 같다. shortcut 형태로도 사용할수 있나보다. 

자신의 work폴더가 있다면 이동하여 프로젝트를 생성한다. 나는 dev/repo 아래 프로젝트를 관리하기 때문에 이동후에

expo int react-native-app 를 실행하여 react-native-app이라는 이름으로 프로젝트로 생성해보도록 하겠다.

 

 

처음 생성하는 프로젝트의 템플릿을 선택하는 단계이다. 키보드 위, 아래 방향키로 이동하여 선택후에 엔터를 치면된다.

나는 하얀 화면에 hello react! 라고 보여지는 예제 화면이 보여질 것을 예상하며 blank를 선택하였다.

 

 

 

 

App의 이름을 입력하는 단계이다. 나는 처음에 name의 파란부분을 마우스로 클릭하였다. 우리는 지금 shell 에서 작업하고 있다는 것을 까먹지 말자

그냥 바로 키보드로 입력하고 엔터치면 된다. 현재 입력한 name은 나중에 app.json 파일에서 쉽게 변경이 가능하니 너무 고민하여 작성할 필요는 없어 보인다.

 

 

 

 

 

입력을 완료하고 엔터키로 마무리한다. 그러면 바로 프로젝트 생성이 시작된다.

 

 

 

 

your poroject is ready at /home/zeroradish/dev/repo/react-native-app라는 문구가 보인다.

react-native-app이라는 이름으로 expo 프로젝가 생성된거 같다. 잘만들어졌는지 확인해보자.

 

 

 

code /home/zeroradish/dev/repo/rn/react-native-app

Visual Studio Code로 프로젝트 위치를 오픈한다.

 

 

 

프로젝트에 필요한 파일들이 구성되어 있는것을 확인할 수 있다.

이것으로 프로젝트 생성을 완료하였다.