코드 땜장이

 지난 번글로 position sticky를 소개 해보았다. 하지만 어떻게 써야 할지 감이 안잡하는 분들도 있을 것이다. 뭐 물로 사용 해분 본들도 있겠지...  그래서 이번에 scroll-snap-type과 같이 이용하여 재밌는 스크롤 액션을 만든것을 소개해 보겠다. 위의 코드를 간단하게 확인해보면 확인해야 할 키워드는  scroll-snap-type : y mandatory ; scroll-snap-align : start ; position : sticky ; 위 세 가지의 css속성이다. position: sticky만 사용 하는 경우 title의 위치를 스크롤되는 도중 어디에 위치 시킬지 결정 할 수 있는 것은 지난 포스트에서 안내를 하였다. scroll-snap-* scroll-snap 속성은 스크롤하는 행위를 멈추었을 때, 스크롤의 오프셋을 조정 할 수 있는 속성이다. 따라서 scroll에 영향을 받는 position: sticky속성과 케미가 좋다. scroll-snap-type scroll-snap-type은 어느 축에 맞출지와 엄격도를 지정 할 수 있다. 위의 속성정의에 따르면 y축에 scroll-snap을 맞추고 항상 snap효과를 주라는 요청이 되어있다. scroll-snap-align scroll-snap-align은 스냅 되는 대상의 영역(snap area)의 어디 기준으로 맞출지에 대해 결정을 해준다. 위의 속성으로 보면 article 클래스의 상단 영역에 맞추고자 하는 것이다. 조금만 더 깊에 들어가자면 snap area, snap position, scroll container와 같은 단어의 뜻을 알면 좋긴 하다만, 일단은 사용예제를 한번 보고 어떻게 써볼지에 대해 고민해보는것이 좋을 듯 하다.

  fixed fixed의 경우 컨테이닝 블록을 따져보아야 한다.  1. 뷰포트 * 뷰포트라는 말을 처음들어본 분이 있을지 모르니 간단하게 기기 해상도에 따른 화면 사이즈라고 보면 된다. 2. 특이상황에서의 조상      1) transform이나 perspective (en-US) 속성이 none이 아님.      2) will-change 속성이 transform이나 perspective임.      3) filter 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)      => filter가 none일 때에는 특정 조건이 뭔지 파악이 애매함.      4) contain 속성이 paint임. 위의 조건에 따라 생긴 컨테이닝 블록을 기준으로 top, right, bottom, left 요소를 사용 할 수 있다. position absolute의 컨테이닝 블록이 될 수 있다. 새로운 쌓임 맥락을 생성한다. sticky  가장 난해한 규칙과 행동을 보여주는 position 속성일 수 있다. sticky속성인 경우에는 스크롤이 가장 중요하다. 뭐 물론 테이블에도 이용이 가능하지만, 웬만해서는 요즘에는 테이블을 쓰지 않으니 설명은 생략 하겠다. sticky는 위의 예제를 보는 것이 좀 더 해당 속성에 잘 설명이 될 수 있다. 위의 예제 처럼 스크롤이 해당 영역을 지나가기 전에는 relative처럼 행동을 하지만 스크롤로 지나간 후 부터는 스크롤영역을 따라가는 것을 확인 할 수 있다. 이걸로 다음 포스팅에서는 재미있는 예제를 보여주도록하겠다.

 position을 주제로 하는 것은 꽤나 까다로운 내용이다. position을 바꿔 주는 것만으로 해당 엘리먼트의 특성이 매우 변하기 때문이다.  간단하게만 나열하면, 가장 큰 변경은 컨테이닝 블록이 변경 된다. top, left, botton, right 속성을 정의 할 수 있다. 새로운 쌓임맥락이 생성 된다.  꽤나 내용이 많고 응용 또한 많고 조심해서 써야 하는 주제이기 때문에 천천히 진행하고자 한다.  모든 태그들의 기본적인 position은 static이라고 보면 된다. 아직까지 필자는 다른 포지션을 갖는 태그는 본적이 없다. 뭐 물론 셀렉트 박스의 열린 옵션들 스크롤이나 파일 오픈시의 시스템 다이얼로그는 예외로 하자 그것들은 DOM으로써 제어가 불가능 하니....  위의 언급 중 컨테이닝 블록, 쌓임맥락을 처음 들어보는 분들도 있을 것이다. 간단하게만 설명 하겠다. 뭐 자세한 내용은 추후에 내용을 담을 수 있도록 노력해보겠다.  특정 요소의 크기나 위치에 관여 하는 것은 무엇인가? 아주 추상적이기 때문에 다시 예를 들겠다. 특정 태그 A태그의 height: 100%를 지정하였을 때, 어떠한 요소 기준으로 100%로라는 것일까? 바로 상위 부모 일수도 있고 더 위의 부모 일수도 있고, 뷰포트일 가능성도 있다. 즉, 특정 태그 A의 크기 위치에 관여 하는 것이 컨테이닝 블록이다.  쌓임 맥락은 무엇인가? A태그와 B태그가 겹치는 공간이 생기면 어떻게 할 것인가? 다들 z-index는 들어보았을 것이다. A태그와 B태그가 z-index가 같고 같은 부모를 공유 하고 있을때, 어떤 태그를 상위에 노출 시킬지에 결정 할 수 있다. 쌓임 맥락은 그 Z축을 개념화 한 것이다. static  위의 설명은 조금 새긴 했다. 가장 간단한 static을 설명 하자면, 그냥 컨텐츠의 일반 속성에 따라서 엘리먼트가 위치 한다. top, right, bottom, left 어떠한 요소도 사용이 불가능 하...

 요즘이 아닌 최소 5년전에 개발을 하던 분들은 아래의 코드들이 꽤나 익숙 할 것이다.  <a href ="javascript:" onclick =" foo () " > javascript: </a> <a href ="#" onclick =" foo () ;return false; " > # </a> <a href ="javascript:void(0)" onclick =" foo () " > javascript:void(0) </a>  요즘에는 함수를 실행하기 위해서 a태그를 이용하는 사람들은 거의 없을 것이다. 그러다 보니 위의 코드가 어색해 보인다. 당연하게도 요즘에서는 권장 되지 않는 방법이기도 하다. 하필 예전에는 왜 함수를 실행하기 위하여 a태그를 사용 하였을까?  생각해볼 만한 것은 button태그가 정상적으로 작동 안했다면? 이라고 생각이 들 뿐이다. 브라우저 버전에 따라서 버튼 모양이 달라졌다던가? 아니면 button의 기본 동작이 브라우저 별로 달랐다던가 하는 말이다.    위의 이미지만 확인해도 javascript: <- 이 것이 무엇을 뜻하는지는 감이 올 것이다. 당연하게도 위와 같은 행위는 잘 하지 않을 것이지만, 이런것이 가능하다. <a href ="javascript:void(0)" onclick =" foo () " > javascript:void(0) </a>  a태그를 이용하여 함수를 실행하기 위해서 사용 하기 위해서는 a태그 클릭시 기본적인 기능인 페이지이동을 막아야만 하였다. 따라서 위와 같이 javascript: pseudo protocol의 이용하되 평가값을 undefined를 이용 하여 페이지 이동을 막았다.  또한 예전에 href를 정의 안하는 꼼수는 사용 하지 못했다. 정의 안하면 현재 ...

