Sveltekit + capacitor + 그누보드 restful api 정보
Hybrid Sveltekit + capacitor + 그누보드 restful api
본문
아 여기에 하이브리드앱 카테고리가 있었네요.
그럼 다시 한번 정리해볼께요.
최근 저희 회사에서 앱개발은
Sveltekit + capacitor + (ciboard or 싱글턴 php) 를 이용한 프로젝트를 많이 납품하고 있습니다.
그리고 웹은 무조건 sveltekit 만 씁니다.
제가 작년 이맘때 지금 다니고 있는 회사에 입사하게 되었는데, 그때는 그야 말로 지옥이었습니다.
그전 개발자 분이 php 를 객체지향으로 만들어 놓고 cordova 로 앱을 만들기 위해 자체적으로
php를 이용해서 SPA 를 구현해 놓았는데, 그분 건강 문제로 그만두시고
그 복잡한 자체 프레임워크를 다른 개발자 분들이 포기하시고 그만두시기를 반복하다가,
제가 들어오고 이문제를 잡게 되었습니다. 복잡도가 높아서 일반 개발에 비해 속도가 2, 3배는 더드는
난해한 프레임워크였는데(객체지향과 jquery 를 이용한 SPA 구현 그리고 cordova 웹뷰 자체 튜닝)
이를 수습하느라 엄청 고생했습니다. 그리고 그동안 늦춰진 속도를 따라가기 위한 전략으로 svelte 도입하게 됩니다.
다행이 제가 한 2년 전부터 svelte 를 저 개인적인 프로젝트에 도입해서 사용하고 있어서,
아직 안정화 버전이 아님에도 불구하고 과감하게 svelte로 신규 프로젝트들에 도입하였고,
지금은 그 악몽에서 거의 탈출하게 되었습니다. 워낙에 svelte가 쉽고 개발 속도가 빠르다 보니 금방 따라잡을 수 있었습니다. 퍼플리셔분도 너무 좋아하고, 저도 웹이건 하이브리드앱이건 바로 개발할 수 있어서 개발 환경이 지옥에서 천국으로 개선되었습니다.
그누보드로 개발하시는 분들은 하이브리드앱 개발하시려면 엄청 고민하실 겁니다.
웹으로 개발해서 뷰어만 만들어서 웹페이지 보여주면 되겠지?
그런데 실제 납품해보신분들은 아시겠지만, 이렇게 하면 프로젝트가 산으로 갑니다.
저 전에 있던 개발자 분도 프레임워크를 그렇게 복잡하게 설개하신 이유가 바로 cordova의 기능을 사용하려면,
spa 를 구현해야하는데, 그것을 구식버전이 jquery로 개발하려다보니 프레임워크가 산으로간 것이었습니다.
하이브리드앱을 쓰는 이유는 웹으로 뷰어를 제작하고 브릿지 기능으로 네이티브 기능을 사용하는건데
그누보드 스킨이나 테마 받아서 쓰면, 네이티브 기능 사용 못한다는 사실에 직면하게 됩니다.
그래서 웹뷰 튜닝하신 분들 제품을 사용하거나 그분들에게 엄청 높은 금액으로 개발외주를 주시는 경우가
대부분인것으로 압니다.
이런 고민을 제목에서 거론한 조합으로 그냥 싸~악 날려 버릴 수 있습니다.
그누보드는 백오피스나, db 설계를 유지하고 그외의 뷰어 단은 과감히 버리시고 restful api 를 이용해서
api 만 활용하는 전략으로 가고,
뷰어는 sveltekit 으로 만들고
그리고 하이브리드앱 브릿지 부분은 cordova 계열의 오픈소스인 capacitor 를 이용하면 됩니다.
최근 버전에서는 지원하지 않지만, capacitor3 버전까지는 cordova와 상호 호환이 됩니다.
그리고 상위버전에서도 cordova와 호환되는 플러그인이 있습니다.
capacitor도 커뮤니티가 잘되어 있어서 네이티브 웬만한 기능은 다 사용할 수 있습니다.
그누보드 처럼 공개 오픈소스 형식으로 웹뷰부분을 지원하기 때문에 이 커뮤티의 도움으로
네이티브 보안 이슈와 같은 업데이트의 신속한 대응이 가능합니다.
이렇게 하면 그누보드를 이용한 앱개발의 새로운 장이 열립니다.
그동안 그누보드 개발하면 하이브리드앱 개발할때 받던 스트레스가 사라집니다.
그런데, 저도 얼마전에 알게된 놀라운 사실이, 아직까지도, 그누보드에 restful api 없었다는 사실이었습니다.
사실 전 ciboard를 한 7년 전부터 써오고 있어서 그누보드를 한참 떠나 있었습니다.
그리고 다른 프레임워크 에서도 다들 restful api 기능들 대응하면서 react, vue 이야기가 인터넷 커뮤니티들 사이에서 많이 회자되다보니 당연히 그누보드 연동해서 많은 분들이 이용하겠거니 생각하고 있었는데,
2달 전쯤에 제가 그누보드에 들어와서 그누보드용 restful api 없다는 사실을 알고 경악을 금치 못했습니다.
그래서 부랴부랴 제가 하나 만들어서 올렸습니다.
https://sir.kr/so_restful/345 이게 그놈입니다.
ciboard 를 워낙에 오래 사용하다보니 restful api 가 어떤것이겠거니한 막연한 경험치로 만들어본 겁니다.
그리고 함수형으로 만든 이유는 작년에 php 를 객체 지향으로 자체 구현한 그 겹겹이 쌓인 프레임워크를 해짓고 다니면서
고생한 객체지향에 대한 악감정이 남아 있었고, 이에 대한 반감으로 그누보드를 다시 찾게 되었는데, 이에 대한 대응으로
일반 함수형으로 restful api 만드면 어디가 덧나나 하는 감정 이입으로 만든 결과가 바로 그것입니다.
restful api 소모임 다른 분들 글을 보면, 그누보드가 객체지향으로 가야한다고 하는 이유를 restful api 부제에서 찾고 계신분들이 있는 것 같은데, 그누보드도 객체지향으로 넘어가보려는 시도를 여기저기에서 찾아 볼 수 있었습니다.
그러나 제 개인적인 생각으로는, 객체지향으로 변경하면 그누보드 망할 수 있다고 생각합니다.
어려워지면 망합니다. 단순하고 쉽기 때문에 그누보드 쓰는건데, 다른 곳 객체지향 쓴다고 따라가면,
아이덴티니 상실되고 그러면 망하는거 아닌가?란 생각이 듭니다. 그리고 msa 개발 방법론도 있으니, 객체지향이
정답이 아닐수도 있겠다는 생각을할 수 있고, 최근에는 node 의 express 처럼 이를 본딴 타 언어에서도
go lang 에서는 fiber 라든가, rust actix 와, python fastapi 처럼 단순화 경향을 장점으로 여기는
라이브러리나 프레임워크가 나오듯이 방향성을 복잡도를 줄이는 단순화 경향으로 가능게 오히려
그누보드 아이덴티니에 더욱 부합하는 것 같습니다.
다시 본론으로 돌아오면
mvc 패턴이라고 하는데 어짜피 서버사이드는 api 만 사용할 것이라면
굳이 객체지향을 고수할 필요도 없다는 판단도 한목 했습니다.
우리가 원초적으로 라우팅하면 파일 베이스 라우팅을 가장 먼저 경험해서 이게 익숙한데,
sveltekit도 쉽게 개발하라고 이 방식을 지원하고 해서
이번에 만든 rustful api도 파일베이스 라우팅으로 구현해 놓았습니다.
제가 학창시절 공부를 못해서 어려운거 못하다보니 저도 이용해야해서 어쩔수 없이 쉽게쉽게 만들었습니다.
하이브리드앱 만들대는
그누보드 restful api + Sveltekit + capacitor + + (안드로이드 or ios or window)
웹(PWA)만들때는
그누보드 restful api + Sveltekit
참고로
20배정도 빠른 속도 개선은 덤입니다.
3
댓글 13개
올리신 글 읽으면서 새로운 생각을 하게 되었습니다.
도움되는 글입니다. 감사합니다.
node를 프론트를 위해 별도로 띄우는 과정이 좀 단순했으면 해서요..
세팅하기
> 내 pc의
sveltekit프로젝트에 adapter-node 어뎁터를 설치해서 빌드를 합니다.
npm run build
빌드가 성공하면- 개발용 빌드 확인용!, 실제로는 서버에서 빌드해서 사용해야 함.
commit 후
git에 push 해서 올립니다.
> 여기부터 서버에서
ubuntu 22.04에다가 node.js 설치하고
그리고
git 설치하고(fpt로 해도되는데, ftp 할때는 .gitignore 파일에 예외 설정 된 파일은 업로드안하면 됨)
git clone git주소 로 git과 연결하고(폴더는 아무데나 기억하기 좋은곳에)
git pull 로 내려 받습니다.
그리고
npm install 해서 추가설치한 의존성 패키지를 인스톨합니다.
그리고
npm run build
빌드성고하면
/build 폴더가 생성되는데
요안의 index.js 파일을 node 로 실행해주면
node ./build/index.js
http://localhost:3000
node 웹서버가 실행됩니다.
그럼
외무 사용도메인으로 들어오면 위 http://localhost:3000 번으로
사용중인 Apache 나 nginx의 설정을 해서 프록시 패스를 걸어주면
도메인으로 접속하면 node 웹서버로 접속되게 하면 됩니다.
그런데, node 웹서버가 좀 소프트해서, 자주 꺼집니다.
그래서 무중단 배포를 위해
pm2 라이브러리를 글로벌로 설치하고
pm2 restart ./build/index.js
위 세팅이 완료되었다면 수동으로 반복실행은 아래와 같습니다.
로컬에서
개발 빌드
commit, git push
서버에서
git pull
npm i
npm run build
pm2 restart ./build/index.js
이래서야 기존 ftp연결해 놓고 단축키로 ctrl+s 로 ftp 직접 save하던 성질머리로는 개발 못하겠죠?.
그래서 github나 gitlab 의 ci/cd 자동 배포 설정을해 놓으면
저장후 commit & push 하면 위 반복 실행 과정이 자동으로 진행됩니다.
이쯤 되야 기존 ftp로 저장하던 성질머리로도 개발 가능하겠죠!
말씀하신대로 에디터에서 작업하는 방식은 안되고
git action 통해 해야 하겠네요..
이번 프로젝트는 단일 서버 운영이라 트라이는 해봐야겠네요...
길고 친절한 설명 감사합니다.
@들불
지금 sveltekit+ ionic + capaciotr로 앱 개발을 하려고 하는데, 혹시 테스트는 어떻게 하는지 물어봐도 될까요?
예를들어 react native같은 경우 expo go 란 앱을 사용하면 코드를 저장할 때마다 바로 네이티브 기기에서 테스트를 할 수 있었어요.
그런데 capacitor는 따로 그런 테스트 할 수 있는 툴이 없어서 수정할 때마다 빌드해서 확인해야 하는지 궁금합니다!
@오늘의서재
https://sir.kr/so_jsframework/369?page=2 부먹 버전..
음 제가 정리해놓은 글 보시면 되긴하지만 다시 찍먹으로 알려드리면,
sveltekit + capacitor 로 하시고요, ionic 는 사용할일이 없습니다. 예전에 ionic로 svelte를 만든분이 계셨는데, 그이후로 엄청 변경사항이 많아서 그냥 현재 버전의 sveltekit 하고 capacitor 조합으로 만드시는게 좋습니다.
sveltekit ui 세트틀이 많아서 데이지 ui 나 스켈레톤ui 이용하시면 순풍순풍 만드는데 도움됩니다. 두게 모두 tailwind css기반입니다.
1. sveltekit 으로 ui를 개발합니다.
2. static adapter 버전으로 빌드합니다.(static 버전상 ssr 이 없어서 관련 에러 처리)
3. capacitor 설치로 안드로이드와 ios 개발환경 추가
4. sync 싱크 - 프로젝트의 build 의 폴더를 android 나 ios 개발 폴더로 복사 및 저장
5. 안드로이드 스튜디오나, xcode 에서 오픈
6. 폰이나 가상 디바이스 환경으로 오픈 해서 확인
아마 아래 답면을 물어보신것 같은데요.
sveltekit 의 dev server host 기능을 이용하시면 실시간 반영을 폰에서 확인 가능합니다. usb 로도 가능하고 무선 라우터 환경이면 와이파이로도 가능합니다.
여기까시 진행하시면 capacitor.config.ts 파일이 생성되어 있는데 파일여시고
const config: CapacitorConfig = {
// 아래부분을 추가
server: {
url: 'http://192.168.0.21:5173',
cleartext: true
}
//여기까지 추가
}
http://192.168.0.21 이부분은 현재 접속한 내부 네트워크 주소 정해주시면 되는데요.
이상태에서 npm run dev -- --host 해주시면 (뒤에 -- -- 두번 들어감 주의)
-> Network: http://192.168.35.40:5173 라고 나오는데(새로 생성한 주소가 나옴)
위처럼 내부서버 IP 가 나오는데 이 것을 위의 추가 부분에 수정해서 넣어주면 됩니다.
일반 브라우저로 위 IP 접속해도 보이고 - 같은 사무실 다른 동려들이 볼 수 있겠네요.
그리고 capacitor 안드로이드나 ios 에 설치된 폰의 앱화면으로 실시간 원격 중개됩니다. 수정하고 저장하는 즉시 반영됩니다. live reload 기능이라고하는 것 같습니다.
단, 네이티브부분은 수정 저장 빌드 sync 할때 갱신됩니다. 그래서
모두 자동은 아니고 UI쪽 수정 용으로 보시면 됩니다.
이게 있고 없고의 생산속도는 하늘과 땅차이죠!
@들불
너무 친절하게 답변해주셔서 감사합니다!!
덕분에 live reload 기능 테스트 하고 동작하는 거까지 확인했습니다 ㅠㅠ. 정말 감사합니다.
그리고 궁금한 점이 하나 있는데요.
https://github.com/Tommertom/svelte-ionic-app
위의 github에서 찾아보니 @sveltejs/adapter-static를 사용하는 이유는
Ionic package 가 SSR=true. 일때 동작하지 않아서라고 설명하는 것 같더라구요.
근데 ionic을 저희는 사용하지 않을건데 sveltejs/adapter-static로 굳이 바꾸는 이유가 있나요?
실제로 저 패키지를 설치 하지 않아도 잘 동작 하더라구요.
그리고 저의 경우는 맥북이 없어서 appflow를 사용해 빌드하고, ios 기기에서 테스트를 했는데요.
혹시 알려주신 내용과 제가 배운 내용을 바탕으로 블로그를 써서, 정리해서 올려도 될까요?
@오늘의서재 블로그은 쓰셔도 되고요.
https://github.com/Tommertom/svelte-ionic-app
는 오래간만에 들어가보네요
아마도 라이브로딩시에는 npm run dev 가 작동하는 곳을 가리키기 때문에 개발 모드로 작동하는 것이 아닌가 싶고요.
아니면 adapter-auto에 기능이 추가되어서 그런 걸 수도 있고요.
빌드하면 아무것도 안되던 문제가 있어서 기본 adapter-auto 에 기능 추가 된걸 수도 있어요.
adapter-static은 빌드하면 build 폴더에 내용이 컴파일? 되어 생성되는데,
sync 를 진행하면 android app 폴더로 이동 복사되고 안드로이드 실행하면 index.html 가 기본 값으로 열리 것으로 알고 있습니다.
그래서
adapter-static는 말그대로, 일반 웹페이지 접근하듯이 index.html를 여는 것이고
adapter-node 는 node index.js 를 실행시켜서 js로 node 서버를 실행시키는 것인데
아무래도 안드로이드나 아이폰에서 별도로 node.js 서버를 실행하면 좀 복잡해져서 그냥 일반 페이지 js 넣어 실행하듯이 하는게 아닌가? 싶더라구요.
node.js 서버가 에러에 민감해서 자주 죽거든요 그래서 서버에서는 forever 이나, pm2 라이브러리 사용해서 죽은거소 다시 살려서 동작하게 하는데 이런 기능까지 넣기에는 무리가 있어서 그런지 그냥 정적인 index.html 실행방식으로 하는 것 같습니다.
저는 ionic 을 사용하지 않는데, 별도의 ionic 컨포넌트 문법을 사용해야해서 좀 복잡하기도 해서 그냥 잘 사용하는 일반 div css html를 사용해서 만듭니다.
capacitor 를 사용하면 일반 웹페이지도 하이브리드앱으로 사용가능합니다.
위 ionic 을 사용하는 것은 처음에는 이미 작성된 컴포넌트를 사용한다는 점에서 쉽게 접근 할 수 있는데, 문제는 이 컴포넌트는 node_module 안에 등록되어 있다는 점입니다.
배포하는데에는 좋지만, 다양한 고객 응대를 하다보면, node_module까지 손대야하는 상황이 벌어집니다.
그러면 혼자 개발하는 프로젝트면 상관 없을 수 있는데, 만약 공유하거나, 이동하는 경우 그리고 프로젝트 마무리 후 오랜만에 프로젝트를 다시 열어서 작업을 할 경우 node_module 까지 열어서 작업한 기록관리가 잘 안되다보면, 습관적으로 node_module을 신규생성해서 그전 설정을 가저오지 않은 상태로 작업할 수도 있습니다. git에 올리면 node_module 는 누락 시키잖아요.
그래서 배포의 자동화는 좋지만, 각 컨포넌트의 자유로운 튜닝을 고려한다면, 좀 불편할 수 있습니다. 고객을 잘 설득해야겠조 그건 안된다고 하면서,
그래서 저는 기능을 참고는 하되 직접 만질 수 있게 자율성을 최대로 확보한 선에서 그러니까 UI 컴포넌트는 lib 폴더안에 두고 개발을 진행합니다.
@들불
많은 고민들이 풀리는 얘기네요!
길고 친절한 답변 감사합니다 :)
https://kit.svelte.dev/docs/adapter-auto#adding-community-adapters
위링크에 나오면 다양한 Saas 의 어뎁터를 설치하시고
각 서비스별 가입후 배포 서비스의 설정을 하시고
npm run build 하거나 별도 명령어 한줄을 실행하시면 배포 끝
그러니까, Saas 서비스 이용하면 직접 배포 설정하는 것 보다 훨씬 쉽게
배포할 수 있습니다.
아 처음엔 죄다 무료 입니다.
