221005_TIL

오늘 한 일

• 학원 왔다갔다 왕복시간만 3시간정도다. 이 3시간동안 버스와 지하철을 타면서 이동시간이 너무 아까워 코딩테스트를 아이패드로 계속 풀어보고 강의도 듣고 반복했다.

• 학원 수업시간 동안 canvas로 그림판과 저장기능을 구현했다.
• 남는 시간에 API에 대해 궁금해서 개념과 구현방법 등을 찾아봤다.
• 학원 끝나고 집에 와서 javascript 기초문법을 다시 한 번 돌아보며 복습했다.

---

function onDoubleClick(event) {
  const text = textInput.value;
  if (text !== '') {
    ctx.save();
    ctx.lineWidth = 1;
    ctx.font = '48px serif';
    ctx.fillText(text, event.offsetX, event.offsetY);
    ctx.restore();
  }
}

canvas.addEventListener('dblclick', onDoubleClick);

더블클릭 이벤트를 만들어서 더블클릭 할 때마다 html에 작성해둔 인풋 텍스트에 입력한 글씨를 도장처럼 캔버스에 나타나도록 구현해봤다.

ctx.save()를 이용하여 기존의 그림판에 작성하던 펜의 굵기의 현재상태를 저장해놓은 뒤에 ctx.lineWidth = 1; 로 해두어 text의 글씨 두께를 1로 고정해두었고 그 뒤에 펜의 두께가 도장의 두께와 같은 1로 되는 에러를 막기 위해 ctx.restore()를 사용해 아까 ctx.save()해둔 값을 복구시켜주었다.

function onSaveClick() {
  const url = canvas.toDataURL();
  const a = document.createElement('a');
  a.href = url;
  a.download = 'myDrawing.png';
  a.click();
}

html에서 save버튼을 만들어준 뒤 js에서 변수설정을 해주고 이벤트 리스너를 이용하여 위와 같은 콜백함수를 실행시켰다. onSaveClick 콜백함수는 canvas에 그린 그림을 url로 바꿔주는 canvas.toDataURL()함수, a링크로 그 URL을 보내주고 a.download 를 통해 저장 시 디폴트된 이름 값을 설정해주었다. a.click()를 사용하여 다운로드 창이 뜨게끔 가짜클릭 역할을 해주었다. a태그에 저런 유용한 속성이 있는 것을 그림판 앱에 사진저장이나 그림저장을 하는 기능을 구현하면서 알게 됐다.

---

느낀 점

• 학원 왔다갔다 하는 시간이 너무 아까웠다. 이 시간을 코딩테스트 문제를 풀어보고 하는데 사용하니 유용한 것 같다. 코드는 쳐 볼 수 없지만 아이패드와 펜슬로 수학문제 풀듯이 문제를 보고 펜으로 직접 써가면서 풀어보고 있는데 도움이 되는 것 같다.

• canvas를 이용한 그림판 만들기는 클론코딩 수업이지만, 이를 통해 처음 써보는 코드들도 있었고, 이런 코드들도 있구나랄지, 이렇게도 적용하는구나랄지, 이 사람은 코드를 이렇게도 짜네랄지 내게 분명히 도움되는 것들은 있었다.