가끔 퍼블리싱을 하다보면 vue.js의 root엘리먼트가 항상 있어야 하는 것은 거슬리는 일이기도 하다. 혹은 관련이있어서 같은 부모를 가져야 하는 태그들이 있을 수 있다. 물론 아직도 display: block, inline만을 사용 하고 있다면, 딱히 불편함은 없을 수 있겠지만... grid와 flex없이는 이제 퍼블리싱 못하는 몸이 되어버렸다... < div style =" display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); " > < div style =" background: red; " > test1 </ div > < div style =" background: green; " > test2 </ div > < ul > < li style =" background: blue; " > 1 </ li > < li style =" background: purple; " > 2 </ li > </ ul > </ div > 위 코드의 결과를 보자. 딱 보아도 잘못 된것만 같은 무언가가 만들어졌다. < div style =" display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); " > < div style =" background: red; " > test1 </ div > < div style =" background: green; " > te...

 웹 개발자라면, 특히나 프런트엔드 개발자라면 wasm은 익히 들었을 것이다. 하지만, 재미로는 많이들 사용 해봤겠지만, 주니어 개발자나 c/c++, rust를 습득하지 않았거나 오래 되신 분들은 재미로 해보기에는 조금 벅찰 수 있으니 포스팅을 작성한다.  위의 즉 이 글은 주니어 개발자, c/c++, rust를 사용하기 싫은 분 들이 대상이다. 아주 간단하게 맛만 보여드릴 테니, 자세한 내용은 다른 포스팅을 보고 습득 하시거나 책을 추천 드린다.  프런트엔드 개발자라면 최소 TypeScript를 들어 보았거나 들어보았을 것이다. 이 포스팅에서는 wasm을 TypeScript를 이용하여 작성 할 것이다.  해당 예제를 하기에 앞서서 최신버전의 Node.js를설치하기 바란다. npm init npm install --save @assemblyscript/loader npm install --save-dev assemblyscript npx asinit .  자 여기까지 왔다면 위와 같은 파일들을 얻을 수 있다. /assembly/index.js // The entry file of your WebAssembly module. export function add ( a : i32 , b : i32 ): i32 { return a + b ; }  위와 같은 함수를 볼 수 있다.  간단하게 위의 코드를 설명 하자면, add라는 함수를 외부에 노출을 시키며, a, b라는 인자를 받으며 각각의 타입은 i32(부호가 있는 32비트의 정수)이고, 인자 a, b를 받아서 i32타입으로 값으로 리턴한다.  간단하게 설명을 해보았는데, 답이 되었으면 좋겠다.  자 여기까지만 보면, 이걸로 속도테스트가 되나?? 이생각이 들 것이다. 맞다. 당연안되겠지 그러니 다음 함수를 추가하자. // The entry file of your WebAssembly module. export functi...

 htm에 파일을 드래그앤 드랍을 하여 파일을 업로드 하는 것을 그렇게 어려운 일은 아니다. 그래도 해당 기능이 있으면 꽤나 편한 기능이기에 방식을 소개하면서 해당 코드를 공유 하고자 작성 한다.  여기서 신경써야 하는 이벤트는 두가지 있다. drop이벤트와 dragover이벤트이다. drop이벤트는 딱보아도, 해당영역에 무언가 떨어졌을 때이다  드랍쉽을 생각하면 된다.  당연하게도 drop이벤트에서 파일을 확인 할 수 있게 된다. 자 그러면 dragover는 왜 확인해야 할까?  drop 이벤트도 그렇지만 dragover의 이벤트의 파일 끌기의 브라우저 기본기능이 일반적으로 파일을 오픈하는 행위라서이다. 간단하게만 생각하면 파일을 놓는 순간 파일이 다운로드 될테이다. drop의 기본기능만 껏다가는 계속 파일을 다운로드 받게 될 것이다.  자 아래의 코드들을 확인하자.  특이점은 세가지정도로 분류 할 수 있다. 1. html(루트 엘리먼트) 에 이벤트 리스너. 2. drop-zone이 label이면서 input[type=file]태그 3. drop-zone에 drop과 dragover를 제외한 이벤트 리스터들.  아래는 해석이다. 1. html(루트 엘리먼트) 에 이벤트 리스너.  난 드래그앤 드랍 파일기능을 제공 하는 사이트들에서 꽤 불편하게 느꼇던 것이 뚱뚱한 손가락 오류 였다. 조금만 빗나가면 수많은 파일들이 다운로드 받아졌다. 따라서 기본기능을 제거하기위해 루트엘리먼트에도 이벤트리스너를 달았다.  2. drop-zone이 label이면서 file태그 파일 드래그앤 드랍만 제공할 경우 꽤나 불편한 상황이 올것이다. 특히나 모니터를 여러대 사용하거나 멀티윈도우를 사용하는 경우엔... 그래서 drop 영역을 클릭시 input type="file"이 해당 이벤트를 받을 수 있도록 영역을 라벨로 처리 하였다. 참고로 input type="file"은 display none을 ...

 예전에는 float을 이용하여 layout잡는것에 많이 사용해왔다. 하지만 grid, flex가 생겨나에 따라서 다루기 어려운 float을 더이사 사용 할 일이 없어졌다. float은 간단히 소개 하면 자기 자신이 어떤위치에 있어야 하는가? 를 결정 할 수 있는 속성이다. 다음은 mdn의 소개이다. CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. * 출처 :  https://developer.mozilla.org/ko/docs/Web/CSS/float 하지만 아무리 보아도 위의 설명으로는 더 이상 사용 할 일이 없어 보인다. flex, grid로 해결 할 수 있다. 그렇지만 deprecated된 속성이 아니다. 그렇다면 float으로 밖에 할 수 없는 행위가 있을까? 그렇다 있다. 애초에 아래의 내용을 보면 여태까지 float으로 레이아웃을 잡았던 것이 이상하게 느껴질 정도이다. ( 뭐 나도 그렇게 잡아왔고, 그 당시에 html, css 책 들에도 그런 방식으로 소개 되어왔다. ) 위의 효과를 줄 수 있는 방법은 float이 유일할 것으로 보인다. 물론.... width를 고정 시키고 margin과 padding을 사용하여 노가다를 한다면 가능하겠다만... 하지만 위의 효과를 바라는 디자이너도 없겠지.. 자세한 내용은 mdn에서 참고 할 수 있으니 링크 달아 두겠다. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images

 웹사이트들을 이용하다보면 아래와 같이 해당 사이트의 메인 이미지와 제일 상단에 제목이 표현 되는 사이트들이 많다. 하지만 아래보시다 시피 따로 처리를 해주지 않는 이상 header가 내용을 보는 동안에 불편을 끼칠 수있다.  옛날에는 스크롤의 탑기준이 어디에 왔는지에 따라서 헤더를 없애거나 백그라운드를 표현을 하면서 아래처럼 표현해왔다.   옛날에는 그랬지만 IntersectionObserver가 추가 됨에 따라서 좀더 편리하게 위의 기능을 처리 할 수 있다. const observer = new IntersectionObserver ((entries) => { console . log ( 'entries' , entries) } , { root : document . querySelector ( '.contents' ) , threshold : [ 0.1 , 0 ] }) const target = document . querySelector ( '.banner' ) observer . observe ( target ) ; 사용 방법은 위와 같다.  IntersectionObserver( handler, options ) handler : 위의 설정기준으로 target엘리먼트가 루트엘리먼트에서 보이지 않을때와 10프로 미만 혹은 10프로 초과 혹은 보이지 않을때 호출이 된다. 호출시 첫번째 인자로 IntersectionObserverEntry[]를 전달해준다.  options : root 감시대상들의 상위요소이다.                    threashold  임계값 목록이다. 아래는 IntersectionObserver를 이용하여 header에 백그라운드를 추가하는 샘플 코드입니다.  아래와 같은거 말고도 제일 스크롤이 제일 하단에 충돌 ...

 javaScript를 이용 하지 않고, 위 처럼 만들고자 한다면 어떤것들이 필요 할까? 1. 초침을 움직이는 애니메이션 2. 초침을 멈출 수 있는 변수. 3. 초침을 초기화 할 수 있는 함수.  위 세가지를 어떻게 구현 할 것인가? 1. 초침을 움직이는 애니메이션  => 간단하게 transform: rotate, animation을 이용하면 0deg -> 360deg로 변경 됨에 있어서 몇초 동안 걸리게 할 지 처리가 가능 하다. 2. 초침을 멈출 수 있는 변수   => 멈출 수 있는 변수 여기서 문제다. html, css에는 변수가 존재 하지 않는다.   html에서 true, false의 값을 가질 수 있는 것을 생각 해보면 checkbox를 이용하는 것으로 해결 할 수 있다.  애니메이션을 도중에 멈추기 위해서는 animation-play-state를 사용 할 수 있다. 즉 checkbox를 체크 되어있으면 animation-play-state: running; 체크 되어있지 않으면, animation-play-state: paused;를 이용 하면 된다. 3. 초침을 초기화 할 수 있는 함수.  => 초기화를 하기위해서는 무엇이 필요한가? 초기화 버트을 눌렀다는 이벤트가 필요하다.   의사 클래스인 :active를 이용해보자! :active는 mdn에서는 아래와 같이 설명 되어있다. :active   CSS   의사 클래스 는 사용자가 활성화한 요소(버튼 등)를 나타냅니다.  마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다. :active는 버튼을 누른 순간에 활성화 되는 클래스이며, 해당 시점에 애니메이션을 잠시 제거하는 것만으로 초기화를 할 수 있다.  코드와 만드는 영상은 아래에 첨부하였으니, 여기까지 읽었다면 한번 코드는 확인 해보는 것을 추천 한다....

