[Canvas App] 단계별 Canvas 라인 드로잉
단계별 진행 Canvas 드로잉의 Best Practice를 알아가기 위해 한번에 모든것을 구현하지 않고 단계별로 나눠서 진행을 하고 있습니다. 컴포넌트 기본이 되는 캔버스 컴포넌트를 제작해주었습니다. 최종적으로 원하는 방향은 ~ ~ 과 같이 단방향 사용성을 목표로 두고 작업을 진행하였습니다. 간단하게 canvas 드로잉을 위한 속성값과 이벤트들을 받았습니다. 단계적으로 진행되어 추후 더 받아야할 타입들은 추가될 예정입니다. 사이즈 캔버스는 width(너비) 와 height(높이) 속성값을 받는데, 해당 값은 숫자가 입력되면 픽셀(px)로 적용이 되어 캔버스의 크기를 설정하게 됩니다. ( width와 height는 ref 를 통해서 설정을 할 수 있도록 바꾸었습니다. ) 이벤트 마우스(onMouse.....
프로젝트를 시작하며... 처음 시작은 HTML의 canvas 태그와 스크립트를 사용해서 웹 그림판을 만들어보고 싶었었습니다. 그 후에 그림판의 기능을 어느정도 데모로 만들어보니 레이어 관리와 여러가지 툴들을 제공해주는 앱( 요즘 많이 사용되고 있는 여느 디자인 툴들과 같이)을 만들어 보고 싶어 개인 프로젝트를 진행하게 되었습니다. 이번 프로젝트의 목적은 기획, 디자인, 개발까지 혼자서 진행하면서 프로젝트 프로세스의 전반적인 흐름을 익혀가고, 캔버스를 활용하여 관련된 다양한 기능들을 구현해보는데에 있습니다. 프로젝트 초기 세팅 프로젝트는 컴포넌트 재 사용성을 고려하여 개발하기 편한 싱글페이지 어플리케이션을 만들 수 있는 React 라이브러리와 Typescript를 사용하여 진행합니다. Create Reac..