예전에 하이브리드앱을 개발하고자, 

아마 우리나라에 나온 거의 모든 하이브리드 개발 서적은 다 본것 같습니다.

phongep, cordova 를 소개하는 책들이 대부분이었습니다.

그런데 이거 이용해서 개발하는 분을 본적이 없습니다.

 

하이브리드하면 두개의 양대 산맥이 있었습니다.

 

하나는 네이버 개발자회의에서 촉발된 웹뷰로 개발하고 브릿지는 직접 스스로 개척,

하나는 cordova 코르도바 입니다.

 

네이버개발자 회의가 정확한 명칭인 지는 기억이 잘 안나지만,

네이버에서 주최하는 개발 발표 영상에서 우리는 웹뷰를 이용해서 네이버의 웹서비스를

그대로 앱으로 만들어서 쓰고 있다는 내용이었습니다.

 

아마도 그래서 인지, 그냥 웹으로 개발하고 웹뷰로 랩핑해서 출시하면 된다는

인식이 이때부터 시작된 것 같습니다.

물론 지금도 아주 안되는 건 아닙니다.

 

그리고 하나의 흐름인 코르도바

 

코르도바는 외국에서 코르도바라는 하이브리앱을 만드는 오픈소스로 출발해서

지금은 대기업에 귀속된 프로젝트가 된것으로 알고 있습니다.

 

아무튼 

코르도바 관련 내용의 책들을 보면 spa를 소개하는 내용이 많이 있었습니다.

그리고 우리에게 익숙한 jquery 에서 모바일용 spa 를 구현한 프레임워크로

사용해보신 분들이 있을지 모를 jquery-mobil 이라는 프레임워크입니다.

 

이게 전자정부프레임워크 공식 모바일 프레임워크로 선정이 되어서

전자정부프레임워크에서 공식문서도 배포되고 나름 홍보페이지가 잘되어 있었습니다.

그런데 jquery-mobile을 사용한 앱을 본적이 없습니다. 

책들은 죄다 이거 쓰는 방법들 설명인데, 정작 현업에서는 jquery-mobile을 사용하지 않는 분위기 였습니다.

그리고 사용을 한다고 해서 jquery-mobile에서 제공하는 spa 을 사용하지 않는 분위기 였습니다.

그냥 전처럼 jquery 사용하듯이 페이지 디자인용으로남 사용되었습니다.

페이지를 레이어로 구성해서 넘기는 방식은 사용되는 것을 본적이 없는것 같습니다.

 

저는 앱을 개발하면서, 단순휘 웹뷰의 랩핑 만으로는 지속적으로 업데이트되는 보안이슈와

상태관리의 문제로 지적되는 push 가 설정유지 값의 중복 또는 지워짐 등의 문제

그리고 로그인 세션 유지 문제 등등 많은 문제를 접하면서 웹뷰로는 개발을 못한다고 판단하여 

이 jquery-mobile 과 cordova 의 생태계를 이용하는 방식으로 앱을 여러개 만들어서 납품했었습니다.

그런데 초기 spa 라서 그런지 여간 불편한게 한두게가 아니었습니다.

 

그때 당시 가장 불편했던 점으로 꼽자면

디버깅시 저장 후 실행 화면을 꼭 네이티브 화면으로 봐야했다느 점입니다.

 

지금처럼 node 가상 서버 환경을 제공해주지 않아서

개발 결과를 

수정 -> 저장 -> cordova sync -> 디바이스 화면에서 확인

계속 이렇게 하나고치고 디바이스로 내용 옮겨서 확인을 반복해야했습니다.

디바이스에 넘겨서 확인하려면 1~2분 정도 결리는 문제가 있어서, 

시간을 단축하려면 컴퓨터도 좋아야하고, 디바이스도 환경도 가상환경보다는 사양좋은 최신 휴대폰으로 확인해야

그나마 속도를 개선할 수 있었습니다.

 

그런데 지금은?

node 에서 번들러들이 나오면서

webpack, snowpack, 그리고 결정판으로 vite 가 나오면서

개발 환경을 완전히 개선해 놓았습니다.

 

초기에는 가상웹서버를 뛰워서 뷰단은 코딩후 저장하고 웹화면 접속해서 다시보기 F5를 꾹 눌러주면 갱신내용을 볼 수 있었습니다. 이것도 앞서 설명드린 디바이스로 넘겨서 확인하는 시간을 비교하면 장족의 발전을 한것인데,

이마져도 시간을 소요한다고 생각했는지, 

지난해 vite 가 아예 실시간 live update 지원하면서

수정하고 저장하면 화면에 바로 보이는 방식 그러니까 중간에 새로고침 하지않아도 저장만 하면 바로 보이는 방식으로

변경되면서, 개발환경이 너무나도 쾌적하게 바뀌었습니다.

 

php 로 개발하면, 코딩후 ftp 저장후 웹페이지에서 새로고침해야하는데,

vite 를 기본 번들로 탑제한 sveltekit 저장만하면 F5 눌러서 새로고침할 필요없이

저장만 하면 바로바로 확인됩니다.

요 한클릭 없앤것만으로도 코딩속도, 목통증, 손목결림 등등 많은 것을 개선할 수 있습니다.

 

또한가지 불편했던 점은

sveltekit 으로 개발하면서 여러 제품을 동시에 개발하는 상황이 벌어지게 됩니다.

그러니까

sveltekit 프로젝트를 여러개 뛰어 놓고 개발하는 경우가 있다는 말이죠,

같은 프로젝트에서

앱하나, 그리고 백오피스하나 뭐 이렇게 뛰어놓고

백오피스에서 내용 수정하면, 앱에서 잘 반영되는지 같이 보면서 개발하는 경우가 있을 수 있습니다.

 

그런데 예전에는 sveltekit 를 개발 환경에서 웹으로 보려면

http://localhost:3000 이렇게

기본설정 포트가 3000번으로 고정되었었습니다.

그래서 

프로젝트를 여러개 뛰우지 못하고 앞의 프로젝트 뛰웠다가,

다른 프로젝트 뛰우려고 앞의 프로젝트 끄고

새로운 프로젝트 뛰워얗는데 그전 프로젝트 지워야해서 강력새로고침해서 다시보고

이게 새로고침하면 처음 로딩시간이 있어서 잠시 기다렸다고 새로 뜨는거 보고

뭐 이렇게 하다가

넘 귀찮다 싶으면 설정값을 바꿔서 포트번호를 달리해서 동시에 다른 포트로 뛰우고

여러가지 복잡한 일들을 해줘야했습니다.

 

그런데, sveltekit 정식 버전 오픈 즈음에

포트번호가 5173 이라는 독특한 번호를 체택하더니

프로젝트를 동시에 여러게 뛰우게 되면 자동으로

포트번호가 1자리씩 올라가면서

5173, 5174, 5175 이렇게 중복되지 않게 자동으로 생성이 되게 되었습니다.

 

그래서 지금은 프로젝트 여러개 뛰워도별 스트레스 받지 않고 그냥 뛰워서 비교하면서 볼 수 있습니다.

 

개발자 경험을 우선하는 svelte의 배려에 항상 감사하고 있습니다.