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

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

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

 컴포넌트 props (https://kr.vuejs.org/v2/guide/components-props.html)

 => svelte에서 지원하는 Spread props는 vue2.x버전에서는 지원 하지 않는다. 3버전은 아직 학습하지 않았기에 버전정보를 적어둔다.

 조건부 렌더링 (https://kr.vuejs.org/v2/guide/conditional.html)

 리스트 렌더링 (https://kr.vuejs.org/v2/guide/list.html)

 Await blocks (와 이건 진짜 골때린다 이거 너무 좋은거 아니야? vue에서는 지원하는거 본 적 없다.)

 해당 튜토리얼정도를 해보면서 느낀점은 세가지 정도 차이점을 느낄수 있었다. 

 1. Spread props는 있으면 편할지도 라는 정도지만 어차피 오브젝트로 감싸서 한번에 보낼수 있기에 딱히 있으면 좋고 없어도 괜찮지 이런생각이라 크게 언급하지는 않겠다.

 2. 조건부 렌더링, 리스트 렌더링이 vue에서는 디렉티브로써 지원을 한다. 즉 태그안에 작성되어야 하는 내용이다. 하지만 props와 html의 기본적인 속성들 등등으로 인해 v-if와 v-for를 찾는 것은 꽤나 귀찮은 행위가 될 수 있다.

 게다가 또하나의 문제점은 v-if와 v-for를 동시에 사용 하였을 때, 누구 먼저 해석될 것인가에 대해서이다. 뭐 물론 vue공식 가이드에 안내 되어있지만, vue의 2버전과 3버전이 다르다. 하지만 svelte의 경우에는 vue에서 template을 이용하는 것처럼 렌더링 요소에 관여되지 않을 요소로써 제공을 하고, 동시에 같이 쓰는 참담한 상황을 미연에 방지한다. 이러한 점은 프레임워크를 처음 이용해보는 초보자에게 학습곡선을 조금 완만하게 해주는 장치가 아닌가 싶다.

 3. Await blocks 이건 할말은 많지만, 내가 해당 말들을 조리있게 풀어쓸 수 있을 만한 능력이 없기에 조금만 적어 보도록하겠다.

 promise기반으로 렌더링이 된다는 것은 다들 알겠지만 promise는 세가지의 경우가 있다. pending, resolve, reject 여태까지의 나는 pending의 경우는 꽤나 처리가 귀찮아서 성공과 실패만 처리하는 경우가 많았다. 하지만 이것이 템플릿 레벨에서 처리가 된다니... 이것은 정말 뭐라할까 뭐라하지 머리를 한대 맞았다. 편하다라는 수준을 넘어서 여태까지 뻘짓을 해버렸구나 이생각까지 들정도이다. 뭐 물론 해당 컨셉을 컴포넌트로 작성 해보는 것도 어서 해봐야겠다.

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

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