[svelte] SVELTE 프리뷰

다음 프로젝트를 개발하기 위하여 필요한 기술들을 리서치하고 있었다.

언제나 vue.js로만 만들수도 없고, 좀 더 규칙에 얽매이지 않고 순수한 모습의 도구를 사용해야할 시기가 왔다고 예감이 들었다.
너무 마이너한 프레임워크를 제외한 것들 세가지는 다음과 같다고 생각한다. (앵귤러는 의도적으로 제외)

• react.js
• vue.js
• svelte

이정도 쯤인데 이번에는 svelte가 어떤것인지 좀 알아보기로 했다.

먼저 지금까지 개발해오면서 체크해봐야할 항목들을 목록으로 만들어보았다.

• css 클래스 작동방식
• 스토어
• 라우터 종류
• 타입스크립트 지원
• 빌드와 프로덕션 (코드스플릿)
• 템플릿 문법
• 타 컴포넌트로의 통신과 이벤트 전달
• 웹 컴포넌트 지원

이 항목들을 하나씩 집중하면서 살펴보았다.

스타일시트

스벨트의 컴포넌트는 여러개의 엘리먼트를 넣는것이 가능하기 때문에 vue 처럼 컴포넌트에서 class props 사용하는건 안된다.
그래서 값을 그냥 props로 넘기고 변수값으로 사용하는 방향으로 스타일시트 작성방식을 조금 고쳐야 할것이다.

컴포넌트 내부의 요소를 스타일링 하고 싶다면..

다음과 같이 :global()을 이용하면 접근 가능하다.

.app {
  :global(.foo) {
    border: 1px solid red;
  }
}

브라우저에서 표시된 클래스와 셀렉터를 살펴보니 foo {RANDOM_ID} 형식으로 되어있고, 부모의 클래스 속에 자식 클래스를 셀렉팅 하는 방식이다보니 자식 컴포넌트에다 엘리먼트를 감싸는게 좋지 않을까 싶다.

커다랗게 보면 vue와 사용하는 방식은 비슷하지만 컴포넌트 특성에 의해서 조금씩 작성하는 방식이 달라질 뿐이다. (vue에 비해서 불편할 수 있고, 편할수도 있을것이다.)

템플릿 문법

외부의 특수무나를 조합하여 문법을 구성한다. ide에서는 매끄럽게 자동완성이 되지않아 사용하는게 조금 귀찮은 수준이다.

코드의 형태는 그닥 나쁘지 않은듯.. php에서 사용하는 템플릿 문법과 비슷하다.
이것은 적응의 문제..

스토어

스토어의 구성은 대단히 단순해보이는 인상이다.
간단한 예제를 작성해보면서 파악해보니 pinia랑 비슷한 형대로 사용할 수 있으며 그보다 더 단순하게 느껴진다.
하지만 로직은 직접 만들어야 할거같아 보이는 인상이다.

스토어의 데이터를 직접 고칠 수 있는 방법도 제공되어 있고, actions이나 getters 역할들에 대한 도구들도 다 준비되어있다.

구조가 강제되어 있지않아 자유분방하게 구조를 만들 수 있어보인다.
이게 너무 자유분방한 수준으로 풀어놓은 상태이다보니 설계를 잘 해야할거 같다.

타입스크립트 지원

일단 svelte 프로그램이 단순한 구조라서 그런지 미리 세팅해둘만한 설정은 상대적으로 복잡하게 느껴지지 않는다.
거의 자바스크립트를 순수하게 작성하는 방식이나 마친가지라서 타입스크립트에 대하여 상당히 관대하게 느껴진다.

웹 컴포넌트

사용하는 방식이 일반적인 자바스크립트랑 흡사해서 아무 코드에다 customElements.define('media-source', MediaSource) 같은 형식으로 넣어서 사용해버리면 작동된다. vite에서 먼저 조정해줘야 하는 작업같은건 없고 그냥 바로 사용이 가능하다.

