React Native 시작

React Native?

React의 문법으로 안드로이드 iOS 앱을 개발할 수 있는 프레임워크이다. React를 배웠던 개발자라면 몇 시간 만에 익숙해질 수 있을 만큼 React와 거의 유사한 문법을 가지고 있으며, 실제로 차이나는 부분은 브라우저의 HTML Element를 사용하는 것이 아니라 View, Text 등의 자체 태그를 사용하는 점과 CSS를 사용하지 않고 오직 CreateStyleSheet를 이용한 스타일만 지원하고, 일부 속성이 가감되었다는 것 정도. 현재는 웹과 동일한 CSS 요소 사용을 위한 Styled Component 및 PostCSS를 지원하므로 웹개발자나 퍼블리셔도 무리 없이 UI구성이 가능하다.

라고 한다.. 나도 아직 사용해보지 않아서 모르겠다.

 

기술면접을 공부하다가 모바일로 무언가 기술면접 관련 앱을 만들어서 공부하면 더 좋을 것 같다 싶어서 React Native를 시작하게 됐다.

 

 

시작하기에 앞서 먼저 node의 버전을 확인해봐야 한다.

node -v

노매드코더에서는 버전이 14.17 이상이면 괜찮다고 했는데 나는 20~22? 에서 에러가 나서 임의로 16 버전으로 변경해 주었다. => 18이상 쓰라고 떠서 다시 변경

 

그다음 expo-cli를 install.

npm install --global expo-cli

 

expo cli?

React 애플리케이션을 위한 프레임워크이자 플랫폼이다. 동일한 JavaScript/TypeScript 코드베이스에서 iOS, Android 및 웹 앱을 개발, 빌드, 배포 및 빠르게 반복하는 데 도움이 되는 React Native 및 기본 플랫폼을 기반으로 구축된 도구 및 서비스 세트이다.

 

expo cli의 장단점?

 

장점: 초기 설정이 쉽고 빠르게 개발이 가능하고 다양한 라이브러리와 플러그인이 제공.

단점: 앱 사이즈가 크고 빌드 속도가 느리며 네이티브 모듈의 사용이 제한됨.

 

 

Mac 사용자는 Watchman을 추가로 받아야 한다고 함.

brew update
brew install watchman

install을 하면서 앱스토어에서 Expo앱(IOS는 Expo Go)을 다운로드하면 된다. (회원가입도 해야 함)

이 앱을 통해 실시간으로 개발 중인 서비스를 모바일로 확인할 수 있음.

 

 

프로젝트 생성

expo init app 이름
or
expo init .

실행하게 되면 여러 가지 옵션이 나오게 된다.

 

blank : 비어 있는 앱으로, 아무것도 포함되지 않은 기본적인 프로젝트

blank (TypeScript) : TypeScript 설정이 추가된 blank 템플릿

tabs (TypeScript): react-navigation 및 TypeScript를 사용하여 여러 예제 화면 및 탭이 있음

...

 

나는 blank (TypeScript)를 사용하기로 했다. 프로젝트가 생성됐으면

expo login

명령어를 통해 로그인을 해준다. 그리고 npm start로 앱을 실행시켜 보는데..

 

It looks like you're trying to use web support but don't have the required dependencies installed.

Please install react-native-web@~0.19.6, react-dom@18.2.0, @expo/metro-runtime@~3.1.3 by running:

npx expo install react-native-web react-dom @expo/metro-runtime

If you're not using web, please ensure you remove the "web" string from the platforms array in the project Expo   
config.

이런 문구가 출력됐다. 그래서 시키는 대로 install 해줬더니 잘 해결됐다. 다른 에러가 출력된다면 구글링을 해보도록 하자.

 

실행에 성공했다면 Expo / Expo go를 실행하고 로그인을 한 뒤에 터미널에 QR코드를 앱으로 찍어주면 된다.

 

아마 폰 화면에 Open up App.tsx to start working on your app!라고 나올 것이고 그러면 성공이다.

터미널에는 Android Bundled 혹은 IOS Bundling complete가 출력될 것임.. 아마도..

 

 

폰에 보이는 문구는 App.js 혹은 App.tsx 파일의 <Text> 태그에 적힌 내용이고 수정하면 폰에서도 바로바로 확인이 가능하다.