Amada Coding Club

지난 시간에는 그림판의 그리는 과정을 나타냈고 [VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-그리기 패스트캠퍼스 강의에서 그림판 만들기 실습을 했는데 너무 흥미로워서 글로 남긴다. 그림판을 제작할 때는 HTML의 캔버스 태그를 이용한다. 코드에선 클래스를 사용했기 때문에 this문을 사용함. amadaclub.tistory.com 오늘은 그림판의 지우기 기능을 넣어보고자 한다. 나는 뭐 지우는 과정에 무슨 이전 그리기 과정을 불러와서 그려진 부분을 인식하고 클릭한 영역 내에 있는 그림을 지우는 이런 복잡한 과정을 거치는 줄 알았다. 근데 그냥 캔버스의 배경색으로 덮는 거였다 ㅋㅋㅋㅋ this.context.strokeStyle = this.eraserColor; //배경색으로 덮어버림..

패스트캠퍼스 강의에서 그림판 만들기 실습을 했는데 너무 흥미로워서 글로 남긴다. 그림판을 제작할 때는 HTML의 캔버스 태그를 이용한다. 코드에선 클래스를 사용했기 때문에 this문을 사용함. 본인 코드에 맞게 적절히 수정하길 참고: El로 끝나는 값-HTML태그 캔버스 작업을 하기 위해선 먼저 캔버스의 context를 가지고 와야 한다. context = 캔버스엘리먼트.getContext('2d와 3d 선택가능'); context는 2d와 3d 선택이 가능하다. 즉, 일반적인 2d작업뿐만 아니라 3d작업도 가능하다는 말! context를 가지고 왔다면 이제 canvas에 이벤트리스너를 등록한다. 그림판에 그림을 그릴 때 나오는 이벤트(행위)는 다음과 같다. 1. 그림판에 마우스를 누르면 그리기 시작(m..

[Eslint & Prettier] Eslint와 Prettier에 대해 알아보자 어느 JS강의를 보던 Eslint와 Prettier 설정은 기본 옵션으로 달고 시작한다. 도대체 이것들이 뭔데 다들 이걸 설정하고 시작하는걸까? Eslint Lint는 보푸라기라는 뜻으로 프로그래밍에서 에러가 있는 amadaclub.tistory.com 시작하기 전에 이 글 참고하시길 이번엔 Eslint와 Prettier를 설치하고 적용해보겠다. npm i -D eslint npm install --save-dev --save-exact prettier 먼저 eslint와 prettier를 설치한다. --save-dev는 -D와 같은 개발용에서만 사용하는 devDependencies 패키지로 설치하겠다는 의미이고 --sav..