현업을 잠시 비운사이 Svelte5로 본 업그레이드가 이루어졌습니다.
svelte5 버전이 나온지 좀 되었는데, 사용해보면 버그가 많았었는데, 이버그들을 수정해서 안정화 버전이 나왔다는 의미이기도 합니다.
그와 동시에 svelte 사이트의 개편도 있었습니다.
글자가 명조체 처럼 좀 느끼해졌습니다. 전 그전 폰트가 심플해서 좋았는데 말이죠...
아무튼 runes 의 등장은 화려했으나, 더 심플해졌다고 해야할까요?
스토어 store를 사용하고 실시간 변경을 $: 변수명 이렇개 해서 사용했었는데,
이것을 좀더 명확하게 실행 순서를 정의하겠다는 의도를 접하고 복잡해지겠구나 란?
생각을 했었는데, 이를 통해 오히려 다른 복잡한 것들이 더욱 단순해졌습니다.
기존에 실시간 변동을 수신?하려면
let value = 0
$: value ... 뭐 이런식으로 $: 를 사용해서 간단하게 정의해서 수신해서 사용했었습니다. 이건 해당 페이지 내의 변수로도 그리고 별도로 store로 정의한 변수를 사용하면 글로벌 처럼도 사용할 수 있었습니다.
예를 들염 이런상황
쪽지가 수신되면 수신된 쪽지의 수량을 앱 상단 알림 위에 숫자로 표시하고, 알림 페이지로 넘어가거나 내 상태 표시하는 페이지로 넘어가면 거기에도 알림이 몇건 왔고, 확인 안한 건은 몇건이다, 뭐 이렇게 여러 페이지나 컴포넌트에서 동시에 수신되게 하려면, 마치 글로벌 변수로 등록해놓고 사용하는 것 처럼 store로 만들어서 사용했었습니다.
그런데 이게 순서가 꼬일때가 있습니다 그러니까
동시에 수신된것을 가지고 또다시 연산해서 다른 행위를 할때 순서대로 실행해야하는 상황에서 꼬일 수가 있었던 거죠? 그래서 철저하게 순서별 실행이 필요할때는
별도의 함수를 만들어서 리턴 값을 받아서 실행하게 그러니까 async await 등으로 그전 실행이 완료된 후에 다음 실행 이런걸 만들어서 사용하기도 했었습니다.
프로그램이라서 스크립트가 순서별 실행이 맞기는한데 javasctipt는 기본적으로 비동기라서, 문제가 예약 실행 같은 경우 순서를 정하기가 애매모호 했습니다.
$: 를 이용하면 실시간 수신을 만드는게 쉽긴 했느데 말이죠..
그런데 이것을 runes라는 개념을 이도입해서
변수 정의를 runes로 하는 방식으로 순서를 도입하게 됩니다.
let count = $state(0)
이렇게 하면 $state 함수로 선언을 해주면 최초로 실시간 수신 받겠다고 하는 거고요.
let doubled = $derived(count * 2);
그리고 이렇게 $derived 함수로 그전 선언한 count를 포함해서 선언을 해주면
2번째로 실시간 수신하겠다는 선언이 되게 됩니다.
함수로 스코프 한번 감싸 줌으로 인해서 순서를 정하는 방식을 채택한 것이된거죠.
더 복잡해졌죠?
아닙니다. 더 단순해진 겁니다.
어짜피 그전에도 $: 를 사용한 선언에서 순서를 간제하려면 함수를 정의하는 방식을 사용했어야 했습니다.
그래서 더 많은 코드가 필요했죠.
그리고 store와 같은 글로벌 변수를 실시간 수신하려면 store 선언을 해주고
사용하는 등의 별도의 store 선언도 해줬어야했습니다.
그런데, 간단하게 $state, $derived로 줄어들게 된겁니다.
$derived 은 $derived 로 정의된 변수를 포함해서 새변수를 2중 3중 계속 만들 수 있습니다.
그리고 더욱 반가운 점은: 결국 코드가 더 줄어듬
부모 컴포넌트와 자식컴포넌트간의 변수 주고 받기가 단순해졌다는 점입니다.
RUNES는 실시간 수신 변수를 글로벌 변수처럼 사용합니다.
실은 그전에도 글로벌 변수로 정해서 쓰면 되지 그랬었는데, 순서가 필요한 변수 정의 때문에 글로벌 변수만 사용하면 순서 꼬임 때문에 제약이 있었습니다. 그래서 store 남발은 순서 고민 못하는 초보나 하는 실수 중 하나였습니다.
그런데 이젠 runes 덕분에 $state 나 $derived로 정의한 변수를 다른 컴포넌트에서 $props로 선언에서 불러와서 마음껏 순서 걱정없이 사용할 수 있게 되었습니다.
헐 개발하기 더 쉽고, 그리고 코드량도 확 줄어든 샘입니다.
$effect 의 경우도
onMount와 onDestroy tick 처럼 페이지 시작할때, 페이지 나갈때, 그리고 별도 이벤드 있을때 실행 등 구분이었는데 걍 $effect로 통일해서 사용할 수 있게 되었습니다.
onMount와 onDestroy tick 은 사용하려면 꼭 import 를 해서 써줘야하는 코딩을 신경쓰거나 코딩을 해줘야했는데, 코드도 줄어들고 그리고
안의 변수 그러니까 예를 들어
목록 페이지 열때, 페이지 번호가 들어가는데, 그 페이지 번호 변하면 다시 실행하고 이런 것이 걍 페이지 번호 변경되면 수정되게 걸어 놓을 수 있게 되었습니다.
runes의 도입으로 코드가 더 단순해 졌습니다.
처음에 runes 도입으로 svelte가 react 스러워 진다고 하면서 svelte더 어려워지는거 아니냐는 걱적을 하는 지인들도 몇몇 있었는데,
까고 보니, 더 명확해지면서 더 단순해졌네요.
역시 기대를 저버리지 않는 svelte 입니다.
svelte는 코딩 호흡이 짧은 사람에게도 좋지만,
저처럼 현실 로직을 많이 복잡히게 구현하고 싶어하는 복잡러에게
많은 복잡한 일들을 수월하게 도와주는 좋은 프로그램입니다.
프로그램 자체가 수월하기 때문에 오히려 복잡한 로직을 때려 넣어서 개발해도
호흡이 딸리지 않게 되는 거죠.
내가 만들려는 프로그램의 복잡도가 너무 높다 하시는 분들은
svelte로 개발하길 추천 드립니다.
runes 덕분에 더욱 단순하고 명료해져서, 열일 할 수 있습니다.
