코드 땜장이

위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다. 시맨틱 슈거의 부재  이건 전에도 언급 된 내용이지만... 또 한번 말해보자면 select multiple인 경우에 문제가... 크다. 아래의 코드만잠깐 보고 넘어가도록 하자. < select multiple value = {flavours} onChange = {onChangeFlavours} > { menu . map ((flavour) => { return ( < option key = {flavour} value = {flavour} > {flavour} </ option > ); } )} </ select > const [flavours, setFlavours] = useState ([ " Mint choc chip " ]); function onChangeFlavours (event) { const newFlavours = []; const options = event . target . options ; for ( let i = 0 ; i < options .length; i++) { const option = options[i]; if ( option . selected ) { newFlavours . push ( option . value ); } } setFlavours (newFlavours);...

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  아... 이번건 거의 매칭 되는 것이 없다 그나마 알아둬야 할 것이 아래와 같다 https://vuejs.org/v2/api/#ref 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 [그림 - 2]  이것도 참 골때린다 clientWidth와 clientHeight를 렌더링 시점에서 크기를 확인 하는 것이 아니라 변경까지도 감지해준다.  일반적으로 다른 프레임워크를 사용 하더라도, 첫 로딩시는 커녕 변경을 감지하기위해서는 resizeObserver와 같은 외장/내장 함수를 사용해야 한다.  그 외의 내용은 문법적인 차이라서 굳이 평을 하지 않겠지만, 위의 녀석들은 필요할때가 많은데, 코드가 지저분해지기 쉬운 녀석들이라 아주.....

위의 코드는 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이란 키워드를 써야 하지만 한번 제거...

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  오늘은 이벤트에 대해서 튜토리얼을 진행했다.   https://kr.vuejs.org/v2/guide/events.html   https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events  위의 내용만 같이 비교해봐도 될 정도이니 양이 그렇게 많지는 않다.  오늘은 svelte가 이벤트를 핸들링 하는 방식중에 눈에 띄는점이 두가지가 보였다. 1. 자연스러운 이벤트 버블  자식컴포넌트에서의 이벤트를 부모컴포넌트에게 전달하는 경우는 종종 있다.  => 자식 이벤트를 본인을 걸쳐서 부모에게 이벤트를 전달하는 경우 위의 경우에서 자신이 해당 이벤트를 소비 할거라면 이벤트 리스너를 걸고, 부모에게만 전달 할 것이라면 위처럼만 작성하면 된다. 뭐 물론 둘다 아니라면 작성자체를 안하면 되지요.  자 그러면 뷰에서는 어떻게 해야 할까요? 뷰에서는 해당 이벤트를 $emit 함수를 이용 하여 전달은 해줘야 한다.  2. 자 이제 아래코드를 보자.   아... 이건 좀 실망 스러운 형태이다. 대부분의 컴포넌트들에서 이벤트를 상위로보내는 행위는 자주 일어난다. 뭐 물론 내가 뷰에 익숙한 상태여서 그럴지도... 이벤트 하나를 보내기 위해서 위처럼 svelte 라이브러리에서 이벤트 발생시키기 위해서 createEventDispatcher가져와서 createEventDispatcher를 실행해서 이벤트 발생기를 생성하고, 해당 그 발생기에 이벤트를 상세하게 입력하는 것은 엄... 한 가지일을 위해서 세 가지 일을 하는것은 꽤나 불편하겠지....  위의 코드들을 vue스타일로 작성한 코드는 아래에 ...