React를 어느정도 익히고 나니 앱 개발에 대해서도 욕심이 생겼다.
하지만 취업 준비도 해야하고, 아직 React에 대해서도 공부가 더 필요한 까닭에 swift를 공부할 시간이 없었고, 그에 따라 관심은 react-native로 향하게 되었다.
모임에서의 프로젝트 제안
타이밍 좋게도, 동네 지인들과 만든 모임에서 react-native로 앱 개발을 해보자고 제안을 받았고, 현재 앱 기획, 설계를 병행하며 RNa를 공부하고 있다.
이리저리 바쁘지만 학습한 내용을 기록하지 않으면 안될 것 같아 블로그에 작성해야겠다
개발환경
react-native는 하이브리드 앱 개발을 위한 일종의 프레임워크로 React 컴포넌트를 Native 컴포넌트로 매핑해주는 기능을 제공한다, 런타임 환경은 node 의 v8 엔진이다.
- JSX 코드 작성: 개발자는 React와 같은 방식으로 JSX를 사용하여 컴포넌트를 작성합니다.
- JavaScript 런타임 실행: 애플리케이션이 실행되면 JavaScript 런타임이 이 코드를 실행합니다.
- 브리지 통신: JavaScript 런타임은 네이티브 모듈과 통신하기 위해 브리지를 사용합니다.
- 네이티브 렌더링: 브리지 통해 전달된 명령에 따라 네이티브 컴포넌트가 렌더링되고, 사용자에게 표시됩니다.
개발 환경 구성하기
Expo : react-native 개발을 도와주는 툴킷이자 플랫폼으로, 개발, 빌드, 배포를 모두 쉽게 할 수 있게 해주는 여러 도구와 서비스를 제공한다.
개발 환경에서 직접 시뮬레이터(iOS - Xcode)와 에뮬레이터(Android - Android Studio)를 사용할 수 있으나 Expo를 사용해 개발하는것이 간편하기에 이것에 대해 먼저 공부하여 개발환경을 구성하였다.
-
expo-cli 설치하기
npm install -g expo-cli
Mac 유저의 경우 sudo 명령어를 가장 앞에 붙여준다 -
expo-cli로 프로젝트 생성하기
expo init 프로젝트명
expo를 사용해 이렇게 간단하게 RNa 개발 환경을 구성할 수 있다.
내 모바일에 expo 앱 다운로드 받기
expo로 구성한 개발 환경의 결과를 확인할 수 있는 expo 앱을 다운받으면 내 모바일 환경에서 앱을 통해 개발된 내용을 앱처럼 확인할 수 있다.
- iOS : expo go
- Android : expo
내 모바일에서 확인하기
개발중인 디렉토리에서 npm start 명령어를 입력하여 터미널에 나온 QR코드를 모바일로 인식시켜 개발 결과를 확인한다.
마치며
사실 완벽한 개발환경은 아니지만 RNa를 쉽게 개발할 수 있는 환경을 구성해보았다.
필수 컴포넌트와 스타일 구조도 정리해보도록 하겠다 게으르지 않다면
