sveltekit 으로 하이브리드앱 만들기

하이브리드앱을 좀 아시는 분들은 cordova 나 ionic등등을 들어봤을 것이다.
ionic은 cordova기반을 유료버전으로 만든 사업자정도로 이해하고 있는데,
react-native 나 fullter 가 생겨나서면서 견제차원에서 인지
capacitor 이라는 cordova+ionic+capacitor를 모두 사용가능한 하이브리드앱 개발환경을 free 로 제공하게 되었다.
자세히 보면 자동 배포환경 정도에서 돈을 받겠다는 정도로 눈치를 챌수 있는데, 아무튼 이 자동배포도 찾아보면 누군가 만들어 놓았다.

초창기에는 angular 기반이라 사용하기 난해했다.
그리고 react, vue가 나오면서 좀더 쉬워졌다고 생각했는데,
이게 svelte 가 나오면서 완전히 쉬워졌다.

뭐 이제는 하이브리드앱 누가 못만들까 싶을 정도로 아주 쉬워졌다.
예전 최초 spa라고 생각하는 jquerymobile에 cordova 연동해서 사용했던것 처럼 아주 쉽다.

쉽다는 것은 svelte가 쉽다는 것에 기인한다.
svelte로 만들고 capacitor 연동해주면 끝난다.

SVELTEKIT+ CAPACITOR 설치

그리고 안드로이드 스튜디오 빌드 앱실행

SVELTEKIT 설치

스벨트KIT 설치(스벨트와 스벨트킷은 다릅니다. 아래 내용은 스벨트킷에서만 작동합니다.)

	npm init svelte@next [프로젝트명]

프로젝트 폴더로 이동

	cd [프로젝트명]

의존성 패키지 다운로드

	npm i

정상작동 확인

	npm run dev 

스벨트 빌드 아답터 설치

*스벨트는 빌드 방식이 다양하다. 자동으로 빌드 결과를 서버로 업로드하는등, CDN 서비스와 연동하는 등 편의 기능을 제공하는데, sveltekit 부터는 기본 아답터 그리고 sveltekit docment 페이지에 안내하는 아답터로는 자체 운영서버로 빌드하는 아덥터 내용이 없다. 그래서 해깔릴 수 있다. (아무래도 상용 CDN 서비스 업체에서 후원을 받고 있는듯하다 뒷광고인 듯)

그리고 검색하면 나오는 sveltejs/adapter-static 를 GITHUB 에서 들어가 안내하는데로 다운로드하면 잘 안된다.

npm i @sveltejs/adapter-static@1.0.0-next.26

npm i @sveltejs/adapter-static

*npm i -D @sveltejs/adapter-static@next 하라고 read.me 파일에 안내하는데 @next 로 하면 에러가 나와서 구체적으로 버전 번호를 적어주는 방식으로 해야한다.
이제는 그냥 npm i @sveltejs/adapter-static 해도됨

svelte.config.js 파일을 열어서

 import adapter from '@sveltejs/adapter-static';

내용을 제일 윗 줄에 넣어준다. 기존 어덥터는 주석처리하면 빌드시 두가지 방식으로 빌드되지 않을 것이다.

그리고 아래 KIT 안에 adapter:adapter() 를 넣고 그안에 옵션 설정을해준다.

export default {

	kit: {

		adapter: adapter({


// default options are shown
pages: 'build',
assets: 'build',
fallback: null,
precompress: false

}),

prerender:{

//앱으로빌드할 경우 true로 설정합니다. 

default:true 

}

}

CAPACITOR 설치

CAPACITOR 패키지 다운로드

npm install @capacitor/core @capacitor/cli @capacitor/android

CAPACITOR 설치

npx cap init [앱이름] [앱ID]

*입이름은 입이름

*앱ID는 회사 구분 ID 예)com.example.appname or com.appname.app

실행하면

Web asset directory 디렉토리 물어보는데, 이때 build 로 하고 엔터

*웹앱 폴더를 복사해서 안드로이드에 붙여 넣는데 복사할 폴더 즉, svelte 빌드 결과 폴더를 지정한다. svelte build 시 adapter 설정에서 폴더 명을 지정하면 된다 주로 build 폴더로 만든다.

우선 디바이스를 추가하기 전에 build 폴더를 생성해주자(안하면 디바이스 추가시 에러가 난다.)

npm run build

CPAPCITOR 에 Android 개발환경 설치

npx cap add android

sveltekit 빌드 + CAPACITOR SYNC 연결

그리고 안드로이드 스튜디오 실행

sveltekit 빌드

npm run build

capacitor sync

npx cap sync

• capacitor sync 는 build 폴더안의 내용을 android 폴더의 웹서버 폴더로 복사해줍니다.

capacitor cli 로 안드로이드스튜디오 실행

npx cap open android

*capacitor cli 로 열지 않고 실행하려면

android studio 에서 file>new>Import project 메뉴를 이용하여 폴더를 지정하는 방식으로

이렇게해서 Android studio 가 열리면 gradle 파일 설치하느라고 한참 걸립니다. 좀기다리고

에러가 없으면 Run app(상단 플레이버튼) 또는 Shift + f10 으로 앱 설치 실행

실시간 저장 변경내용 앱에서 확인

(usb케이블 또는 wifi 디버그 연결 되어있어야 합니다.)

root 폴더에 capacitor.config.ts 파일

bundledWebRuntime: false, 줄 아래에

  server:{

    url : "http://10.0.2.2:3000", //<=이부분은 연결할 주소로 설정

    cleartext : true

  }

위 구문은 개발시에 임시로 사용하다 정식 빌드시에는 삭제해야합니다.
실시간 로드되는 내용을 보기 위해 임시로 연동된 임시 서버 주소 입니다.

새로운 터미널 창에서

npm run dev 

npx cap sync

npx cap open android

앱실행 > 파일변경저장 > 앱에 반영여부 확인