나는 주로 파이썬과 자바스크립트를 사용했고, 혼자 코딩을 하면서 타입을 사용하지 않았다. 물론 대학교 때 C와 Java를 배운적 있어 타입에 대해 완전히 모르는건 아니었다. 사용할 필요가 없다고 생각하고 안사용하고 있었지만 이젠 동적타입 스크립트언어도 다 타입을 받아들인거 같다. 

요즘 그 성능이 좋다는 fastapi를 가지고 놀고 있는데 튜토리얼을 보면서 타입이 적힌 코드를 보는게 익숙하지 않아 고생이었다. 처음부터 타입을 사용하던 사람이나 팀으로 프로젝트를 진행하는 사람들은 아마도 타입을 사용하는게 익숙하겠지만 타입을 안쓰던 사람이 타입을 쓰려니 머리가 아픈것이다.

어째튼 타입을 사용하기 위해선 기존에 가지고 있던 생각을 바꿔야 했다.

"변수는 그릇 혹은 컨테이너다." 이런 개념이 "스트링용 컨테이너, A클래스용 컨테이너, 숫자용 컨테이너" 로 나눠져야 한다

기존의 함수에 대한 생각은 "파라매터를 받고 결과를 준다." 에서 "여과기를 통과한 파라매터를 받고 여과기를 거쳐서 결과를 준다".로 이미지가 변해야 했다. 

이상하다... 이렇게 시각적으로 상상이 되지 않으면 받아 들이기가 어렵다.

그래도 이렇게 한번 시각화가 되면 사용이 가능하다.

capacitor를 써서 플레이스토어를 통하지 않고 어플리케이션의 쉽게 코드를 업데이트 하는 방법은 capgo를 사용하는 것이다. 리액트는 appcenter의 코드푸시를 사용하면 된다.

https://capgo.app/

아쉽게도 무료는 아니지만 월 39불이면 5,000 엑티브 유저 까지 사용을 할 수 있다.

(테스트로 앱을 설치하면 만들면 그것이 다 active 유저로 카운팅되니 주의) 무료로 사용할 수 있는건 월 50명의 monthly유저만 가능하니 테스트로 깔고 여기저기 다운로드 해보라고 보내주면 사용량을 초과 할 것이다.  개인적으로는 두배씩은 늘려주면 유료로도 사용할 것 같은데....

어째튼 스타트업에서 미리 설치해놓고 비상 상황시 돈 내고 사용할 수 있지 않을까 싶다.(아마도)

기본적인 사용법은 다음과 같다.

1. 회원가입

2. capacitor앱에 capgo를 초기화 함

3. 스벨트킷 +layout.js에 아래의 코드를 붙여넣는다.

※ 공식설명서에 main코드에 붙이라고 적혀있어서 app.html에 넣고 삽질 했지만 작동안되서 +layout.js에 넣어서 하니 됨.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady();

4. 스벨트킷을 빌드함

npm run build

5. 안드로이드 기기에 설치함

npx cap run android

-------

라이브업로드 방법

1. 코드를 수정함

2. package.json의 version을 높힘

3. npm run build

4. 빌드한 것을 capacitor와 싱크함

npx cap sync

5.업로드

앱아이디는 자신이 세팅한 앱아이디 ex) com.example.name

npx @capgo/cli bundle upload [appId]

routes폴더에 들어가 +layout을 들어가보면

import 'ionic-svelte/components/all';

ionic의 모든 컴포넌트를 가져오는 걸 볼 수 있다. 이렇게 레이아웃에 컴포넌트를 불러오는 것이 있기 때문에 페이지에서 컴포넌트를 사용할 때 import를 따로 하지 않고 컴포넌트를 사용할 수 있다.

1. 일단 아래의 사이트를 들어간다. ionic의 컴포넌트 다큐먼트페이지다.

https://ionicframework.com/docs/components

여기를 들어가서 사용할 컴포넌트의 자바스크립트 코드를 복사한 뒤 붙여넣기 한다.

그러면 아래 스크린샷 처럼 쉽게 UI를 만들 수 있다. 

이전편 

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 keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}


