신비한 개발사전

WebAssembly는 코드지만, 우리 개발자가 직접 읽고 쓰는 프로그래밍 언어는 아니다. WebAssembly는 자바스크립트 외의 언어로 작성한 코드가 웹 브라우저에서 실행될 수 있도록 컴파일링된 특수한 코드다. 사람보다는 컴퓨터가 이해할 수 있는 바이너리 형태의 코드라서 우리가 직접 코드를 짜는 것은 아니다. C++, Rust, Go 등 웹개발을 위한 언어가 아닌 것들로 짠 코드도 웹브라우저가 이해하고 실행시킬 수 있도록 만들어진게 WebAssembly다. 기계 언어에 더 가까워서 자바스크립트보다 실행 속도도 빠르다고 한다. 브라우저가 자바스크립트를 돌리려면 먼저 자바스크립트 코드를 파싱을 하고, 이후 바이너리로 컴파일한 다음에야 브라우저가 읽게 되는데, WebAssembly는 애초에 바이너리 형태다..

Konva는 HTML의 요소를 쓰기 쉽게 만들어주는 라이브러리다. 캔버스 안에 오브젝트 하나 그리려고 일일이 lineTo()와 moveTo()를 쓰지 않아도 되는 편리함을 제공한다.  관련 라이브러리는 Konva 외에도 Fabric.js, EaselJS 등 다양하지만 Konva를 선택한 이유는 리액트에서 사용할 때 깔끔해 보여서다. Fabric.js가 제일 인기있는 모양이지만 샘플 코드에서 useEffect를 쓰는 것을 보고 Konva를 써보기로 했다. * 리액트에서 Konva를 쓰려면 konva와 react-konva 둘 다 설치해야 한다. 기본 구조Konva의 캔버스는 컨테이너인 컴포넌트 안에 각 그림을 컴포넌트별로 나뉘는 구조를 갖고 있다. 캔버스 오브젝트는 이 와 의 영역 안에 구현한다. ..