본문으로 건너뛰기
O-h-y-o 개발 블로그

O-h-y-o 개발 블로그

하고싶은거 다하기^^

모노레포 & Github CI/CD

모노레포 & Github CI/CD

멀티레포에서는 project repo가 각각 있기때문에 관리와 유지보수에 대한 비용이 늘어나게 됩니다.

모노레포에서는 하나의 레포에 프로젝트들이 있기때문에 통합적인 관리가 가능합니다.

멀티레포는 브랜치가 꼬이거나 하는 일이 적지만, 모노레포에서는 브랜치끼리 꼬이거나 ci/cd의 과정에서 몇 가지 문제가 발생할 수가 있습니다. (조심하지않으면..)

브랜치는 main, stage, dev 세개가 있고 프로젝트는 다음처럼 세개가 있다고 가정하겠습니다.


O-h-y-o약 2 분
App Filesystem 접근

App Filesystem 접근

App에서 Filesystem에 접근하는 방법입니다.

IOS 세팅

UIFileSharingEnabled 값을 추가 후 YES 로 변경해주세요.
LSSupportsOpeningDocumentsInPlace 값을 추가 후 YES 로 변경해주세요.

Android 세팅

다음 문구를 추가해주세요.

<!-- AndroidManifest.xml -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

O-h-y-o1분 미만
앱 화면 전환 제어하기

앱 화면 전환 제어하기

앱을 세로모드에서만 지원하고 싶을때가 있고 가로모드에서만 지원하고 싶을 때가 있습니다.

안드로이드

안드로이드의 경우 다음과 같이 해주세요.

<!-- AndroidManifest.xml -->

<activity
    android:screenOrientation=""
>
</activity>

O-h-y-o1분 미만
Capacitor 웹뷰 키보드 제어

Capacitor 웹뷰 키보드 제어

모바일 웹에서는 input focus 상태일때 키보드가 나타나게 됩니다.

android의 경우 키보드가 나타날때 자동으로 viewport가 조절이 되는 기능이 있지만,

ios의 경우 키보드의 높이 만큼 viewport가 그대로 display 위로 올라가버리게 됩니다.

이에 따라 fixed top을 한 상단 네비게이션 바가 보이지 않게된다거나, footer영역이 위로 올라오게 되어버립니다.

이때 @capacitor/keyboard 플러그인을 이용하여 제어해줄 수 있습니다.


O-h-y-o약 1 분
푸시 알림 보내기

푸시 알림 보내기

@capacitor/push-notifications 를 이용한 푸시알림 보내는 기능을 구현해보겠습니다.

우선 firebase 콘솔에서 프로젝트를 만들고 android와 apple 을 각각 만들고, google-services.jsonGoogleService-Info.plist 파일을 적절한 위치에 넣어주세요.

FCM의 가이드를 따르지 않고, 파일들만 넣어주어야 합니다. 특히 절대로 Xcode 에서 firebase-ios-sdk 를 설치하지마세요.


O-h-y-o1분 미만
사용자에게 앱 업데이트 소식 알리기

사용자에게 앱 업데이트 소식 알리기

Capacitor는 웹뷰를 사용하기 때문에 단순 컨텐츠 업데이트는 웹을 통하여 가능합니다.

하지만 카메라 사용, 키보드 이벤트 같은 경우에는 순수 자바스크립트로는 접근할 수가 없기 때문에 플러그인을 이용하여 접근할 수 있습니다.

이번 글은, 웹 업데이트가 아닌 앱 자체 업데이트가 되었고 사용자에게 스토어에서 업데이트를 받게 하는 방법입니다.

우선 @capacitor/app-launcher 와 @capacitor/app, @capacitor/core 를 설치해주세요.


O-h-y-o1분 미만AppCapacitorQuasarAppCapacitorQuasar
서비스워커 업데이트

서비스워커 업데이트

서비스워커를 이용하는 웹페이지에서, 서비스를 업데이트 하였을때 새로고침을 하더라도 바로 업데이트 사항을 반영받지 못할 수 있습니다.

퀘이사 홈페이지나 흔히 사용하는 노션같은 곳에서 업데이트 된 내용이 있으니 새로고침을 하라는 문구를 흔히 볼 수 있습니다.

해당 기능을 구현하려면 여러가지 방법이 있습니다. 그 중 하나의 방법을 적겠습니다.

  1. 현재 버전을 저장할 데이터베이스를 만들어줍니다.
    버전을 수정하는 API를 만들어 버전관리를 할 수 있으면 더 편리합니다. 수동으로 데이터를 수정하여도 됩니다.

  2. 버전을 체크하는 API를 만듭니다. (소켓으로도 가능합니다.)

  3. 클라이언트에서 setInterval으로 서버에 버전 체크 API를 호출합니다.
    Web Storage에 버전 정보를 저장해두고, 계속하여 서버에서 주는 값과 비교를 해줍니다.
    최초에는 단순 저장만 하며, 이후에 버전이 일치하지 않다면 사용자에게 새로고침을 권유합니다.


O-h-y-o1분 미만
2
3
4
5
...
7