apply plugin: 'com.android.application'

android { ...

4. android/app/build.gradle

android {
    // start of signingConfigs
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }
    // end of signingConfigs
    compileSdkVersion rootProject.ext.compileSdkVersion
    ...
     buildTypes {
        release {
        	// start of 코드난독화 및 사이즈 축소
            minifyEnabled true
            useProguard true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            
            // release 속성으로 변경
            signingConfig signingConfigs.release
        }
    }

5. 스벨트 엡을 빌드하고 

npm build

6. build된 앱가 capacitor를 싱크를 시킴 

npx cap sync

※ 이를 하지 않을경우 gradlew실행시 새로 빌드된 앱이 apk로 바뀌지 않음. 위 명령어를 실행하지 않고 apk를 빌드한 뒤 수정된게 반영되지 않아서 당황했다.

7. apk나 appbundle을 생성

안드로이드 폴더에 들어가서

//apk

gradlew assembleRelease

//or appbundle

gradlew bundleRelease

※ gradlew clean 를 사용하면 gradlew로 만든 apk를 지울 수 있으니 실패시 사용.

생성된 apk 경로는 아래와 같다.

android/app/build/outputs/apk/release/app-release.apk

번들 경로

http://android/app/build/outputs/bundle/

---------- 추가 ----------

앱을 수정시 버전을 업데이트 해야한다.

ex)

\android\app\build.gradle

versionCode 2
versionName "1.0.1"

config.json

version

참조

https://devdactic.com/ionic-in-app-purchase-capacitor

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. 설치할 패키지고르기 

안드로이드로 실행해보기

3. 안드로이드 플랫폼 설치 및 추가

  (3-1)안드로이드 플랫폼 설치

npm i @capacitor/android

  (3-2)안드로이드 플랫폼 추가

npx cap add android

4. 빌드하기 

npm run build

5. 안드로이드 폰에 설치하기

npx cap run android

ios는 위의 명령어들을 android를 ios로 대체함

------------------------------

위 처럼 하는 방법은 빌드가 된것을 폰에 옮길때 사용하는 방법이다. 하지만 개발할때는 실시간으로 코드가 변경함에 따라, 화면도 바뀌는 것을 볼 수 있어야 한다.  이를 '라이브리로드' 라고 한다.  (플러터에서는 Hot reload)

라이브리로드 사용하기 (개발모드)

1. 개발모드로 클라이언트 서버키기 

npm run dev -- --host

2. (-hmr:hot module replacement 플래그를 추하가여) 안드로이드로 폰에 설치하기

npx cap run adroid -hmr

: 아래의 코드를 보듯이 -hmr이 있으면 url값과 cleartext값을 전달함으로서 앱화면을 url주소와 연결 시킴

import { CapacitorConfig } from '@capacitor/cli';

const appId = 'ionic-sveltekit-ssr-demo.ionic.io'; // 이것에 따라 빌드될때 안드로이드 앱아이디 생성
const appName = 'ionic-sveltekit-ssr-demo';
const server = process.argv.includes('-hmr') ? {
  'url': 'http://192.168.5.67:5173',   // always have http:// in url
  'cleartext': true
} : {};
const webDir = 'build';

const config: CapacitorConfig = {
  appId,
  appName,
  webDir,
  server
};

if (process.argv.includes('-hmr')) console.log('WARNING: running capacitor with livereload config', config);

export default config;

※만약 안된다면 위와 코드중 'url': http:// ... " 부분이 개발모드 클라이언트 로컬아이피 주소랑 같은지 확인한다.

참조

https://ionic.io/blog/pwas-using-sveltekit-and-ionic

블로그에 IT와 여행 수술 후기 등을 쓴지도 꽤 지났다. 그렇게 인기 있는 내용의 글을 적지는 않아서 그런지 많이는 방문 하지 않는다. 대략 사람들이 하루에 100명 가까이는 방문하는거 같다. 

1. 독일어 과외를 하는 친구가 독일어 배우는 학생을 찾는걸 도와달라고 부탁을 한적이 있는데 하나의 포스팅에 작성을 하다보니 많은 사람들이 보지 않았고 효율성이 없었다.  지금 사용하는 스킨에 공지사항을 올리는 기능이 있는가 봤지만 없었다.

