Vue vs Svelte 간단하게 문법만 비교해보기

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.

아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.

 템플릿 문법

1. 문자열 (https://svelte.dev/examples#hello-world)

2. 속성 (https://svelte.dev/examples#dynamic-attributes)

3. html (https://svelte.dev/examples#html-tags)

 컴포넌트 스타일 (https://svelte.dev/examples#styling)

 컴포넌트 작성 (https://svelte.dev/examples#nested-components)

 이벤트 핸들링 (https://svelte.dev/examples#reactive-assignments)

 계산된 속성 (https://svelte.dev/examples#reactive-declarations)

 watch (https://svelte.dev/examples#reactive-statements)

 튜토리얼정도를 해보면서 느낀점은 vue에서는 해당 기능을 사용하기 위해서 data, watch, methods, computed 등등 코드에는 불필요한 선언(?)들이 필요 없어서 코드들이 간결해짐이 있다.

 위처럼 구역대로 나누는 것에 대해서는 호불호가 갈리는 생각이 있을 수 있지만, 내가 생각하는 단점은 관련있는 변수와 함수를 같이 보기 어려움이 있다는 것이다.

 코드는 웬만해서는 순서대로 보기 마련이고 중요한 것을 위에 작성이 되고, 복잡하거나, 꼭 보지 않아도 되는 코드들은 하단에 놓고 싶기 마련이다.

 뭐 물론 svelte처럼 구역이 없이 작성하는 것은 또 다른 문제가, 함수보다 변수가 덜 눈에 뜨이기 때문에 함수를 읽는 도중 어떤 변수하나를 놓치게 되면, 코드 전체를 파악 하는데에 문제가 발생 할 수 있다.

 하지만, 나는 svelte의 문법이 vue보다 보기가 편해보이기에 한번 학습을 해보도록 하려고 한다.

 위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.

 아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.