**스마트 디바이스 애플리케이션 제작 방법
1.Native App을 SDK를 이용해서 직접 개발
=>Android: Android Studio 를 설치해서 Java 나 Kotlin 언어를 이용해서 Application 개발
C++ 는 사용이 가능(NDK 설치)
Google 은 더 이상 Java 의 형태로 API를 제공하지 않겠다고 선언
Kotlin 은 JVM 기반의 언어입니다.
Kotlin 코드는 Java 의 Class 로 번역이 되서 실행됩니다.
Kotlin 이 가독성이 뛰어나고 함수형 프로그래밍 문법을 지원하기 때문에 최근의 기업들은 Kotlin으로 만드는 것을 권장
=>iOS(이제는 Mac 용 도 동일한 방법으로 생성) - Xcode를 설치해서 Objective-C(C++ 문법을 지원) 나 Swift 언어를 이용해서 Application 개발
=>장점
최신의 API(모든 센서 포함)를 전부 사용하는 것이 가능
빌드 속도가 빠름
=>단점
동일한 Application 을 서로 다른 운영체제에서 개발을 할 때 Learning Curve 가 길 가능성이 높습니다.(최근에는 Kotlin 이나 Swift를 사용하는데 2개 언어의 문법은 Python 과 거의 유사)
모바일 웹 앱을 만드는 것 보다 업데이트 속도가 느릴 수 있음 - 업데이트를 할 때 소스 코드를 수정하거나 Resource를 수정하게 되면 앱을 다시 빌드해서 마켓에서 승인을 받아야 하기 때문입니다.
2.모바일 웹 애플리케이션을 개발
=>모바일 웹 애플리케이션을 만들고 스마트 디바이스의 브라우저에서 접속을 하거나 스마트 디바이스의 WebView를 이용해서 접속해서 웹 애플리케이션을 사용하는 방식
=>여기서 등장한 개념 중의 하나가 Progressive Web(UI를 사용자가 사용하기 쉽도록 많이 사용하는 디바이스 기준에 맞추는 것 - 스마트 폰) 의 개념
=>장점
대부분의 개발자가 알고 있는 웹 애플리케이션 개발을 수행하는 거라서 Learning Curve 가 짧다.
업데이트를 했을 때 반영이 빠름
=>단점
스마트 폰 API(센서의 경우는 회전 과 터치 정도만 사용 가능, Web Socket 도 사용 불가능)의 대부분을 사용하기가 어렵습니다.
현재는 Apple 과 Google 모두 WebView 로만 구성된 애플리케이션은 마켓에서 reject 됩니다.
3.스마트 디바이스 회사가 아닌 곳에서 제공하는 프레임워크 이용
=>react-native, ionic: 웹 기술을 이용해서 애플리케이션을 제작하는 방식으로 프레임워크가 Native App 의 코드로 변경을 하는 방식
=>cordova: 웹 기술을 이용해서 애플리케이션을 제작하는 방식인데 프레임워크가 WebView를 만들어서 그 위에 HTML 페이지를 출력하는 방식
=>xamarin, flutter: xamarin의 경우는 MS에서 제작한 프레임워크로 C#을 이용해서 애플리케이션을 제작하고 flutter는 google이 제작한 프레임워크로 Dart 언어를 이용해서 애플리케이션을 제작
=>unity 3D, unreal: 3차원 게임 엔진을 가진 프레임워크, Unity는 C#을 기반으로 하고 unreal은 C++를 기반으로 합니다. 게임이나 아바타 등을 이용하는 애플리케이션 제작에 많이 이용
=>장점
iOS 와 Android 앱을 동시에 개발하는 것이 가능
스마트 디바이스의 API도 어느 정도 사용이 가능
=>단점
프레임워크 자체의 업데이트 주기가 짧음
최신의 API를 사용하지 못하는 경우도 있음
스마트 디바이스 제조회사에서 reject을 시키는 경우가 있음
모든 API를 사용할 수 없기 때문에 Native Application 의 API 사용법을 어느 정도는 숙지를 해야 합니다.
**Android Studio를 이용한 애플리케이션 개발
=>react-native 나 ionic 같은 별도의 프레임워크를 이용해서 개발을 하더라도 제품을 출시할 때는 Android Studio 나 Xcode에서 빌드를 해야하고 시뮬레이터에서 실행을 하고자 할 때도 Android Studio 나 Xcode 가 설치가 되어 있어야 합니다.
1.Android 개발 환경 설정
1)JDK 설치
=>11 버전 이상 권장
=>확인 - 터미널에서 수행
JRE(자바 실행 환경 - 자바로 만들어진 애플리케이션을 실행할 때 필수, JavaVirtualMachine 이라고 하는 사람도 있음) 버전 확인: java -version
JDK(자바 개발 도구 - 자바로 애플리케이션을 개발할 때 필수, JAVA Application Programming Interface 또는 JAVA SoftwareDevelopmentKit 라고 하기도 합니다.) 버전 확인: javac -version
=>javac -version은 JDK 가 설치되어 있어도 명령이 제대로 실행이 안될 수 있음 - 환경 변수 설정을 하지 않아서 임
Mac 은 할 필요가 없고 Windows에서만 수행하면 됩니다.
JAVA_HOME: jdk 경로 등록
path: jdk 경로의 bin 디렉토리를 등록하는데 %JAVA_HOME%\bin 으로 설정하면 됩니다.
2)Android Studio 설치
=>developers.android.com에서 자신의 운영체제에 맞는 버전을 다운로드 받아서 설치
=>설치 후 Application 을 하나 생성한 후 [Tools] - [SDK Manager]를 실행해서 필요한 운영체제 버전의 개발 도구를 설치
react-native 예전 버전은 29 버전을 사용했고 오늘 제가 확인한 버전은 31 버전을 사용
31 버전 과 29 버전을 설치
설치 시간이 조금 걸립니다.
=>환경 변수 설정: react-native를 사용하지 않는 경우는 할 필요 없음
windows: ANDROID_HOME - %LOCALAPPDATA%\Android\Sdk 를 등록
Mac - vim ~/.zshrc 를 터미널에서 실행해서 추가 - i를 눌러서 편집 모드로 변경한 후 작성
export ANDROID_HOME=$HOME/Library/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
내용을 추가하고 esc를 눌러서 명령 모드로 나와서 :w! 를 눌러서 저장하고 빠져 나옴
source ~/.zshrc 를 실행해서 적용을 합니다.
=>Emulator 생성 - [Tools] - [Device Manager] 메뉴에서 생성
현재 Android Studio 는 Emulator 가 독자적으로 실행되지 않고 Android Studio 안에서 실행되므로 [File] - [Settings] 메뉴에서 외부에서 실행되도록 설정
Mac 의 경우는 안드로이드 스튜디오 첫번째 메뉴에서 Preferences 메뉴를 실행해야 합니다.
react-native에서 Android Application을 실행할 때는 Android는 에뮬레이터가 실행 중이어야 합니다.
에뮬레이터가 생성되지 않는 경우는 작업관리자에서 [성능] - [CPU]에서 가상화가 사용 안함으로 되어 있는지 확인하고 사용 안함으로 되어 있으므로 CMOS(BIOS)에서 가상화 사용 설정을 해야 합니다.
CMOS 설정은 컴퓨터를 부팅할 때 기종에 따라서 다른데 F2 나 Delete, F12 등을 눌러서 들어가야 합니다.
2.Android Application 구조
1)Gradle Scripts - 앱의 라이브러리 의존성 과 SDK 버전 설정
=>Project(1개 이상의 Application으로 구성된 디렉토리의 개념) 수준의 build.gradle
=>Module(Application) 수준의 build.gradle
=>이 디렉토리의 내용은 실행 중에는 변경이 안됩니다.
2)manifest/AndroidManifest.xml
=>권한 설정 과 컴포넌트 등록을 하고 스타일을 설정하는 파일
=>이 디렉토리의 내용은 실행 중에는 변경이 안됩니다.
3)java 디렉토리
=>source 파일이 존재하는 디렉토리
=>이 디렉토리의 내용은 실행 중에는 변경이 안됩니다.
4)res 디렉토리
=>source 파일을 제외한 파일이 존재해야 하는 디렉토리
=>이 디렉토리의 내용은 실행 중에는 변경이 안됩니다.
=>다시 디렉토리가 구분되어 있는데 각 디렉토리 이름 과 용도는 결정되어 있습니다.
=>이 디렉토리의 내용은 정수로 등록을 하게 되는데 이 때 파일의 이름이 final 상수의 이름이 되기 때문에 대문자 나 특수문자 또는 한글을 사용할 수 없습니다.
3.작업 방법
=>화면 디자인은 res/layout 디렉토리의 xml 파일을 이용해서 정적으로 생성하고 java 코드에서 동적으로 생성하는 것이 가능
layout 파일에 만든 view를 java 코드에서 사용하기 위해서는 반드시 id가 있어야 합니다.
이 id를 이용해서 java 코드에서 사용을 합니다.
=>동적인 코드 작성은 java 디렉토리에서 합니다.
언어는 java 와 kotlin 모두 가능한데 애플리케이션을 생성할 때 언어를 설정합니다.
코드를 복사 붙여넣기 하면 변환해 줄 것인지 묻는 메뉴가 보입니다.
String str = new String("Hello Kotlin");
4.Version Control - 소스 코드 버전 관리
=>환경 설정 메뉴에서 Version Control에서 계정을 등록하면 쉽게 가능
주의할 점은 계정을 등록할 때 비밀번호는 Git Hub의 비밀번호가 아니고 Token 번호 입니다.
5.Application 을 생성하고 실행
1)Application 생성
=>첫 화면에서 New Project를 실행하던가 [File] - [New Project]를 선택
=>첫번째 화면을 설정 - Empty Activity 선택
=>애플리케이션 이름 과 옵션을 설정
2)res/layout 디렉토리의 activity_main.xml 파일을 열어서 수정 - 코드 창이 안 보이면 code 버튼을 눌러야 함
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:id="@+id/txtView"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="버튼"
android:id="@+id/btn"/>
</LinearLayout>
3)java 디렉토리의 MainActivity.kt 파일을 열어서 코드를 작성
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//뷰를 찾아오기
val txtView : TextView = findViewById(R.id.txtView)
val btn : Button = findViewById(R.id.btn)
btn.setOnClickListener(View.OnClickListener {
txtView.setText("버튼을 눌렀습니다.")
})
}
}
4)실행 한 후 버튼을 눌러서 텍스트가 변경되는지 확인
6.react_native
=>JavaScript 와 React 라이브러리를 이용해서 스마트 디바이스의 Native Application을 개발할 수 있게 해주는 프레임워크
=>하나의 코드로 Android 와 iOS 애플리케이션을 개발할 수 있습니다.
=>Javascript 버전은 ECMAScript 2015(ES6)를 사용
=>node.js 기반으로 npm 사용
=>장점은 빠른 개발 속도
=>단점으로는 Xcode 나 Android Studio 에 대한 지식이 있어야 하고 Native 언어에 대한 지식도 있어야 함
=>자바스크립트 코드가 Native 언어로 번역이 된다고 생각하는 경우가 많은데 실제로는 JavaScriptCore 라는 자바스크립트 엔진이 앱에 포함되어 자바스크립트로 작성한 코드를 앱 내에서 실행해 주는 형태로 동작합니다.
7.개발 환경
1)node.js 설치
=>설치 확인: node --version
=>Mac: brew install node
=>Windows: https://nodejs.org/ko
2)react native cli 설치 - mac의 경우는 앞에 sudo 를 붙여야 합니다.
npm i -g react-native-cli
3)실행의 편리성을 위해서 yarn 설치 - mac 의 경우는 앞에 sudo를 붙여야 합니다.
npm install --global yarn
4)IDE(VSCode) 설치
5)Android Studio 설치
=>java 도 설치되어야 하고 환경 변수도 설정해야 함
6)Xcode 설치
=>Mac에서는 Xcode 이 외에 cocoa pods(Xcode의 의존성 관리자) 도 설치되어야 함
=>Xcode는 App Store에서 다운로드 받아서 설치
=>cocoa pods은 sudo gem install cocoapods
8.프로젝트 생성 및 실행
1)프로젝트 생성
터미널에서 npx react-native init 프로젝트이름
2)실행
=>생성된 프로젝트의 package.json 파일의 scripts 코드를 확인
VS Code에서 생성된 프로젝트를 열기
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
}
=>Windows 에서 VSCode의 터미널에서 react-native 나 yarn 명령이 실행되지 않는 경우
터미널이 power shell로 설정되어 있어서 명령어가 수행이 안됩니다.
[도움말] - [모든 명령 표시](control + shift + P)를 실행하고 검색 창에 teminal: select default profile을 선택한 후 [command prompt]로 변경 한 후 터미널을 종료하고 재실행
=>Metro 빌드: 리액트 네이티브를 위한 자바스크립트 번들러로 프로젝트에 사용된 자바스크립트 파일을 모두 읽어서 올바른 순서로 하나의 파일로 합쳐주고 네이티브 앱에서 실행할 준비를 해주는 것
react-navtive start 인데 yarn 이 설치된 경우는 yarn start 라고 해도 됩니다.
=>안드로이드 빌드 및 실행: 에뮬레이터를 먼저 실행
react-native run-android 로 실행해도 되고 yarn android 라고 실행해도 됩니다.
=>에러 발생하는 경우
에뮬레이터를 실행시켜 두었는지 확인
자바 와 안드로이드 환경 변수 제대로 설정했는지 확인
JAVA_HOME: C:\Program Files\Java\jdk-11.0.14
path: %JAVA_HOME%\bin
ANDROID_HOME: %LOCALAPPDATA%\Android\Sdk
=>iOS 빌드 및 실행: 시뮬레이터를 먼저 실행하지 않아도 됩니다.
ract-native run-ios 또는 yarn ios 라고 실행해도 됩니다.
3)프로젝트 구조
=>package.json: node 프로젝트의 설정 파일로 의존성이 여기 설정되어 있습니다.
=>node_modules 디렉토리: 의존성 관련 라이브러리의 실제 위치
이 디렉토리의 내용은 없어도 됩니다.
이 디렉토리의 내용이 사라졌을 때는 npm install 해주면 됩니다.
=>index.js: Entry Point
이 파일의 내용은 일반적으로 수정하지 않음
App.js에서 export 한 내용을 가져와서 출력
=>App.js: 시작 화면의 Component
=>android 디렉토리: Android Application Project 가 생성되어 있음
=>ios 디렉토리: iOS Application Project 가 생성되어 잇음
9.이미지를 출력하는 애플리케이션으로 변환 - VSCode에서 작업
1)그림 파일을 프로젝트에 복사 - myhero.jpeg
2)App.js 파일을 수정
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import type {Node} from 'react';
import {
Image,
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const Section = ({children, title}): Node => {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
};
const App: () => Node = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<View>
<Text style={{fontStyle:"italic"}}>React-Native로 만든 앱</Text>
</View>
<View>
<Image style={{width:100, height:100}}
source={require('./myhero.jpeg')} />
</View>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});
export default App;
3)emulator를 확인 - 즉시 반영됩니다.
=>즉시 반영이 안되면 터미널에서 실행 중인 프로세스를 중지 - Control + C
yarn android 를 다시 수행
4)포트가 사용 중인 경우
netstat -ano 로 포트에서 실행 중인 pid 확인
taskkill /pid pid번호 를 입력해서 프로세스를 중지 시키면 됩니다.
React Native