[직소퍼즐] 직소퍼즐 만들기 (1) - 캔버스에서 물체 드래그 n 드랍

index.html에 캔버스 하나 설정하고, 여기 드래그 n 드랍을 구현하려고 한다. 

DND는 그냥 라이브러리를 사용하기로 했다.

 

ts 세팅하고 사용하려고 하는데 tsc 컴파일을 하고 dist에 파일을 불러오니까 컴파일된 js 파일에서 import 할때 뒤에 js 가 빠진채 컴파일 된다. 크롬에서 불러올때 확장자가 없으니까 해당 파일이 없다고하고..

 

import { hi } from "./test";
console.log(hi);
//# sourceMappingURL=index.js.map

https://github.com/microsoft/TypeScript/issues/27287

Documentation on Modules is missing ".js" suffix in import statements · Issue #27287 · microsoft/TypeScript

 

어차피 source가 큰 파일이 아닐거라서 그냥 하나로 합치려고 하는데, webpack이나 다른 번들 라이브러리를 좀 알아봐야겠다.

 

시작 해보지도 못하고 환경설정에서 시간을 너무 많이 보내는게 참 스트레스..

 

결국 parcel를 사용했고, ts는 따로 설정 안해도 시작하기 메뉴얼만 보고 진행해도 컴파일 해주고 로컬서버까지 띄워주길래 일단  이걸로 진행하기로 한다(https://ko.parceljs.org/getting_started.html)

 

 

1. Canvas에 네모를 그려보자

 

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

캔버스(canvas)를 이용한 도형 그리기 - Web API | MDN

그림좀 그리려고 하니까 바로 아래 에러가 나를 반긴다.

 

`

Property 'getContext' does not exist on type 'HTMLElement'.ts(2339)

`

아래로 해결

https://stackoverflow.com/questions/58218597/property-getcontext-does-not-exist-on-type-htmlelement/58218739

 

 

검정 네모를 하나 만들었다.

저 검정 네모에 cursor: pointer를 주고 싶다. 이게 되나..?

 

 

 

2. 네모를 DnD로 옮겨보자 

 

이미 캔버스 라이브러리는 많아서.. 이런걸 사용하면 훨씬 쉬울 듯 하다.

예전에 펫프 다닐때 이걸 이용해서 뭔가 구현한 적이 있다. 그떄 깨달은 것은 쉬워보이는 것도 꽤나 코드량이 많아서, 캔버스 관련 작업은 라이브러리를 쓰는게 훨씬 낫다는 것을 알게 되었다. 회사도 나도...

 

일단 내가 해보고 안되면 때려치자.

https://konvajs.org/docs/drag_and_drop/Drag_and_Drop.html

HTML5 Canvas Drag and Drop Tutorial

 

설명은 아래 블로그가 깔끔한 것 같다.

 

https://codeboxsystems.com/tutorials/en/how-to-drag-and-drop-objects-javascript-canvas/

How to Drag and Drop Objects with JavaScript and HTML5 Canvas

예제 코드가 좋아서, 이걸 가지고 변형해서 사용할 예정이다.