농부처럼 코딩하기

현재 두가지의 picking 기능을 구현해야 하는 상황이다. 대략적인 HTML코드를 살펴보자. {drawElements.map(element) => { return  가장 앞쪽에 있는 Picking_Canvas에 drawElement의 image 데이터를 그려주고, 실제 화면에 보여지는 element들은 각각의 Canvas를 가지며 drawElements로 관리된다. 현재 drawElement에 대한 Transform을 처리해야 하는 상황인데 선택되는 부분에 따라서 translate, rotate, scale을 구현해야 하는 상황이다.DrawElementCanvas Component 내부에서 edit UI를 생성하는 것은 간단하나 문제는 가장 앞쪽에 존..

Rotate 구현 시 마우스 드래그에 따른 회전이 자연스럽지 않은 문제가 있었다. 처음 구현 시 마우스의 이전위치와 현재위치값의 변화량으로 element의 rotate값을 변경해줬다. 코드 자체는 문제가 없으나 ui상으로 마우스가 도형 위쪽에서 좌->우로 Drag할때와 도형 아래쪽에서 좌->우로 Drag할때 적용되는 angle값이 반대로 적용되야 자연스러운 움직임을 보여줄 수 있을 것이다. 상->하로 Drag되는 경우도 현재 마우스의 위치가 도형의 어디에 위치해 있느냐에 따라 다른 계산을 해줘야 우리가 원하는 동작을 볼 수 있다. 그래서 현재 element.getBoundingClientRect()을 사용하여 CenterX, CenterY를 구하고, 이를 이용해 도형기준 마우스의 현재 위치에 따라서 다른..

pickingElements.forEach((element) => { pickingContext.save(); pickingContext.translate( element.translate.x + element.rect.width / 2, element.translate.y + element.rect.height / 2 ); pickingContext.rotate(15 * (Math.PI / 180)); pickingContext.translate( -element.rect.width / 2, -element.rect.height / 2 ); const ..

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

.Next 14.0.4 버전 기준입니다. 홈페이지에서 닉네임을 검색하면 유저페이지로 이동해 유저의 정보를 보여주는 방식인데 react에서 사용했던 것처럼 useSearchParams를 사용하여 닉네임 정보를 url에서 가져오려고 하였더니 문제가 server component를 client component로 바꿔야 한다는 것이였다. 이후 여러 시도를 해보았다. 1. useSearchParams (react훅은 사용 불가) 2. localStorage, sessionStorage (window 객체를 사용할 수 없음) 3. zustand (useRef쓴다고 안됨, 내부적으로 사용하는거 같음 1번과 동일 이유) 결과는 모두 불가.. server component에서는 사용할 수 없는 방법이였다. 이것 이외에..

홈 logo 애니메이션 처음에는 useEffect의 dependency array에 trigger값을 주어 애니메이션을 컨트롤 했는데 애니메이션 함수가 둘 이상 실행되는 문제가 발생하여 아래와 같은 로직으로 수정하였다. useEffect(()=> { setInterval(()=> { const animate = () => { // logo animation requestAnimationFrame(animate) } animate() }, 10000) }, []) setInterval에서 주기적으로 애니메이션 재시작을 위한 함수를 호출해주고 프레임 마다 동작은 requestAnimationFrame함수를 사용하여 지속적으로 데이터를 처리할 수 있게 구현했다. 그리고 토글키를 넣어서 애니메이션을 on/off..

먼저 간단하게 구조를 보면 다음과 같다.Draw메인 Canvas에서 Draw Element를 그려준다. 하나의 요소를 다 그렸다고 판단되면(mouseup event 발생 시) 해당 요소의 크기에 맞게 Draw Canvas를 생성하고 브라우저 상 동일한 위치에 그려준다. 이와 동시에 Picking Canvas에도 동일한 요소를 그려주는데 여기서는 Canvas가 아닌 Picking Canvas내 이미지로 그려줘야 한다.Picking Canvas에 이미지를 그릴 때 Canvas Context의 getImageData로 imageData를 가져와서 putImageData로 Picking Canvas에 그려주면 기존 이미지 위치 위에 새로운 이미지가 겹쳐진다면 사각형 영역 내 그려지지 않은 빈 공간이 기존 이미지..

Canvas로 선을 그리고 그 여러개의 선들을 각각 편집하기 위해서는 선들을 선택하는 동작이 필요하다.이를 위해서는 각각의 선(후에 도형, 글씨, 이미지)을 새로운 Canvas에 그려주고 Canvas를 선택하여 처리해야한다. 먼저 선의 모든 path정보를 저장하는 배열을 생성한 뒤 /* main_canvas */path.forEach((pos) => { if (pos[0] > max_x) max_x = pos[0]; if (pos[0] max_y) max_y = pos[1]; if (pos[1]  현재 canvas의 영역 내 선이 그려진 영역을 image로 저장한다. 해당 정보를 새로운 canvas에 넘겨준다.  /* line_canvas */ const imag..

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

// terminal npx create-react-app my-app --template typescript create-react-app을 사용하여 프로젝트를 만든다 이때 --template typescript를 추가하여 typescript용 create-react-app을 생성할 수 있다. 이후는 tailwindcss 공식홈페이지 > Getting Started > Installation > Using PostCSS를 참고한다. https://tailwindcss.com/docs/installation/using-postcss Install Tailwind CSS using PostCSS - Tailwind CSS Installing Tailwind CSS as a PostCSS plugin is ..