Vue vs Svelte 간단하게 문법만 비교해보기 4 ( 바인딩 1/2 )

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

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

 오늘은 바인딩에 대해서 튜토리얼을 진행했다.

 해당 튜토리얼은 양이 너무 많아서 반절정도 끊어서 진행 하도록 하였다.

 https://kr.vuejs.org/v2/api/index.html#v-model

 https://vuejs.org/v2/guide/forms.html#Text

 https://vuejs.org/v2/guide/forms.html#Checkbox

 https://vuejs.org/v2/guide/forms.html#Multiline-text

 https://vuejs.org/v2/guide/forms.html#Select

 바인딩 요소가 꽤 많다. 으으으으.....

 그래서 좀 짤라서 하겟다 다음주에는 아주 많은 내용이다.. 저런

 오늘은 svelte가 데이터를 바인딩 함에 있어서 그리고 외부라이브러리 취급 방식에 대해서 좀 얘기 해볼것이다.

 1. numeric

[그림 - 1]

[그림 - 2]

 위의 그림 - 1의 결과를 보면 처음에 설정해둔 a, b의 값이 문자열이기에 a + b => ab로 표현이 되어있다. 하지만, input들을 변경 후에 a + b => a + b 로 표현 되는 것을 볼 수 있다.

 vue에서는 input의 이벤트를 숫자로 받을 것인지에 대한 키워드가 있다. v-model.number이런 방식이다.

 일단 svelte에서는 type에 따라서 바인딩 되는 값의 타입이 고정이 되는 것 같아서 아쉽다.

 2. group

[그림 - 3]

 그림 - 3에서 보면 checkbox와 radio가 서로 연관 되어있음을 표현 하기 위하여 bind:group이란 키워드를 써야 하지만 한번 제거 해보았다.

 결과는 조금 실망스러운 감이 있었다. 어떠한 동작도 하지도 않았다.

 물론 그럴경우는 없거나 적다. 체크박스의 경우에는 다중선택도 가능하다. true, false의 이지선다형을 지원하는 경우도 있다. 하지만 radio경우에는 여러가지의 선택지 중 하나는 선택해야 하는 상황이다. 궁이 group이라는 힌트가 필요할까? 라는 의문이 든다. (물론 어떤것도 선택하지 않는 선택지도 있다. <- 기본값이 없는 경우 (예외 처리를 하겠지....))

 checkbox의 경우에는 vue에서는 조금 더 특이하게 사용이 가능하다. vue에서는 v-model에 사용 되는 값이 배열인지에 따라서 여러개를 선택 가능한가? 라는 것을 지원을 하고 있고, 해당 값이 선택 되었을 때 가지게 될 값이 설정이 가능하다. (자세한 내용은 위의 checkbox 튜토리얼을 확인하기 바란다.)

 3. marked

 

 

[그림 - 4]

 그림 - 4에서 marked를 확인해보기 바란다. marked는 svelte에서 제공하는 라이브러리가 아닌, 외부에서 가져온 라이브러리이며, 해당 라이브러리는 마크다운을 html로 변경해주는 함수를 제공한다.

 단지 해당 라이브러리를 import 함으로써 script영역만이 아닌 템플릿 영역에서 사용 할 수 있게 된다. 나는 내가 제공하고자 하는 함수뿐 아니라 여러 함수들을 템플릿에서 사용하게 된다. 이건 독이 될 수 있지 않을까 하고 조심스럽게 생각 된다.

 나도 모르는 사이에 import한번으로 템플릿에서 사용하고, 있으니 말이다. this라는 키워드를 쓰고 있지 않으므로 어쩔 수 없는 영역일 수도 있지만.... 할말하않

 4. file

 

[ 그림 - 5 ]

 vue에서는 파일에대해서는 바인딩을 지원하지 않는다.

 하지만 svelte에서는 제공을 하고 있다. vue입장에서는 양방향이 어차피 불가능 하므로, 이벤트에서 꺼내서 사용 하는 것이 더 일관적이다. 라고 생각해서 지원하지 않는 것 같다.

 하지만 간단하게 사용이 가능하다는 것은 환영할 만한 일이다. 그것이 컨셉을 조금 무너트리더라도 말이다.

5. selectbox 기본값.

 

[ 그림 - 6 ]

[ 그림 - 7 ]

[ 그림 - 8 ]

 [ 그림 - 6 ], [ 그림 - 7 ], [ 그림 - 8 ] 각각은 html기본, svelte, vue에서의 select의 기본값 해석이다. 위에서 보면 vue에서만 기본값을 선택 안해주고 있음을 볼 수 있다. svelte가 조금 더 표준에 맞다? 라고 볼 수 있는 부분이다. 표준을 지키는 건 좋다. 하지만 브라우저별로 확인을 해볼 필요가 있다고 생각 되었다. 브라우저 별로 기본값을 선택되는지 걱정이 되는 부분이다. vue에서는 과감하게 기본값을 선택하지 않는 것을 선택 했다. 하지만 svelte의 경우 브라우저별 브라우저 버전별로 다르다고 한다면... 혼파망이다. 해당 프레임워크를 믿고 기본값(값을 선택해주세요)을 안 넣었는데, 브라우저 별로 다르다면.... 으... 상상하기 싫다.

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

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