sveltekit + capacitor을 이용해 하이브리드앱을 개발할 수 있는데요.
개발한 후 아이폰으로 테스트를 하려고 하면
xcode가 필요하다며 맥북 없이는 테스트 하기 힘듭니다.
그러나 app flow를 이용하면 윈도우로도 아이폰에서 확인할 수 있습니다.
크게
1. sveltekit+ capacitor 설치
2. live reload 기능 사용하기
3. app flow 연결하고 ipa 설치
로 알려드리겠습니다.
1. Sveltekit 설치
npm init svelte@next [프로젝트명]
//스벨트 킷을 설치 해줍니다.
cd [프로젝트명]
//프로젝트 폴더로 이동합니다
npm install
//의존성 패키지를 다운로드 합니다.
npm run dev
//잘 작동하는지 확인합니다.저는 스벨트킷 설치할 때 옵션을 아래처럼 설정했습니다.
2. sveltejs/adapter-static 설치
2.1 sveltejs/adapter-static 설치
npm i @sveltejs/adapter-static
2.2 svelte.config.js 수정
svelte.config.js 파일을 열어서 아래와 같이 설정해 줍니다.
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: '200.html',
precompress: false,
strict: true
})
}
};
export default config;위 부분은 바뀔 수도 있으니 여기 부분도 참고해 주세요
https://kit.svelte.dev/docs/adapter-static
3. CAPACITOR 설치
3.1 capacitor 패키지 다운로드
npm install @capacitor/core @capacitor/cli @capacitor/android @capacitor/ios
3.2 CAPACITOR 설치
npx cap init [앱이름] [앱ID] --web-dir build
//앱이름 = 앱이름
//앱ID = 회사 구분 (ex.com.example.appname or com.appname.app)
3.3 android, ios 개발환경 설치
npm run build
//build
npx cap add android
//안드로이드 개발환경 설치
npx cap add ios
//ios 개발환경 설치
3.2 빌드 후 android, ios 연결
npm run build
//빌드
npx cap sync
//build 폴더안의 내용을 android,ios 폴더의 웹서버 폴더로 복사해줍니다.
3.3 실행해 보기
npx cap open android
//안드로이드 스튜디오에서 열립니다.
npx cap open ios
//xcode에서 열립니다.
다음시간엔 수정하면 자동으로 바뀌는 live reload 기능을 설명하겠습니다.
