1. 날씬한 Svelte
먼저 스벨트는 2016년경에 Rich Harris가 개발한 자바스크립트 웹 애플리케이션 개발 프레임워크입니다. 즉, 리액트, 뷰, 앵귤러와 같은 웹 프레임워크 대신 쓸 수 있습니다.
실행하는 방법은 아주 간단합니다.
2. 왜 Svelte를 써야할까?
Svelte는 회사에서 사용하고 있어 이번에 처음으로 사용해보게 되었습니다. React를 많이 쓰는 이 시점에 왜 Svelte를 써야하는지 궁금했습니다. 몇 주간 직접 사용해보고, 구글링해본 결과 아래와 같은 근거로 인해 svelte를 사용한다고 생각했습니다. 개인적인 견해 + 공식적인 지표입니다.
1. 다른 프레임워크보다 더 적은 코드로 같은 기능을 구현할 수 있습니다.
아래의 지표를 보면 svelte의 코드 수는 매우 적은 것을 알 수 있습니다.
2. svelte는 웹 애플리케이션 컴파일러입니다.
아까 전에 프레임워크라고 언급했었는데 공식문서에서는 컴파일러라고 소개하고 있습니다. 그 이유는 코드를 런타임에 해석하지 않고, 컴파일 시 미리 최적화된 JS 코드로 변환하기 때문입니다.
svelte는 컴파일을 했기 때문에 라이브러리 코드가 거의 없습니다.
React로 웹 서비스를 빌드, 제작 후 배포하면 유저가 웹 사이트에 들어올 때 애플리케이션을 구성하는 개발자가 작성한 코드와 react 코드, 이렇게 총 2가지 종류의 코드를 다운받아야 합니다.
하지만 Svelte는 코딩 후 배포 시 svelte가 알아서 코드를 분석하고, 브라우저가 바로 이해 가능한 JS 코드로 컴파일합니다. 즉, 브라우저에게 별도로 svelte가 무엇인지 설명할 필요가 없고, 유저가 애플리케이션 구성 코드 외에 svelte 코드를 또 다운받을 필요가 없습니다.
이러한 이유로 인해 React는 기본적인 라이브러리 코드가 140kb이지만, svelte는 고작 3kb입니다. 그래서 svelte가 라이브러리가 사라지는 프레임워크라는 말이 언급되는 것 같습니다.
3. 스벨트는 로드 시간이 짧습니다.
기존의 Angular, React, Vue는 모두 런타임 환경에서 돌아가기 때문에 해당 프레임워크를 돌리기 위한 엔진이 항상 코드에 같이 있어야합니다. 그러다보면 사용하지는 않지만 포함되어 있는 코드가 있을 수 있고, 1줄의 코드 적용을 위해서라도 반드시 라이브러리가 전부 포함되어야 합니다.
하지만 svelte는 꼭 필요한 프레임워크만 코드에 포함시켜 번들 크기가 작습니다.
좀 더 자세히 말하자면, .svelte 파일에 컴포넌트를 정의할 수 있고, 해당 파일에는 JS, HTML, CSS 등을 넣을 수 있습니다. svelte 컴파일러는 .svelte 파일을 JS와 CSS로 컴파일하고, 이 과정에서 컴파일러는 꼭 사용하는 기능만을 코드에 포함시킵니다.
4. 가상돔 없이도 반응성을 제공해줍니다.
이러한 동작이 가능한 이유는
- 최상위 수준의 컴포넌트 변수가 변경되는지 추적하고,
- 값이 변경되면, 전체 컴포넌트가 아닌 영향을 받는 부분에 포함되는 DOM만 업데이트 하기 때문입니다.
참고로, 1단계에서 함수 내부에만 있는 변수는 추적하지 않습니다.
이처럼 다른 대부분의 프레임워크와 달리, 애플리케이션 상태와 DOM을 동기화하는 작업이 필요하지 않기 때문에 더 효율적으로 DOM을 관리할 수 있습니다.
Svelte는 변수 값 할당을 계측하여 돔을 업데이트합니다.
= 연산자를 통해 트리거를 발생시키고, $: 을 통해 센서를 감지하고, 최종적으로 코드를 통해 반응성 동작을 하게 됩니다.
- 1. addCount 함수 내 할당 연산으로 트리거가 발동하고,
- 2. count의 변화가 센서($:)에 의해 감지되고,
- 3. 센서 감지 후, 동작 코드에 따라 콘솔에 메시지를 출력합니다.
반응성을 사용할 때 주의할 점은 할당에 의해 트리거가 되기 때문에 자바스크립트 배열 메서드를 직접 사용하지 않고, 재할당을 해주는 방식을 사용해야 합니다. 자바스크립트 배열 메소드를 사용하면 Svelte가 변경을 감지하지 못해 자동으로 업데이트가 발생하지 않기 때문입니다. 또한 배열 메소드를 직접 사용하면 불필요한 렌더링이 발생되어 성능 저하가 발생할 수 있기 때문입니다.
5. 양방향 바인딩을 제공합니다.
.svelte 파일에 정의된 최상위 수준의 변수가 해당 컴포넌트에 대한 상태이고, 묶인 변수의 값이 변경되면, 연결된 폼의 내용이 업데이트됩니다. 양방향으로 데이터가 바인딩되기 때문에 폼 내용이 변경되면 연결된 변수의 값이 자동으로 변경됩니다.
3. Svelte는 어떻게 동작하는가
- .svelte 파일에 컴포넌트를 정의합니다. JS, HTML, CSS가 해당 파일 안에 있습니다.
- 스벨트 컴파일러는 이러한 파일들을 모아서 bundle.js와 bundle.css 파일로 만듭니다. 각각은 JS 코드와 CSS 규칙만을 담고 있습니다.
- 모든 컴포넌트에 영향을 미칠 수 있는 전역 스타일은 global.css 파일에 정의되고, index.html은 global.css 파일과 스벨트 컴파일러가 만든 2개의 번들 파일을 포함합니다.
- 웹 브라우저는 HTML 파일을 불러와서 애플리케이션을 실행합니다.
4. 직접 사용해보면서 느낀 Svelte와 React의 차이점
1. 코드가 짧습니다.
앞에서도 언급했듯이 코드가 눈에 띄게 짧습니다.
2. 별도 라이브러리 없이 반응형 프로그래밍이 가능합니다.
React에서는 반응형 state를 위해 useState를 사용해야하지만, Svelte는 그저 선언 후 사용하면 됩니다.
3. 가독성이 높습니다.
React에서는 반복되는 것을 보여줘야할 때 map을 작성하곤 했는데, svelte에서는 each 구문을 사용하면 됩니다. 개인적으로 key를 사용하지 않아도 되고, map을 사용하지 않아 조금 더 가독성이 좋다고 느껴졌습니다. map을 사용할 때 key에 고유값을 주지 않았다거나 key를 주지 않았다거나 하는 오류를 자주 볼 수 있었는데 그런 번거로움이 사라졌다고 생각합니다.
또한 기본적으로 작성해야하는 보일러 플레이트가 적고, JS, HTML, CSS를 작성하는 부분이 <script>, <style> 태그 등으로 확실하게 명시되어 있어서 가독성이 좋다고 느꼈습니다.
4. 모든건 .svlete 파일 하나로 끝낼 수 있다는 것도 매력적이였습니다.
CSS를 지역 한정으로 쓸 수 있어 네이밍이라던가 CSS가 중복되어 누락되는 등에 대한 고려를 하지 않아도 되서 좋았습니다.
5. props를 전달하는 과정이 매우 간단합니다.
그저 export로 props를 전달받고 사용하면 됩니다. React에서 props를 넘겨주고 넘겨받는 코드를 작성해야했던 방식보다는 훨씬 간소화되었다고 생각했습니다.
6. 전역 상태를 관리하는 store가 내장되어 있어 별도로 설치가 필요 없습니다.
React의 경우 Redux와 같은 상태 관리 라이브러리를 설치하여 사용해야했지만, svelte는 자체적으로 store가 내장되어 있습니다. 하지만 더 큰 프로젝트나 관리해야하는 상태가 많은 경우에 RX라는 라이브러리와 같이 사용한다고 합니다. 실제로 svelte 공식문서에서도 RX와의 궁합이 좋다고 나와있더라구요.
7. sveltekit을 활용하면 라우터 처리가 아주 쉽습니다.
React에서는 라우터 처리를 위해 browserRouter로 제일 상위 컴포넌트를 감싸고, App 컴포넌트 내에서 Routes와 Route를 사용하여 path에 맞는 element를 보여주기 위한 코드를 작성해줘야 했습니다.
하지만 sveltekit을 활용하면 그저 src에 routes 폴더를 생성한 후 해당 폴더 안에서 경로에 맞는 파일을 작성해주면 됩니다. 또한 +page.ts를 사용하면 필요한 데이터를 초기에 미리 가져오는 preload 기능도 사용할 수 있습니다.
그럼에도 불구하고,
이처럼 svelte의 장점이 많은데도 아직까지 이런 의문이 생기는 것 같습니다.
1. svelte는 과연 대규모 앱에도 적합한가?
애플 뮤직과 이케아 svelte를 사용하고 있는 것을 확인할 수 있습니다. 하지만 아직까지 많은 큰 기업들은 svelte를 사용하고 있지 않습니다.
2. 운영 주체가 기업이 아닌데, 안정적일까?
react는 페이스북이 지원하고 있고, 기업 내에서 직접 사용할 목적으로 관리되고 있습니다. 그만큼 계속 유지 및 관리하기 위한 자금이 준비되어 있죠. 하지만 스벨트는 커뮤니티에서 관리되고 있어 핵심 개발자들의 열정이 얼마나 오래갈지 보장할 수 없습니다.
참고 자료
'Svelte' 카테고리의 다른 글
| Rest API method 관련 코드 utils로 생성하여 관리하기 (0) | 2023.10.30 |
|---|---|
| [svelte] $app/stores에서 제공되는 Page 활용하기 (0) | 2023.10.30 |
댓글