[Sveltekit] Sveltekit + capacitor로 맥없이 하이브리드앱 만들기[1] - sveltekit+ capacitor 설치

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 기능을 설명하겠습니다.

 

 

참고 : https://sir.kr/so_jsframework/369?page=2