배포? SVELTE 뭐가 좋다고 그걸하냐?

배포는 한번만 세팅 해놓으면, 우리가 php 개발 할 때 자주 사용하는

에디터에서ftp 설정해 놓으면 저장하면 바로 업로드 되듯이

스벨트도 비슷하게 짧은 호흡으로 세팅해 놓을 수 있습니다

git을 이요하는 방법인데요. CI/CD 이용하는 것입니다.

git 저장소에  커밋하면 알아서 자동으로 빌드하고 배포됩니다

이 방법도 나중에 알려드릴 테니 잘 따라오시면 됩니다. 

1. 바인딩

스벨트의 바인딩을 이용하시면, 스벨트의 생산성 매력에 푹~ 빠져들게 됩니다.

바인딩이란? 

데이터를 

바인딩

php는 <?=$value?> 이렇게들 쓰셨잖아요.

svelte는 {value} 이렇게 씁니다.

양방향 바인딩

<script lang="ts">

let name ='';

</script>

{name}

<input type="text" bind:vaule={name} />  <= 여기에 쓰면 위의 name 로 바로 나타남

php 는 언어가 서로 달라서 양방향 안되고

익숙한 jquery 를 이용하면

<script>

$(document).ready(function() {

  $('#name').on('input', function() {

    let name = $(this).val();

  });

});

</script>

<input type="text" id="name"/>

아무래도 익숙한게 좋긴 하지만, 스벤드와 비교하면 코딩양이 만만치 않습니다.

스벨트를 바인딩을 보면, 우리가 php변수를 바로 출력하는 느낌입니다.

다들 초기에 해보신 고민이 php 가 바로 화면에 부려주는 건 좋은데,

javascript 값을 php에서 바로 받아서 썼으면 좋겠다는 고민들하셨을 겁니다.

아파도 스벨트가 그걸 해결한 것같은 인상을 받습니다.

php 처럼 쉽게 뿌려주고 결과를 바로 받아서 쓰고..

코드양

react 나 vue 에 비해서도 적은 양입니다.

빌드를 거치는 과정이 있어서 이런 압축적인 코드로도 구현이 가능한건데,

배포만 잘 잡아 놓으면 월등한 생산성을 갖게 됩니다.

문법의 깊이

React나 vue 같은 경우는 javascript를 객체 즉 클레스 이용하는 것처럼 사용합니다.

그런데 svelte는 단순 함수 다루 듯이 사용하게 되어 있습니다.

그 만큼 단순해서 서비스 로직에 더 많은 에너지를 할애할 수 있습니다.

그래서 오히려 복잡한 로직이 있는 프로그램이라면, 스벨트를 사용하는 것도 좋은 대안이라고 생각합니다

러닝커브

jquery가 시대를 풍미했다는건 다들 인정하실 것입니다. 이러한 점유율을 자랑하게된 이유도 배우기 쉽고

바닐라 자바스크립트 보다 코딩양이 적어서 인데,

스벨트는 jquery 보다도 더 쉽고, 코드양은 더 적습니다.

그래서 제가 처음 접하는 순간 스벨트가 시대를 씹어먹겠구나란 생각이 들었습니다.

그런데 하이브리드 앱도 이 쉬운 기술로 쉬게 만들 수 있으니. 말 다한거죠.

결과물의 양과 속도

스벨트로 만들어서 빌드하면, 코드가 압축되면서 용량이 확줄어들게 됩니다.  자바스크립트도이런 걸 하더라구요.

마치 컴파이 하듯이 코드를 재배치 합니다.

그리고 정크 파일을 분리해서 필요한 페이지 또는 기능 요청시에만 해당 정크 파일만 로드되어

웹경험의 품질을 높게합니다.

웹서핑 속도

스벨트는 리엑트와 뷰의 dom 을 사용하지 않고 그냥 바닐라 자바스크립트로 뷰와 기능을 구현합니다.

그래서 여러가지 dom을 다루기 위한 절차가 생략되어, 속도가 빠릅니다.

이부분은 이후에 정정된 부분입니다.

그러니까 리엑트와 뷰는 dom 을 다루기 위한 라이브러리를 불러오는 최초의 과정이 필요하기 때문체

최초 웹서비 속도에 해당 라이브러리 다운로드에 할애하는데 반해

스벨트는 압축된 바닐라 자바스크립트를 만들어 바로 실행하기 때문에 초기 로딩에서 이부분에서 확연한 차이를 갖습니다.

그러나 반대로 리엑느타 뷰는최초에 로딩 이후에은 라이브러리를 공통으로 공유해서 이후 페이지 들에 저근해서 기능을 구현하기 때문에 뒤로 갈수록 코드양이 작아집니다.

반면 스벨트는 초기에는 빠르지만 각페이지 들이 더해지게 되면, 일일이 바닐라자바스크립트에 기능 부분을 일일이 구현해야해서, 전반적으로 전송양이 늘어나게 됩니다. 이부분을 리엑트 커뮤니티에서 지적하였고, 리치해리스도 인정한 바입니다. 

