출처 : 노마드코더 - React Native로 날씨앱 만들기

Step 1) Expo Client App 다운로드

Step 2) Node, Npm 버전 확인하기

node는 버전 10 이상, npm은 버전 6 이상이 필요하다.

버전 확인

Step 3) 필요한 프로그램 다운로드

맥 유저는 시뮬레이터를 가진 Xcode가 필요하고 윈도우나 리눅스 유저라면 시뮬레이터를 가진 안드로이드 스튜디오가 필요하다.

Step 4) Expo CLI 설치

$ npm install -g expo-cli

• 여기서 Expo란?

Create-react-app으로 React Native를 크로스 플랫폼으로 개발하기 위한 빌드 도구이며 Xcode 혹은 Android Studio 없이도 기기에서 쉽고 빠르게 코드를 테스트 해볼 수 있게 해준다.

Expo는 모든 Native file에 접근할 수 없으며 자동으로 관리해준다. 만약 Native file을 많이 사용한다면 expo 대신, React Native CLI 방식을 사용한다.

Step 5) Expo Project 시작

$ expo init [프로젝트명]

• expo 프로젝트를 시작한 후 blank를 선택하고 app name을 입력한다.
• 본인은 프로젝트명을 ‘fokin-weather2’로 했다.

$ cd fokin-weather2
$ npm start

• 디렉토리를 변경하고 npm을 시작하면 크롬창이 뜬다.

Step 6) github repository에 프로젝트 폴더 생성

step 5와 같은 프로젝트 이름을 ‘Repository name’에 타이핑하고 ‘Description’에 적당한 설명을 타이핑 한 후 ‘Initialize this repository with a README’의 체크박스에 체크를 하고 ‘Create repository’를 클릭한다.

Step 7) 원격 저장소 연결

$ git remote add origin <원격 저장소 URL>

vscode를 실행하여 ‘fokin-weather2’프로젝트 폴더를 열고 터미널에 위와 같이 입력한다.

원격 저장소 URL은 위에서 생성한 repository의 주소이다.

Step 8)로컬 저장소에 있는 내용을 원격 저장소에 넣기

$ git pull origin master

• vscode 터미널에 위와 같이 입력하여 github에 푸시한다.

(중간에 fatal: not a git repository (or any of the parent directories): .git 라는 오류가 뜨지만 $git init을 해주면 해결된다.)

• 그러면 README.md파일이 프로젝터 폴더 안에 로드된다.

이번 포스팅은

[React Native로 날씨앱 만들기 (by 노마드코더) ]

이란 강좌를 수강하기에 앞서 처음에 expo를 인스톨하는것부터 에러가 나는 바람에 이를 해결하는 방법을 포스팅해보았다.

Step 1) Nodejs 설치하기

nodejs.org/ko/download/

사양에 맞게 다운로드를 한다.

• node를 설치하면 npm은 default 로 설치된다.

Step 2) version 확인하기

$ node -v
$ npm -v

• node는 12.13.0으로, npm은 6.12.0으로 설치되었음을 확인할 수 있다.

Step 3) expo cli 설치하기(에러 발생 단계)

$ npm install -g expo-cli

• 위와 같은 에러가 떴다.
• 액세스 하는것에 문제가 생긴 것 같아 구글링을 해보니 node를 root 권한으로 설치하고 실행했기 때문에 문제가 발생했음을 확인할 수 있었다. (참고 : https://stackoverflow.com/questions/16151018/npm-throws-error-without-sudo)

(Step 1 에서 다운을 받을 때 관리자암호를 입력하라는 창이 떴는데 그게 root 권한 permission을 요구한건가 싶다.)

Step 4) 기존에 설치된 node 삭제하기

$ sudo npm uninstall npm -g

• 기존에 설치된 node는 root 권한으로 설치된 것이므로 uninstall 해준다.

Step 5) NVM(Node Version Manager) 설치하기

• 참고 :https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

nvm은 root 권한 없이 node를 설치할 수 있게 해준다고 한다.

1. 설치하기

$ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

2. 확인하기

$ nvm ls

nvm ls를 터미널에 입력하면

-bash: nvm: command not found

위의 문장이 출력된다.

3. vi 에디터 열기

$ vi ~/.bash_profile

• 빈 에디터에 아래의 문장을 복사해서 붙여넣은 후 :wq 로 저장하고 에디터를 나온다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

4. 재시작하기

$ source ~/.bash_profile

5. 다시 확인하기

$ nvm ls-
> system
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

Step 6) node 재설치하기

1. 최신 버전 설치

$ nvm install 6.10.1

(2019년 10월 23일 기준으로 6.12.0이 최신버전이지만 참고한 링크에서 버전 6.10.1을 설치해서 필자도 6.10.1 버전을 설치해보았다.)

2. 확인하기

$ nvm ls
-> v6.10.1
system
default -> 6.10.1 (-> v6.10.1)
node -> stable (-> v6.10.1) (default)
stable -> 6.10 (-> v6.10.1) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.16.2 (-> N/A)
lts/dubnium -> v10.16.3 (-> N/A)
lts/erbium -> v12.13.0 (-> N/A)

$ node -v
v6.10.1

Step 6) expo 설치

$ npm install -g expo-cli

• Step 3 단계와는 달리 접근 오류가 뜨지 않고 성공적으로 설치되었다.