Earn this, Earn it.

Svelte편 최근에 나는 svelte로 프로젝트를 진행하면서 관련 기술에 대해 관심 있게 보는 중이다. 대세는 리액트이지만 svelte의 편리함을 한 번 느껴보고 난 이후로 리액트에 손이 잘 안 간다. (그래서 더 위험하다... 사이드 프로젝트는 웬만하면 리액트로 하려고 하고 있다) 리액트를 공부하며 자바스크립트에 대해 더 이해하게 되는 것도 있듯이 스벨트를 공부하며 리액트에 대해 더 이해하게 되는 부분도 있는 것 같다. 그럼 이번 주에 무심코 지나갔던 부분들을 짚어보며 개념을 정리해보자. bind:html로 contenteditable 수정 내용 반영하기 공식문서에도 나와있는 내용이지만, contenteditable 특성을 줘서 HTML을 수정 가능하게 하였을 때, 이 값을 바인딩해서 처리하고 싶을 ..

TIL 느낌으로 이번 주 어려웠던 점들을 돌아보며 미처 공부하지 못한 부분들을 보고 넘어가려고 합니다. (모든 내용을 다 보고 정리하기보단 짧게 개념 위주로 훑어보고 기억을 상기시키는 용도로 시리즈를 매주 이어가볼 예정입니다 ㅎㅎ) Svelte편 svelte 애니메이션? 지난 주에 wordle 챌린지를 진행하며 애니메이션 구현에 대해 고민하였습니다. svelte는 애니메이션을 간편히 사용할 수 있도록 디렉티브를 제공합니다. animate:flip(First, Last, Invert, Play의 약자)는 시작 위치와 마지막 위치를 계산하고 애니메이션을 적용하여 변환하는 동작을 합니다. (이에 대해서는 다음에 기회가 되면 사용해볼 계획입니다.) 이는 DOM이 추가되거나 제거될 때 동작합니다. 따라서 word..