주의해야할 점은 define 선언이 되어있는데 또 선언을 하면 오류가 나니 다음과 같이 중복선언은 피해줘야한다.

if (!customElements.get('media-source'))
{
  customElements.define('media-source', MediaSource);
}

타 컴포넌트 이벤트 처리

값을 자식에게 내리거나 부모에게 올리는 일 모두 가능했다. 꽤 괜찮은 방법으로..
이벤트 호출은 vue에 비해서 좀더 네이티브한 모습으로 처리하는거라서 코드 작성이 꽤 귀찮은 편일 것이다.
하지만 이벤트를 전달하는 방법도 존재해서 좋아보인다.
그리고 이벤트 모디파이어라는 방법도 존재해서 preventDefault같은 기능을 vue와 비슷한 방식으로 사용 가능하다. (하지만 사용하는 문자는 다르니 문서를 참고해야한다.)

참고 URL: https://beomy.github.io/tech/svelte/events/

라우터

• https://v3.ci.routify.dev/
• https://github.com/AlexxNB/tinro

svelte 는 주로 spa방식의 라우터가 많이 보여서 상대적으로 히스토리 방식의 라우터는 취약해 보였다. 아직까지 마음에 드는 라우터를 찾지 못해서 svelte 사용을 꺼려하고 있는 편이었는데.. ㅠ

이번에 tinro라는 라우터를 찾게 되었는데 이건 상당히 좋아 보인다. 기본적인 기능을 다 갖추고 있고, hash, history, memory 방식도 다 지원한다.
여태까지는 파일이나 특정 배열에다 규칙을 짜맞추는 방식을 사용해왔는데 이것은 컴포넌트로 구조를 직접 만드는 방식이라서 프로그램 구조가 상당히 심플하게 되었다.
사용하는 입장에서 잘못 설계하면 대단히 뒤죽박죽이 되는 편이라서 쓰기나름일 것이다.

빌드 및 프로덕션 서버

vite로 빌드하는 편이라서 작동 자체는 무난하게 되는 편이다.
빌드된 파일들이 전부 assets 속에 전부 들어가기 때문에 규모가 커진다면 양이 대단히 많아질거라 생각된다. 그래서 vite.config 영역에서 좀더 디테일하게 작성해야하지 않을까 생각한다.(용도와 타입을 나누어 디렉토리를 나눈다던지..)

라이브 서버 돌리는것도 다른 프레임워크와 비슷한 수준으로 돌아가는 편이며 프록시 서버 같은건 좀더 테스트 해봐야할지도..

SSR은 어떻게 나오는지 테스트 해보고 싶어졌다.

정리

프리뷰 해보면서 느꼈던 인상은 자바스크립트답게 자유롭게 구조를 구현할 수 있고, 새로운 규칙들을 강제하는것보다 그저 자바스크립트를 사용한다는 기분으로 코드를 작성할 수 있어서 개인적으로 즐거웠다. (다만 컴포넌트와 템플릿은 강제된 규칙이 필요하며 이런 요소는 어느정도 꼭 필요하다!)

목록에 있는 항목들은 전부 괜찮은 방법으로 구현이 되었고 남은것은 SSR 정도일 뿐이다.

커뮤니티와 레퍼런스, 적용사례가 부족하지만 도전욕구가 높아져서 이걸로 프로그램을 만들고싶기도 하다.
아직도 리엑트는 스타일시트 사용법에 대하여 여전히 불만을 가지고 있어서 더욱 svelte에 흥미가 끌리기도 한다.

이걸로 웹 컴포넌트 개발을 좀더 수월하게 하는것도 좀 살펴보고 SSR이 어떻게 동작하는지도 좀더 살펴보고 앞으로 이걸로 사용할것인지에 대하여 고려해봐야겠다.
만약 이걸로 사용하기로 작정한다면 앞으로 만들어지는 컴포넌트들은 전부 svelte로 만들어지겠지.. ㅎㅎ 아니면 포팅하기도 할수도 있고..