React.ts 프로젝트를 거의 마무리하며, 비로소 타입, 컴포넌트, 상태 관리 등 웹 개발에서의 가장 기본적인 개념을 알게 됐다.
다음 프로젝트는 또다른 프레임워크를 경험해보기 위해 React Native를 익히려 한다.
지금까지 사용해온 React.ts는 웹 애플리케이션을 만들 수 있지만, 모바일 애플리케이션을 직접 만들 수는 없다.
모바일 애플리케이션을 개발하기 위해서는 추가적인 프레임워크가 필요한데, React Native가 대표적인 예이다.
주요 특징은 아래와 같다.
- 브라우저가 아닌 네이티브 모바일 UI 컴포넌트 (Android, iOS)를 사용한다.
- 두가지 OS를 동시에 개발할 수 있다.
- React와 코드 작성 방식이 유사하다.
- 네이티브 모듈을 통한 성능 최적화가 가능하다.
그렇다면 회사에서 본 QA팀처럼 거의 모든 디바이스를 가지고 있어야 하나...? 나는 아이폰 한대 뿐인데...
이러한 문제점을 해결하기 위해 다양한 디바이스 환경을 쉽게 확인하도록 해주는 상위 프레임워크가 있다.
기본적으로 React Native CLI(Command Line Interface)와 Expo로 나뉜다.
React Native CLI
장점
- 네이티브 코드에 접근 및 커스터마이징이 가능하다.
- 더 많은 네이티브 기능(카메라, 지도 등) 및 모듈을 사용할 수 있다.
단점
- 초기 설정이 복잡하다.
- 별도의 Android와 iOS 빌드를 설정하고 배포해야 한다.
Expo
장점
- 초기 구성이 이미 구성되어 있어 가벼운 앱을 빠르게 만들기에 유용하다.
- 앱 푸쉬, 애플 로그인 등 기능이 탑재되어 있다.
- Expo Go를 통해 실제 디바이스 환경을 빠르게 확인할 수 있다.
단점
- 네이티브 코드를 수정할 수 없어 개발의 한계가 있다.
- Expo에서 지원하지 않는 라이브러리를 사용할 수 없다.
이제 프로젝트를 생성해보자.
npm install -g expo-cli
이번에도 타입스크립트 탬플릿을 사용하려 한다.
npx create-expo-app MyNewApp --template blank-typescript
생성된 프로젝트를 실행시키기 위해서는 아래 명령어를 입력한다.
npx expo start
로컬 서버를 실행시키니 EMFILE: too many open files 에러가 발생했다.
brew update
brew install watchman
위 방법으로 해결할 수 있다는 글이 많았으나, 나의 경우 해결되지 않았다.
프로젝트 폴더로 이동하여 node_modules 폴더를 삭제하고, 아래 명령어로 다시 설치했더니 정상적으로 실행할 수 있었다.
npm install