OverView

21년 부터 꾸준히 이어 온 스터디 모임에서 이번에는 ReactNative로 모바일 앱 개발을 도전하게 되었다. 기존에 Vue 3로 개발한 웹사이트를 모바일로 개발하는 작업을 진행하였다.

Why React Native?

Cross Flatform Mobile App

• Flutter VS React Native
  이번 스터디 주제를 정하기 전에 Cross Flatform Mobile App을 알아보는 시간을 가졌었다.
  연초이기도 하고, 설날도 있고 그 사이 내가 코로나에 확진이 되어서 격리 기간도 있고 해서 시간이 많았다.
  시간이 워낙 많았으니, 각자 Flutter, React Native 에 대해서 공부하고 간단한 App을 하나 만들어서 서로에게 발표 아닌 발표를 하기로 결정하였다.

• React Native!
  나는 Flutter를 공부하면서 todo list app을 만들었었는데, 전반적으로 불호가 더 강했었어서 React Native로 다음 스터디를 하자고 제안했다.
  그렇게 만장일치로 React Native App을 만들게 되었다.

Project Init

사실 스터디는 저번 주에 있었는데, 바로 어제 (3/12) SQLD 시험이 있어서 손을 못대다가 뒤늦게 project 구조를 짜게 되었다.
일주일 전 블루스크린이 떴던 탓에 급히 포맷을 진행했는데, 덕분에 node부터 새롭게 프로젝트 세팅을 진행하게 되었다.

프로젝트의 시작은 언제나 공식문서이니까... 공식문서를 봐준다.

[ React Native 공식 사이트 ]
https://reactnative.dev/docs/environment-setup

npm vs yarn

node를 설치한 후 npm 을 사용할지, yarn을 사용할지 고민하다가 yarn이 비교적 빠르기도 하고, 이전 프로젝트에서는 계속해서 npm을 사용했어서 이번에는 yarn을 사용했다.

# expo-cli 설치
yarn global add expo-cli

그런데...


yarn으로 cli를 설치했는데도 못 찾는다. command not found... 몇 번을 해도, 재부팅을해도!
대체 뭐가 문젠가 했더니, 환경변수가 문제라서 추가해주었다.
후후... 나도 맥북 쓰고 싶다😂

expo-cli command not found (혹은 react-native command not found)
windows에서 yarn 으로 설치 시 환경변수 추가

# yarn global bin의 위치 찾기
yarn global bin
# 아래는 결과
C:\Users\USERNAME\AppData\Local\Yarn\bin

위 결과를 복사 한 후 시스템 환경 변수 편집 에서 환경 변수를 추가 하면 해결!

path를 더블 클릭해서 진입

새로만들기 클릭 후 값 값 넣어주고 확인하면 끝..! 👍

expo-cli vs react-native-cli

react-native-cli는 이미 다른 사람이 어느 정도 작업을 했다고 해서, expo-cli로 작업을 진행 했다.
expo-cli는 에뮬레이터 없이 직접 모바일에서 확인이 가능하다는 점이 가장 끌렸다. 나는 아이폰 사용자인데 윈도우를 사용하는 사람이다..

내 핸드폰으로 직접 보고 싶었다...😂

단!! 노트북과 모바일이 같은 와이파이에 접속해 있어야 한다!

이후 yarn Start를 했줬다!
QR 스캔이 안 된다!
찾아보니 Expo 로그인을 해야 한단다...ㅋㅋㅋㅋㅋ

1. Expo Site(https://expo.dev)에 들어가 계정 생성
2. vscode 터미널에서 expo login
   
3. 모바일에서 Expo Go 어플 다운로드 후 login
4. vscode에서 yarn start

# expo cli login
expo login
#start
yarn start

이제 멀쩡하게 뜬다.