공간 (Space)

capacitor를 써서 플레이스토어를 통하지 않고 어플리케이션의 쉽게 코드를 업데이트 하는 방법은 capgo를 사용하는 것이다. 리액트는 appcenter의 코드푸시를 사용하면 된다. https://capgo.app/ Capgo - Capacitor Live update Send and manage updates in realtime for your capacitor app without store hassle, 5 min to install Over-the-Air (OTA) updates. Use channels to send to specific groups. capgo.app 아쉽게도 무료는 아니지만 월 39불이면 5,000 엑티브 유저 까지 사용을 할 수 있다. (테스트로 앱을 설치하면 만들면 ..

routes폴더에 들어가 +layout을 들어가보면 import 'ionic-svelte/components/all'; ionic의 모든 컴포넌트를 가져오는 걸 볼 수 있다. 이렇게 레이아웃에 컴포넌트를 불러오는 것이 있기 때문에 페이지에서 컴포넌트를 사용할 때 import를 따로 하지 않고 컴포넌트를 사용할 수 있다. 1. 일단 아래의 사이트를 들어간다. ionic의 컴포넌트 다큐먼트페이지다. https://ionicframework.com/docs/components UI Components | Ionic Documentation UI Components | User Interface Application Building Components ionicframework.com 여기를 들어가서 사용할 컴..

이전편 1. [스벨트킷모바일앱개발] capacitor Ionic SvelteKit 실행해보기 스벨트아이오닉을 사용하여 capacitor로 모바일 앱을 만드는 방법인데 기존에 플러터나 안드로이드 앱을 만들어 봤다면 과정은 다를게 없기 때문에 어렵지 않다. 1. 커멘드에서 키스토어 생성 keytool -genkey -v -keystore key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key 2. android/ 폴더에 key.properties 파일을 생성 storePassword= keyPassword= keyAlias=key storeFile= 파일경로가 \\를 사용해야함 3. android/app/build.gradle def keystorePro..

2. [스벨트킷모바일앱개발] 사인된 apk 만들기 이전에 스벨트에 capacitor를 설치하여 모바일 앱을 만들때는 설정해야 할 것들이 좀 있어서 귀찮았다. https://infocentre.tistory.com/147 하지만 ionic-svelte 프로젝트를 사용하면 이미 설정이 되어있어서 편하다. 아이오닉 스벨트 설치부터 안드로이드 폰에 APK설치 해보기 1. 설치하기 npm create ionic-svelte-app@latest 프로젝트이름 위처럼 아이오닉스벨트를 설치하면 수동으로 세팅해야 할 것들이 이미 설정이 되있어서 좋음. 만약 기존 프로젝트에 추가하려면 아래의 깃 문서의 설치 방법을 따라야함. https://github.com/Tommertom/svelte-ionic-app 2. 설치할 패키..

기존에 프로젝트는 netlify에 업로드를 했는데 sveltekit은 vercel에 올리는게 더 쉽고 좋은거 같다. SSR 1. 프로젝트를 깃허브에 올린다. 올리는 법 모르면 클릭 2. vercel에 로그인 후 https://vercel.com/dashboard 에서 add new project를 누른다. 3. vercel이 깃에 접근할 수 있도록 접근 권한을 주고 깃허브 리스트에서 올릴 프로젝트를 찾는다. 그리고 import 4.디플로이를 누르면 끝

기존에 만들었던 프로그램에서는 +page.svelte파일에서 onMount시 서버에서 필요한 데이터를 가져오도록 만들었다. 하지만 sveltekit에 보면 +papge.js나 +page.server.js를 사용하는 예를 볼 수 있다. 간단하게 위의 코드를 설명하자면 /** @type {import('./$types').PageLoad} */ 부분은 JSDoc이다. 공식문서를 보면 javaDoc과 비슷하다고 하는데 자바는 안해봐서 모르겠지만 JSDoc의 @type 통해서 타입 체킹을 할 수 있다고 한다. (스벨트킷은 자동으로 $types.d.ts를 생성하며 거기서 load되는 파라매터의 타입을 만들고 그 타입을 import하는 것) 타입체킹을 하고 싶지 않으면 저 라인을 무시하면 된다. 자세한 내용은 여기..

npm update

와이파이를 통해 아이피와 포트를 오픈 npm run dev -- --host

주관적인 추천이다. 하지만 Jquery라이브러리를 시작으로 여러가지 프레임워크를 통해 작은 프로젝트를 해본 결과를 바탕으로 추천해 본다. 추천하고 싶은 프레임웍은 바로: 스벨트이다. 영번째 재미있다. 첫번째 이유는 매우 쉽다. 다른 프레임웍에 비해 러닝커브가 완만하다. 자바스크립트만 어느정도 알면 바로 시작할 수 있을 정도로 쉽게 배울 수 있다. 예전에 웹을 점령했던 JQuery도 이러한 장점이 있었다. 예전에 웹을 배우는 방식은 자바스크립트로 아주 조금 맛배기를 보곤 바로 jquery로 넘어갔던 기억이 있다. 왜냐면 jquery가 자바스크립트 자체를 배우는것 보다 쉽고 실전에서 써먹기 좋았기 때문이다. 스벨트도 jquery와 같이 쉽게 배울 수 있다는 점에서 추후 사용자들을 흡수 할 것으로 예상 할 수..

firebase 9 버전이다. app.js를 만들기. import { initializeApp } from "firebase/app"; import { getAuth, GoogleAuthProvider } from "firebase/auth"; const firebaseConfig = { apiKey: "xxxxxxxxx-gG2DEYRrdnOx-Jtw7PRoso", authDomain: "xxxx.firebaseapp.com", projectId: "xxxxx", storageBucket: "xxxx.appspot.com", messagingSenderId: "xxxx", appId: "xxxxxxx", measurementId: "xxxxx" }; //named export를 사용해서 필요한 것들을 내..