2. 한국에 귀국한지 꽤 지났고 본격적으로 일을 찾으려 하는데, 생각보다 쉽지 않다. 꽤 많은 사람들이 내 블로그에 방문하는데 웹/앱 기획이나 개발로 일자리를 구하고 있다는 것을 알릴 수 있으면 어떨까 싶었다.

그래서 아래의 사진 처럼 보듯이 홍보 및 공지(빨간박스) 영역을 만들게 되었다.

원래 사용하던 스킨의 이름은 오딧세이다.

아래를 보듯 게시글을 보더라도 위에 홍보&공지 영역이 보여진다.

방법

위 처럼 하는데는 간단한 html, css코딩이 필요하다.  

1. Admin에 들어가 스킨변경을 누른다.

2. 아래 사진처럼 사용중인 스킨을 볼 수 있을 것이다. 자신이 바꿀 스킨을 다운로드를 한다.

3. 먼저 간단한 티스토리 스킨의 구성을 살펴보면 다음과 같다. 

index.xml, skin.html, style.css 

파일로 구성이 되있고 

XML파일을 열어보면 xml태그와 아래의 스킨편집의 구성이 동일하다는 것을 것을 알 수 있다. XML에 나는 기존에 없던 공지 및 홍보 영역을 추가 하였다.

위에 보듯이 공지 및 홍보 섹션엔 배너용 이미지와 홍보링크를 가지고 있다.

위는 아래의 코드를 추가했기 때문이다. 

variablegroup name= "공지 및 홍보" 는 섹션의 타이틀이 된다.

그 안에 두개의 variable을 넣은 것을 볼 수있는데 name은 html편집에서 티스토리 치환자에 사용될 변수의 이름이다.

타입은 아래 보듯 IMAGE와 STRING이 적혀있는데

1) IMAGE는 이미지를 업로드 할 수 있는 기능을 스킨 편집창에 나타낸다.

2) STRING은 위에 보듯 홍보링크에 input필드를 추가 시켰다.

이 외에도아래 보듯 select나 다른 타입도 있어 원하는 것을 추가 시키면 된다.

나는 메인배너로 쓸 이미지를 올리는 기능과 그것을 눌렀을때 이동하게 할 페이지를 넣을 수 있도록 텍스트 인풋을 추가했다.

그리고 스킨 등록을 통해 업로드를 시켜보면 우리가 xml에 추가한 것들이 스킨편집창 메뉴에 적용된 것을 볼 수 있다.

3. HTML편집하기

변수명 은 xml에 variable name이다.

<s_if_var_변수명>: 만약 변수가 있으면 <s_if_var_변수명></s_if_var_변수명>사이의 내용이 보여진다.

: 스킨편집창에 넣은값이 보여진다.

<s_not_var_변수명> 변수가 없으면 <s_not_var_변수명></s_not_var_변수명>그 사이 내용이 보여진다.

위에 코드를 보듯 container 안 area-main 위에 adAreaImg가 있으면  img 태그가 나타나게 했다.

widh="100%"를 넣어서 가로로 화면에 꽉차게 했다. 링크가 없으면 링크가 없는 배너를 보이게 했고, 링크가 없으면 링크가 없는 배너를 보이게 했다.

이렇게 하면 배너는 나타나는데 쓴 글을 볼때 문제가 발생한다. 이 문제는 간단하게 html에 article-header를 찾아서 업에버렸다.

그러면 아래사진 처럼 빈공간이 생겨버리는 문제가 발생하는데

#tt-body-page .main에 padding-top: 470px이 있어서 그렇다.

이걸 css에 들어가서 지워주면 된다.

https://support.google.com/analytics/answer/10075209?hl=en

gtag로  받은 데이타가 모이지 않고 실시간으로만 보여질때는 custom dimension으로 등록을 해한다. 그래야만 데이타가 쌓인다.

This is the solution for problem that the data recived from gtag is not stored but only show in real time data. 

https://www.shopify.com/partners/blog/theme-app-extensions