현재까지 웹 프론트엔드를 공부하고 개발해오면서 여러가지 느낀점 중 하나가 바로
App개발까지 잘 할수있다면 앞으로 더 많은 기회와 성장을 할 수 있을거라고 생각했다.
이제는 웹뿐만아니라 앱도 함께 개발하는 하이브리드개발자가 되어야 한다는 생각을 가지고 있기 때문이다.
그렇게 앱개발 공부를 시작했고 앱뿐아니라 웹도 완벽하지 못하지만 열심히 해야한다는 다짐으로 더 노력하려고 한다.
왜? React Native인가
React Native뿐만 아니라 여러가지 언어, 프레임워크로 앱개발이 가능한데
React Native를 사용하는 이유는 다음과 같다.
- JavaScript와 React 기반의 낮은 진입장벽
기존의 웹 React, Next.js를 주로 개발했던 입장에서 앱생태계와 구조를 배워보기에는 적절하다 생각했다. - 하이브리드 앱 개발가능
앱도 Window, Monitor, Android, IOS 등 여러 종류가 있는데 안드로이드, IOS개발이 가능하기에 선택했다. - 많은 문서와 쉬운 웹뷰 구현가능
문서만 읽으며 따라해봤을때 특별한 기능구현은 없었지만 웹을 앱내에서 띄우는 웹뷰구현이 아주 쉬웠다.
오늘은 React Native를 사용해서 프로젝트 생성을 해보자.
프로젝트 생성방법은 대표적으로 두가지가 지배적이다.
1. React Native CLI
2. Expo CLI
각각 장단점이 존재하는데
Expo의 경우 작은 앱을 만들어보는데 간편하고 빠르게 사용가능하고 제공된 모듈만 사용이 가능한데,
React Native의 경우 필요한 모듈을 직접만들고 Expo보다는 조금 규모가 있는 앱을 만들때 적합하다.
시작부터 거창하게 프로젝트를 할것은 아니기에 간단한 Expo Cli를 통해서 프로젝트를 생성해 보겠다.
설치
expo를 설치해준다.
npm install -g expo-cli프로젝트를 생성해준다.
expo init sampleexpo를 사용해서 initialize하는데 여기서 sample은 프로젝트이름( 폴더명 )이다.
이후 blank옵션을 선택했다.
실행
프로젝트가 생성되었으니 늘 하던대로 다음과같이 실행해보자.
cd sample
npm startsample 루트로 진입해 npm start를 실행하니 다음과같은 터미널이 표시됐다.
QR코드가 생성됐고 press목록들과 설명이 보인다.
우선 Android환경의 실행을 해볼 목적이기 때문에 Android Studio를 설치했다.
Android Studio 설치는 구글검색해서 설치만하면 되기때문에 생략한다.
이제 More Actions -> Virtual Device Manager -> 좌측 상단 Create Device 로 진입한다.
카테고리 Phone에서 적절한 휴대폰을 고르거나 Resizeable을 선택하고 Next!
여기는 운영체제를 고르는 부분인데 보통 안드로이드13 티라미수같은 운영체제를 사용하기때문에 다운로드하고 적용했다.
이제 Next -> finish하면 끝.
그럼 다시 Device Manager화면으로 돌아오는데 방금 생성한 디바이스 우측에 재생버튼을 누르면 휴대폰 에뮬레이터가 실행된다.
결과
자 이제 프로젝트에서 press항목 중 open Android에 해당하는 a를 입력해보자.
그럼 자동으로 에뮬레이터에서 앱이 열린다.
썰렁하니 처음엔 실행이 잘 안된건가 싶지만 프로젝트 루트 내 App.js를 보면 텍스트 하나만 보이는게 맞다.
실행도 정상적으로 잘됐고 다음엔 웹뷰를 띄워보는 작업을 해보고 export까지 해볼 생각이다.