설정es6-string-html을 설치하면 템플릿 리터럴의 html 코드 하이라이팅이 됩니다.(prettier는 굳이 안 써도 사용하고 있겠죠?)​이렇게 템플릿 리터럴 앞에 /* HTML */ 주석을 달면prettier에서 코드포맷팅을 해주고 es6-string-html 이 코드 하이라이팅을 해줍니다. (style 태그 안의 css도 포맷팅&하이라이팅 됨)​하나하나 createElement로 노드를 조작하면, 복잡해질수록 가독성과 유지보수가 너무 어렵기 때문에 템플릿 리터럴을 사용하도록 하겠습니다. 템플릿 리터럴을 사용했을 때의 단점이 어느정도 해소됩니다.그리고 vite로 vanilla -> ts로 프로젝트 생성해줍니다.​https://ko.vite.dev/guide/시작하기​https://ko.vite..

리액트에서 자주 쓰이는 훅은 바로바로 useEffect이다. 이것의 정의를 [리액트 딥 다이브]라는 책을 참고하여 정확하게 내리자면... useEffect는 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이다. 그리고 이 부수 효과가 '언제' 일어나는지보다 어떤 상태값과 함께 실행되는지 살펴보는 것이 중요하다.  ..라고 한다. 알려진 것처럼 생명 주기 메소드를 대체하기 위해 만들어진 것도 아니고, 생각보다 쓰기 어려운 것이 바로 이 useEffect라는 것이다. useEffect는 자바스크립트의 proxy나 데이터 바인딩, 옵저버 같은 특별한 기능을 통해 값의 변화를 감지하는 것이 아니고 렌더링 할 때마다 의존성에 있는 값을 보면서 이 의존성의 값이 이전과 다른 게..

fabric.js에서는 객체를 이동하고, scale을 변경하고, 회전을 시키는 등의 컨트롤러를 제공한다. 그런데 잘 생각해보면... 모바일 앱에서는 컨트롤러가 아니라 핀치 제스처를 사용하여 편집했을 것이다.     fabris.js v5의 이벤트엔 touch와 같은 터치스크린에 대응되는 이벤트들이 있었는데, (사용해본 적은 없다.)v6에는 사라졌다.  그래서 다른 라이브러리를 통합하여 사용하기로 했다. 하나하나 직접 하려면 너무 힘들겠지만 라이브러리를 사용하면 비슷하게 구현할 수 있다. const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);// ... fabric.InteractiveFabricObject.ownDefaults = ..

1. fabric.js v6 html5의 canvas는 잘 다루면 좋긴 한데... api가 로우레벨이라 그냥 사용하기는 어려워서 보통 라이브러리를 사용한다.내가 애용하는 것은 fabric.js인데...  기본적으로 객체를 선택할 수 있는 기능이 있기 때문에 쓰기 시작했다. 그런데 최근 v6이 드디어 업데이트되었고, 여러 변경 사항들이 있지만 Promise를 지원하는 게 가장 마음에 드는 부분이다.나는 비동기적인 함수가 사용될 때 콜백함수보다는 프로미스의 async/await 방식을 선호하는데,구버전은 콜백함수만 지원하였기에 프로미스를 직접 만들어서 구현해야 했다.하지만 이제 그럴 필요 없다.그리고 typescript의 타입 지원이 더 좋아졌다. 이외에도 이런 저런 개선이 되었는데 아직 공식 문서가 업데이..