위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.
아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.
아... 이번건 거의 매칭 되는 것이 없다 그나마 알아둬야 할 것이 아래와 같다
https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
오늘은 svelte가 데이터를 바인딩 함에 있어서 엘리먼트 속성을 다루는 것에 대해서 편안함을 느꼇다.
1. duration, currentTime
[그림 - 1]
duration과 currentTime을 바인딩 해둔 것을 볼 수 있을 것 이다. 하지만 이건 duration의 경우에는 video태그가 준비가 완료 되었을 때 확인이 가능한 값이다. 즉 비디오 소스를 읽어서 이 영상이 몇초짜리 영상입니다. 이때 발생하는 것이지 해당 태그가 렌더링(mounted)되었다고 읽을 수 있는 값이 아니다.
하지만 svelte는 읽어준다...
currentTime의 경우에는 해당 video의 위치를 변경할 수 있다. 예를 들어 5초 앞으로 뒤로 같은 처리를 할 수있게 된다는 것이다. 이게 양방향 바인딩이 된다니...
2. clientWidth, clientHeight
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdf3TWmemyueNDpHnUg_olhJSA__tfMkOkJ8X6XUmb2TY2iVWfngEC-WbUbGMU0ZECwevFpkMr4QwPI2jMKizG3KuJdUiKlqv2ggYtm6wbanWSgtkDuiP3_98efanwlc1MFkqxvCRcyNY/w542-h93/%25EC%25A0%259C%25EB%25AA%25A9+%25EC%2597%2586%25EC%259D%258C.png)
[그림 - 2]
이것도 참 골때린다 clientWidth와 clientHeight를 렌더링 시점에서 크기를 확인 하는 것이 아니라 변경까지도 감지해준다.
일반적으로 다른 프레임워크를 사용 하더라도, 첫 로딩시는 커녕 변경을 감지하기위해서는 resizeObserver와 같은 외장/내장 함수를 사용해야 한다.
그 외의 내용은 문법적인 차이라서 굳이 평을 하지 않겠지만, 위의 녀석들은 필요할때가 많은데, 코드가 지저분해지기 쉬운 녀석들이라 아주... 별로 인 것들이다 하지만 이걸 공짜로 해주다니... 공짜 점심은 있을지도 모르겠다.
위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.
아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.
댓글
댓글 쓰기