🔥🔥CANVAS 태그로 만든 ToDoList!!!!!!🔥🔥

1. 결과물 URL:https://toswm128.github.io/ToDoList-Contest/

2. 자기소개

저는 대구 소프트웨어 고등학교에 재학하고 있는 조민수라고 합니다.

웹개발을 지향하고 있습니다. 아직 부족한 실력이지만 노마드 코더의 훌륭한 영상을 보고 따라하며 바닐라 js에 관심을 가졌고 Html Canvas 태그로 재미있는 것들을 만들고 있습니다. 그러던 중 ToDoList 이벤트를 접하게 되어 만들게 되었습니다!

3. 서비스 소개

일단 Canvas태그를 사용하여 많은 애니매이션 기능이 있습니다.

CTRL(Control) 키를 눌러 맥의 스포트라이트처럼 ToDoList를 작성할수 있는 칸이 생깁니다. 다시 누르면 사라집니다. (글자수 제한 1 ~ 11자)

ToDo를 마우스로 포스트잇 처럼 옮길 수 있습니다. Canvas 태그밖으로 던지면 삭제도 할수 있으며 더블클릭을 하면 색이 바뀌며 완료한 일을 분간 할 수 있습니다.

또 다른 기능인 그림그리기 기능은 펜툴처럼 선을 그을 수 있고 "z"를 입력하면 뒤로가기가 됩니다.

4.개발 과정

02-13 ~ 02-15

약 2일 만에 완성했습니다.

온전히 Canvas만으로 화면을 구성하여야 했습니다. 우선 Canvas에는 Element의 요소가 없기때문에 좌표를 하나하나 저장하고 조건문을 이용하여 개발하였습니다. 어려운 문제는 없었지만 여러 기능들을 추가하면서 생기는 자잘한 문제들과 원인을 알수없는 버그들이 등장하여 저의 멘탈이 정말 탈탈 털렸습니다. 또 원래 Canvas로는 간단한 게임들을 만들고 있어서 스토리지에 저장하는 일도 서툴렀구요. 여러가지로 힘든 부분이 있었지만 방학이다 보니 넘처나는게 시간이라 틈틈히 노력했던거 같아요 가끔 정말 힘들때는 좋아하는 노래를 들으면서 힐링하는 시간도 가졌습니다.

3. 앞으로의 계획

이 프로젝트가 끝나면 이제 React로 ToDoList를 만들고 싶습니다.

사실 React로 ToDoList를 만들던중 이 이벤트를 알게되어서 허겁지겁 만들었습니다.

아직 바닐라 js도 부족하지만 빨리 React를 배우고 싶습니다!