Earn this, Earn it.

요즘 들어 블로그 포스팅을 올릴 엄두가 안 나고 있다. 매주 주말 주간 회고를 작성하긴 하는데, 밤에 작성해서 그런지 감성적인 글이 되어버려서 자꾸만 사적인 공간에 보관되고 있다. 퀄리티는 조금 떨어지더라도 차라리 매일 배운 내용을 간단히 정리하는 글을 포스팅하며 정리해야겠다. Agora SDK로 화면 공유 구현하기 아무래도 협업 툴에서는 화면 공유가 필요하다. 말로 설명하는 것보다 직접 보여주면서 설명하는 것이 여러모로 효율적이기 때문이다. 이전 프로젝트(타닥타닥)에서 화면 공유 로직을 구성해본 바 있다. 그 당시에도 화면 공유는 생각해야 할 것들이 조금 있었는데 이번 프로젝트에서는 그 때의 경험을 바탕으로 다양한 상태 변화에 제대로 대응하기 위해 신경을 썼다. 특히 까다로웠던 점은 상태 관리이다. 예..

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

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