하이브리드앱

그누보드로 모바일 웹 만들고 웹뷰로 하이드리드 앱 만드시잖아요.

그럼 어떤 프레이워크를 쓰시죠?

전 딱히 없습니다. 

반대로 하이브리드앱하면? 떠오른느 단어가 몇개 있습니다.

폰갭, 코르도바, ionic 등등...

하이브리드 앱을 지원하는 전세계 커뮤니티가 형성된 라이브러리 들입니다.

이 라이브러리들은 집단지성의 힘을 빌려서 보안 또는 수시로 있는 안드로이드아 IOS 업데이트를

공동으로 대응할 수 있습니다. 즉 검색하면 웬만한 답은 바로바로 찾아서 대응 가능하다는 점입니다.

그런데, 그누보드로 모바일앱 만들어서 폰갭으로 코르도바로 빌드가 잘되던가요?.

그냥 웹으로 만들면, 웹뷰에 언처서 납품하는데, 웹뷰에서 자주 사용하는 라이브러리만 몇개 

브릿지 만들어서 제공하는 웹뷰 장사꾼 들이 제공하는 패키지를 이용해야했습니다.

그러나 불안 불안 했죠 이도 업데이트가 늦거나 아예 대응 못하는 경우가 있었습니다.

그런데 스벨드 이용하면, 정식 버전의 폰갭, 코르도바, 아이오닉 이를 모두 통합한 캐페시터로 빌드해서

하이브리드 앱을 단번에 만들 수 있습니다.

너무 너무 쉽게 하이브리드앱 만들어서 서비스 할 수 있습니다.

그리고 정식 라이브러리를 이용할 수 있게되어, 수많은 플러그인들을 적용할 수 있습니다.

쉽고, 코드양 적고, 하이브리드앱 만들수 있고 장점이 참 많습니다.

ps.

프로젝트 생성시 질문들

프로젝트 생성때 뭔 질문이 이렇게 많은지...

처음에는 

demo 설치합니다. 그리고 본격적으로 할때는 lib 버전 설치합니다.

그리고 좀 진지하게 하실분은 typescritp 선택합니다.

typescript 선택안하면, 하이브리드 앱의 경우 구형 폰에선 되는게 신형폰에서는 안되고

에전 익스플로러의 악몽을 폰이 제현하는 모습을 볼 수 있습니다. 

현업에서 사용할 꺼면 좀 빡세도 typescritp 쓰세요. 

그다음부터 다 y 합니다. 뭐 다 필요한 것 같습니다.

npm install 또는 npm i 

다들 뒤에꺼 하겠죠. 

그리고

npm run dev 

하면, 

https://localhost:5173 이주소로 접속하면 노드 서버가 실행되어서 실시간 디버깅 환경이 구성됩니다

vite를 이용해서 빠른 속도로 화면에 뿌려줍니다.

예전 처럼 저장하고 리플래시해서 확인하는 두번일하는 시대가 아닙니다.

파일 구조좀 보겠습니다.

vscode 로 보면

> .svelte-kit : 스벨트 구현 파일들 묶음

> node_modules : 노드 모듈들

> src : 웹페이지 개발파일들

> static : 이미지, css 등 고정 파일들

> tests : 테스트용인것 같은데 잘 모르겠습니다.

{} package-lock.json : 음 현재 프로젝느 기준으로한 node.js 모듈 상세 버전 키핑용 파일 / 엄한 버전 설치 안되게 버전 고정용

{} package.json 설치 모듈 명세

ts playwright.confg.ts : 테스트 설정

js svelte.config.js : 스벨트 설정 - adapter 설정 등

ts tsconfig.json. : typescript 설정

ts vite.config.ts : vite 설정

우리가 서비스를 만드는 폴더는 src 폴더

이안에 들어가서 보면

routes 가 있다. 설치시 데모나 lib 설치를 선택한경우라면 lib 폴더도 보입니다.

routes 폴더는 우리가 주소창에 url 로 접근하는 위치입니다.

svelte 는 그누보드 사용자에게 익숙한 폴더 파일 구조를 지원합니다.

일일이 설정형 restful api 처럼 파일에 주소 목록을 명시해줄 필요 없이

폴더 구조 그대로 url 구조로 접근하면 됩니다.

그리고 최종 접속 페이지는 +page.svelte 파일로 만들어주면 마치 index.html 페이지 호출하듯이 해당 파일을 호출한니다.

+page.svelte 파일을 열어보면

파일안에

<script lang="ts">

</script>

<div></div>

<style></style>

이렇게 한파일에 자바스크립트, html, css 가 동시에 존재합니다.

이렇게 해놓아도 나중에 컴파일하면 서로 자동으로 분리 됩니다.

그래서 따로 분리해서 개발할 필요 없이 한곳에 때러 넣으면 됩니다.

물론 컴포넌트나 js 라이브러리, json, 글로벌 css 설정 같은 별도로 분리해서 사용할 수도 있습니다.