블로그 이름

오늘은 Canvas 사용 중 자간이 안먹히는 현상이 있어서 수정하였다. var canvas = document.getElementById("canvas");canvas.style.letterSpacing = test.letterSpacing + "px";var ctx = canvas.getContext('2d');ctx.fillStyle = "rgb(200,0,0)";ctx.font = "bold 20pt";ctx.filText("test", 5, 20); 대충 위와 같이 되어있었다. canvas가 아닌 ctx 요소에 자간을 줘야하는데 canvas에 자간을 설정하여 적용되지 않았던 것. ctx.letterSpacing = test.letterSpacing + "px";  해당 코드로 변경하여 수정됨. 하..

오늘은 HTML FORM INPUT 이벤트에 대해 알아보았다. 주로 change 이벤트만 사용해서 다른 이벤트는 쓸 일이 없었는데, 값이 변경 될 때가 아닌, 값이 변경되기 전/후를 비교해야 하는 일이 생겼고, 때문에 값이 변경되고 난 뒤의 이벤트인 change 외의 이벤트를 찾아봐야 했다.  이벤트에서 발생할 수 있는 이벤트는 많다. 마우스, 키보드, 복사, 붙여넣기 등이 있다. 이 중 키보드로 입력할 때 발생하는 이벤트들만 적는다. 1. focus: input에 클릭이나 tab 등으로 포커스되었을 때 발생한다.2. keydown: 키를 눌렀을 때 발생한다.- copy: 복사할 때 발생- paste: 붙이기할 때 발생3. keypress: 키를 눌렀을 때 발생하지만 한글이나 기능키는 발생하지 않는 등 ..

이미지 파일을 업로드 하였는데, 이미지가 업로드 되지 않는 현상이 있었다. 디버깅을 해보니, change 함수가 두번째 업로드부터는 동작하지 않았다. input type='file' 에서 파일을 업로드하면 터지는 이벤트인 change 가, 동일한 파일을 업로드 할 때 안터지는 현상이 있었다.change 실행 함수에 로그를 찍어봐도 안찍힌다. 그냥 함수 자체가 실행이 안된다. onChange(@change) 함수는 value가 변할때만 작동한다고 한다. 같은 파일을 업로드하면 input의 value가 변하지 않는다. event.target.value 값이 변경되어야 하는데, 같은 파일을 업로드하면 해당 값이 변경되지 않아 change 이벤트가 터지지 않는다는 것이었다. 때문에 처음 change 이벤트가 터..