※주의 : 이 포스트를 읽기 전 Node.js가 설치되어 있어야 한다!
Node.js의 설치 및 설명은 필자의 velog에 게시해두었으니 참고바란다.
React-native를 시작하기 위해서는 크게 두가지 방법이 존재한다.
1. React-Native-CLI
React-Native-CLI는 어떠한 툴을 사용하지 않고 오로지 React natvie만을 이용해서 개발하는 방식이다. 초기에 설정이 까다롭고, Android Studio, Xcode 등으로 각 플랫폼마다 설치하고 빌드해야 하는 단점이 있지만 발자 원하는 기능이나 라이브러리들을 자유롭게 제어 가능한 장점이 있다.
2. Expo-CLI
Expo-CLI는 초기에 설정이 간단하고 개발을 쉽게 할 수 있으며 특히 각 플랫폼 IDE를 설치하지 않고도 시뮬레이터를 사용할 수 있는 것이 큰 장점이지만 네이티브 파일을 제어할 수 없고 모든 라이브러리를 사용할 수도 없으며 Expo에서 제공하는 기능만 사용이 가능하다는 단점이 있다. 간단한 프로젝트를 개발한다면 Expo를 사용하는 것을 추천한다.
1. 시작하기
프로젝트를 생성하기 전 Expo로 앱을 빌드할 경우 Expo의 계정이 요구되는데
아래의 링크를 눌러 Expo 공식 홈페이지에서 회원가입을 해야한다.
https://expo.dev/
회원가입이 완료되면 홈페이지에서 Get Started를 눌러 아래의 같은 곳에 앱 이름을 적은 후 Create 버튼을 눌러 공식 홈페이지에서 프로젝트를 생성한다.
2. 생성하기
공식 홈페이지에서 프로젝트가 생성되면 프로젝트 파일을 생성할 수 있는 가이드가 제공된다.
작업공간 폴더를 생성한 후 Visual Studio Code의 명령 프롬프트 단축키 Ctrl + ` 를 누른
다음 명령어를 입력한다.
npm install -g eas-cli설치가 완료되면 다음 명령어로 프로젝트를 생성한다.
npx create-expo-app [프로젝트]프로젝트 생성이 완료되면 아래의 명령어로 프로젝트 id를 입력해 공식 홈페이지의 프로젝트와 동기화한다.
eas init --id [프로젝트 id]3. 개발하기
React와 마찬가지로 JSX 문법을 따르기 때문에 기존에 React를 알고 있다면 쉽게 개발이 가능할 것이다. 이 포스트에서는 간단하게 웹뷰 앱을 개발해 볼 것이다. 아래의 링크를 참조 하였다.
https://docs.expo.dev/versions/v47.0.0/sdk/webview/
먼저 명령 프롬프트에 다음의 명령어를 실행한다.
npx expo install react-native-webviewreact-native-webview를 포함시켜 간단하게 웹뷰를 구현할 수 있다.
import { WebView } from "react-native-webview";
export default function App() {
return <WebView source={{ uri: "https://www.naver.com" }} />;
}웹뷰에서 여러가지 권한이 필요하면 빌드하기 전 app.json에 permissions로 사용할 권한을 작성하면 된다. 요청할 수 있는 권한들은 다음의 링크를 참고하면 된다.
https://docs.expo.dev/versions/latest/config/app/#permissions
작성하는 방법은 expo : { } 안에 "permissions" : [ ] 로 작성한 다음 대괄호 안에서 사용할 권한을 배열 형태로 작성한다. 위치 권한을 가져오는 방법을 예로 들었다.
permissions에 권한을 추가하기 전 expo-location를 설치해야 앱에서 정상적으로 위치 권한을 부여받을 수 있다. expo-location을 설치하는 방법은 다음 명령어를 명령 프롬프트에 입력한다.
npx expo install expo-location설치가 완료되면 permissions를 추가해 위치 권한을 얻을 수 있다.
"permissions": ["ACCESS_COARSE_LOCATION", "ACCESS_FINE_LOCATION"]4. 빌드하기
빌드하기 전에 Expo에서 git명령어를 요구하기 때문에 git을 설치해야 한다.
다음 링크에서 사용중인 os를 선택하여 설치한다.
https://git-scm.com/downloads
앱으로 빌드하기 전에 app.json파일에서 Splash이미지 및 앱을 설치하였을 때 보여질 아이콘을 설정할 수 있다. app.json파일에 대한 설명은 다음과 같다.
{
"expo": {
"name": "웹뷰테스트", // 모바일에서 표시 될 이름
"slug": "webview-test", // Expo홈페이지의 생성된 프로젝트 slug과 같아야함.
"version": "1.0.0",
"orientation": "portrait", // 가로 세로 설정
"icon": "./assets/icon.png", // 앱의 아이콘
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png", // Splash 이미지
"resizeMode": "cover", // 기본은 contain, Splah이미지를 가득채우려면 cover로 설정
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png", // 모바일에서 표시되는 아이콘
"backgroundColor": "#FFFFFF"
},
"package": "com.hsg5533.optest"
},
"web": {
"favicon": "./assets/favicon.png"
},
"extra": {
"eas": {
"projectId": "12617bb4-01b9-44c2-88ff-ecbaca7a0212"
}
}
}
}
다음 명령어를 입력하여 빌드가 가능하다
eas build -p android --profile preview-p는 빌드할 플랫폼을 말하여 다음 중에 선택하면 된다.
- all: 안드로이드, ios 모두 빌드한다.
- android: 안드로이드 빌드
- ios: 아이폰 빌드
생성중에 어플리케이션 id를 입력해야 하는데 엔터키를 눌러서 기본값으로 하여도 상관없다. 그리고 안드로이드 KeyStore를 생성할 것 인가를 묻는데 엔터 혹은 y를 누르면 된다.
※ 참고 Error: Cannot copy to a subdirectory of itself 해결법
빌드 중에 해당 에러가 발생하면 C:\Users\[사용자명]에 존재하는 .git이라는 폴더를 복사하여 프로젝트 폴더의 package.json파일과 같은 수준의 경로에 붙여넣기 한다.
