코드 땜장이

위의 코드는 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스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue

위의 코드는 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 b

위의 코드는 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보다 보기가 편

 같은 값인가에 대한 판단을 해주는 ==에 대해서는 예전에도 다루었던 적이 있다. https://sejiwork.blogspot.com/2021/03/blog-post_21.html    뭐 한 번 보면 == 이것이 왜 쓰면 안되는 지에 대해서 대충 느끼실 거지만 위의 것을 클릭하기 귀찮으신 분들을 위하여 짧은 예제를 작성하겠다.  짧은 코드지만, ==가 얼마나 불편한 녀석인지 감은 오실 것으로 보인다.  그렇다면 ===은 완벽 할까? 그렇게 생각한다면 아래 코드를 봐주시면 된다.  뭐 물론 NaN은 "숫자가 아닙니다."라는 뜻이긴 하지만 결국 전역에 붙어있는 변수이다.  이게 더욱더 불편한 것은 아래의 코드를 보자  null은 비교값이 진실이라는 것이다. null은 특정값을 가리키는 없다는 것인데, NaN처럼 거짓이 나오던 NaN이 참값이 나오던 일관성을 갖는 것이 더 맞다고 생각한다.  자 그러면 아래 코드를 보자. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is Object.is는 두 값이 같은지에 대한 판단이다. null과 NaN이 원시타입이 아닌 것은 다들 알 것이다. 진짜 값이 같은것을 판단해주는 지는 의문이다. ==, ===, Object.is 모든상황을 고려 할 수 있는가?? 나는 불가능하다. 개발하는 동안 ==보다 ===가 부작용이 덜 한 것은 알겠지만... 실버불렛이 없는 이상 무조건 쓰지 말아야 하는가에 대한 언급에 대해서는 동의 할 수 없는 상황이다.

 yield* 표현식은 다른 generator 또는 이터러블(iterable) 객체에 yield를 위임할 때 사용됩니다. 즉 내가 할 일을 다른녀석에게 양도할 수 있다! 아래의 코드를 보자 function * func() { yield [ 42 , 43 , 45 ] yield '424345' yield childFunc() } function * childFunc() { yield 42 yield 43 yield 45 } const iterator = func() for ( val of iterator ) { console.log( 'val' , val ) } 별거업는 코드이긴 하나, 작성 한 사람의 의도를 벗어난 코드 일 수 있다. 결과를 한번 보자 뭐 물론 이것이 의도 일 수는 있지만, 웬만해서는 안 그럴 것이다 원햇던 것은 func 함수 안에서의 iterator 각각각을 순회 하는 것을 원 할 수 있을 것이다. 자 그럴때 쓸 수 있는 키워드! function * func () { yield * [ 42 , 43 , 45 ] yield * '424345' yield * childFunc () } function * childFunc () { yield 42 yield 43 yield 45 } const iterator = func () for ( val of iterator ) { console . log ( 'val' , val ) } yeild*을 이용해보자. 간단하게도 순회의 단위를 바꿀 수 있다.