농부처럼 코딩하기

화면에 그려지는 사각형, 화살표 등이 생성될때마다 이와 동일한 모양의 picking element를 생성해주고 있는데 마지막 picking element가 제대로 생성되지 않는 문제가 발생했다. useEffect(() => { updatePickingCanvas(); }, [pickingElements.length]);const updatePickingCanvas = () => { if (pickingContext) { pickingElements.forEach((element) => { pickingContext.drawImage(element.pickImage, 0, 0); }); } }; useEffect는 Component의 렌더링 동작이 수행된 ..

개발환경은 React, Typescript, SCSS를 사용하여 시작했다. 처음에 tailwindcss를 사용하려 하였으나 Canvas picking을 위하여 랜덤color를 key값으로 사용해야 하는데 tailwind에서 이 부분을 처리하기가 난해하여 불가피하게 scss를 사용하기로 했다. useEffect(() => { drawElement(); window.addEventListener("mousemove", onMouseMove); }, []);  제일 먼저 마우스 이동에 따라 Canvas에 선을 그려주려했는데 선이 제대로 그려지지 않았다. 로그를 보니 마우스 이동시 마다 path를 배열에 추가하고 있는데 이 배열이 늘어나지 않는다. 이것저것해보고 고민하다보니 closure의 특성때문..