특정 태그를 세는 것을 javascript 없이 할 수 있을까? 할 수 있다. 아래의 속성을 이용 하면 되는데, css에서 숫자를 새고 해당 값을 content에서 이용 할 수 있다.   https://developer.mozilla.org/en-US/docs/Web/CSS/counter() 자 그러면 위의 속성을 조금 이용해보도록 하자. 위 처럼 체크박스를 새는 것도 가능 하다. 위의 코드를 확인하면, css부분이 중요하므로 css를 확인해보면,

 기본적인 학습 예제는 끝났다고 판단이 되었다. 이번에 화부터는 간단하게 예제 파일들을 작성 해볼 것이다.  어떤 프로젝트를 하던지 날짜를 입력 받는 행위는 언제든지 하는 것 같다.  따라서 데이트피커를 작성 해보겠다.  아직 문법들이 익숙하지도 않고, 생각 해보니 scss 설정도 할 줄 모른다. 여러가지 환경 구성 먼저 익숙해져야 할 필요성이 있고,  또한 computed가 방식이 vue와 svelte가 좀 다르다보니, 전혀 반응이 없는등... 아직 깊은 연구가 더 필요 해 보인다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.  아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다. https://vuejs.org/v2/api/#v-slot https://vuejs.org/v2/api/#slot  이번 예제도 딱히 이렇다할 만한 내용은 확인이 불가능 하였다. 어떤게 더 좋다 나쁘다 이런 감정조차 없는 그저.... 아 vue랑 svelte가 이정도 문법 차이가 있구나 정도랄까요...  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.  아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  참고로 MOTION, TRANSITIONS, ANIMATIONS, EASING, SVG, ACTIONS의 예제는 건너 뛰었습니다. https://vuejs.org/v2/guide/class-and-style.html  이번 예제는 딱히 이렇다할 만한 내용은 확인이 불가능 하였다. 어떤게 더 좋다 나쁘다 이런 감정조차 없는 그저.... 아 vue랑 svelte가 이정도 문법 차이가 있구나 정도랄까요...  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다. https://vuex.vuejs.org/kr/guide/state.html https://vuex.vuejs.org/kr/guide/getters.html https://vuex.vuejs.org/kr/guide/mutations.html https://vuex.vuejs.org/kr/guide/actions.html  위의 가이드를 보면 vue는 상태에 가해지는 행위별로 나누어서 관리하는 것을 볼 수 있다.  하지만, svelte에서는 어떤 상태인지에 대해서 관리가 중접적으로 이루어지는 것 같다. 무슨말이 냐면, 읽기전용의 상태, 읽기쓰기가능한 상태, 다른상태들과의 관계가 있는 상태.  위의 두가지 방식 중에 뭐가 더 편할지는 아직은 판단이 불가능하다. svelte의 경우에는 중간 중간에 읽기전용 이였는데, 쓰기가 되어야 하는 경우도 있을 것이고, vue의 경우에는 어떤 상태들이 mutaion이 제공하고 있는지 확인 하기 꽤 귀찮기 때문이다.  하지만 svelte에서는 해당 상태를 참고하지 않게 되었을 때, 처리를 추가적으로 해줄 수 있는데, 이게 라이프사이클에서 mount함수의 리턴값이 unmount때 실행 되는 함수가 되듯이 처리하였다. 꽤나 신경 쓴것을 느낄 수가 있었다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다. https://vuejs.org/v2/api/#mounted https://vuejs.org/v2/api/#beforeDestroy https://vuejs.org/v2/api/#mixins https://vuejs.org/v2/api/#beforeUpdate https://vuejs.org/v2/api/#updated https://vuejs.org/v2/api/#Vue-nextTick-callback-context  이번 리뷰가 라이프사이클이지만.... mixin이라는 녀석이 svelte에서는 신기하게 구현 되어있는 것을 볼 수 있었다.    위의 그림을 보면, onDestroy에 있는 예제 이지만, utils.js파일이고 해당 코드에서 라이프 사이클에도 관여할 수 있고, 안쪽에 있는 함수 data등등을 노출 시켜 줄 수 있다.   이건 vue관점에서 보면 mixin으로 볼 수 있을 것이다. 저 안에 onDestroy가 어떻게 동작 하는지 한번 뜯어보고 싶긴 하다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 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스타일로 작성한 코드는 아래에 ...

위의 코드는 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을 이용하는 것처럼 렌더링 요소에 관여되지 않을 요소로써 제공을 하고, 동시에 같이 쓰는 참담한 상황을 미연에 방지한다. 이러한 점은 프레임워크를 처음 이용해보...

위의 코드는 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처럼 구역이 없이 작성하는 것은 또 다른 문제가, 함수보다 변수가 덜 눈에 뜨이기 때문에 함수를 읽는 도중 어떤 변수하나를 놓치게 되면, 코드 전체를 파악 하는데...