capacitor 웹앱 크로스 플랫폼

모바일 어플리케이션. 3가지 종류

우리가 흔히 사용하는 앱에는 3가지 종류가 있다.

   1. 네이티브 앱

   2. 웹앱

   3. 하이브리드 앱

 

네이티브 앱 - 안드로이드 sdk를 이용하여 java, kotiln으로 만드는 앱과 ios 기반 sdk를 이용하여 swift로 만드는 앱 

                   ex ) 스마트폰에 설치되어 있는 기본적인 앱

웹앱 - 웹 기술을 활용하여 만들어진 앱

                   ex ) 네이버, 다음, 구글 사이트

하이브리드 앱 - 네이티브 앱에 webview를 이용하여 웹앱을 실행시키는 앱

                   ex ) 네이버, 다음, 구글 앱

 

 

Capacitor.  웹앱 크로스 플랫폼

오늘 알아볼 capacitor는 쉽게 웹앱을 하이브리드 앱으로 바꿔주는 플랫폼이다.

 

자신이 개발한 웹 페이지나 앱을 해당 플랫폼을 이용하면 android, ios에 관한 앱으로 빌드 및 실행이 가능하도록 도와준다.

 

1. 설치 방법

npm install @capacitor/core @capacitor/cli
npx cap init [name] [id] --web-dir=dist

 

터미널에 위 명령어를 입력하여 capacitor를 설치한다.

 

2. 빌드

npm run build

자신의 웹프로젝트를 빌드한다.

 

3. 네이티브 플랫폼 설치

npm i @capacitor/ios @capacitor/android
npx cap add android
npx cap add ios

원하는 대상의 네이티브 플랫폼을 설치한다.

 

4. 실행 및 sync

npx cap sync android
npx cap run android

 변경되거나 추가한 사항이 있을 시 sync 작업 후 run를 통해 모바일에서 실행을 확인한다.