cosmic developer

[React-Native] 윈도우 환경에서 expo-cli로 리액트 네이티브 시작하기, 환경 셋팅 본문

Front-End/React

[React-Native] 윈도우 환경에서 expo-cli로 리액트 네이티브 시작하기, 환경 셋팅

ti:bot 2020. 6. 29. 04:41

현생에 치여 너무 오랜만에 돌아온... 블로그다.

사실 공부를 하지 않은 것은 아닌데 블로그에 글을 작성하는 것이 생각보다 오래걸려서 엄두가 나지 않았다.

그리고 Github에 푹 빠져버렸기 때문임


어쨌든 핑계이고 오늘은 드디어 React-Native에 도전하는 역사적인 날이다. 자바스크립트도 제대로 공부하지 않고 (HTML/CSS도 딱히 체계적으로 하진 않았음) 바로 간단한 React.js 프로젝트에 도전했던 나는 생각보다 큰 재미를 느꼈고 react-native에도 패기있게 도전하기로 했다.


꼭 시험을 앞두면 이런 도전적인 것들이 몇 배로 더 재미있다.




먼저 나는 깃허브에 레포부터 파놨다. 꼭 레포부터파고 그걸 내 로컬 작업공간에 받아오는 습관이 생겼다.

어쨌든, 어떤 튜토리얼을 가지고 공부해볼까 하다가 요즘 니꼴라스에게 빠져서 노마트코더 날씨 앱 강의로 시작하기로 했다!


< 시작 전 준비 >

- OS: Windows 10

- node: v12.14.1

- npm: 6.13.4




1) expo-cli 설치


모든 환경설정이 완료된 후, expo를 설치하였다. (create-react-app과 같은 퀵 스타트 개념!)

npm install -g expo-cli

그런데 수많은 npm WARN들이 등장했고, 또 웃긴건 설치가 완료되었다고 했음에도 프로젝트 생성은 되지 않았다.



사실 정확한 이유는 잘 모르겠지만 참고한 블로그의 작성자에 따르면 설치되어 있는 node가 root 권한으로 설치되어 있기 때문이라는 말이 있다.


어쨌든 기존에 설치되어 있던 node를 삭제하고 nvm을 활용하여 다시 node를 설치하였다.



2) 다시 환경 구축

  1. nvm 설치 (nvm-setup.zip )
  2. nvm 버전 확인(nvm ls)하여 설치 되었으면, 원하는 버전의 node 설치
  3. node 및 npm 버전 확인(node -v, npm -v)
  4. expo 재설치

그런데 이 과정에서 경고가 모두 사라진 것은 아니었지만 설치는 정상적으로 되었다!

expo-cli 버전: 3.21.13



4) 프로젝트 생성


expo init 프로젝트명 (이 과정에서 오류 났던거 해결된 것임)

옵션은 blank로 설정했다. 미리 만들어둔 tab이 있는 것도 아니었고 typescript는 자신이 없었기 때문에,,


우여곡절 끝에 생성 완료




해당 폴더에 들어가서 확인해볼 수 있다.



생각보다 오래걸렸다,,, 오늘은 일단 여기까지만 하고 다음 과정은 시험 끝나고 하는걸로!