설치 및 기본환경 설정

React Native

이번 방학동안 React Native를 공부 할 예정입니다. 꾸준히 올릴 수 있도록 노력하겠습니다~

우선 React Native가 무엇인지 알아보고 진행하겠습니다.

React Native란?

간단히 말하면 안드로이드와 iOS에서 동작하는 네이티브 모바일앱을 만드는 자바스크립트 프레임워크입니다.

예전에는 안드로이드의 경우 Java나 Kotlin을, iOS의 경우 Swift를 써서 네이티브 앱을 만들었습니다.

하지만 언어의 장벽도 높고, 두 OS를 모두 지원하는 모바일 앱을 만들기 위해선 최소 2가지의 언어를 공부해야 한다는 단점이 존재했습니다.

이를 해결하기 위해 자바스크립트로 두 OS를 지원하는 프레임워크가 등장하게 된 것입니다.

이제 시작해 볼까요?

node.js 설치

npm이라는 패키지 매니저를 설치하기 위해 node.js를 다운 받겠습니다.

현재 버전에 맞게 다운받아 주세요.

버전 체크도 완료.

Create React Native App

CRNA는 React Native 프로젝트를 시작하기 쉽게 만들어주는 도구입니다. 이를 활요해서 프로젝트를 생성할 예정입니다.

#CRNA 설치
npm install -g create-react-native-app

#CRNA로 첫번째 프로젝트 생성하기
create-react-native-app first-project

blank를 선택해 주시고
이름은 first-project로 하겠습니다.

앱 실행하기

#내 프로젝트 안에 들어가기
cd first-projcet

#기본 모듈 설치
npm install

#내 첫번째 프로젝트 실행하기
npm start

프로젝트 생성이 완료되면 폴더로 들어가서 npm start를 입력하세요~

QR코드가 나타나면 성공입니다.
저 QR코드를 스캔하면 첫 앱이 실행됩니다.

참고로 컴퓨터와 노트북이 같은 와이파이를 잡고 있어야만 앱이 실행됩니다.

안드로이드

playstore에 접속해 expo앱을 다운받아 주세요.
그리고 Scan QR code버튼을 통해 스캔해봅시다.

아이폰

앱스토어에서 expo앱을 다운받아 주세요. QR코드 스캔.

완료되었습니다~~