무찌르자 단팥빵 무찌르자 단팥빵

canvas size 이해devicePixelRatio(dpr)은하나의 css 픽셀을 그릴 때 사용되는 장치의 픽셀 수이다. dpr이 다르더라도 보여지는 모습이 달라지지 않도록 구현하는 방법을 알아본다.내용의 출처는 맛있는 코딩 님 강의에서 가져왔다.     const canvas = document.querySelector('canvas');canvas.style.backgroundColor = 'gold';const ctx = canvas.getContext('2d');const dpr = window.devicePixelRatio;const canvasWidth = 400;const canvasHeight = 400;canvas.width = canvasWidth * dpr;canvas.height..

jquery 확장 메서드 [셀렉터를 이용한 확장 메소드] 문법 : $.fn.메소드명 사용방법 : $(selector).메소드명()$.fn.HTMLTagRestore = function(){ var value = this.val(); if(this.is("input") || this.is("textarea")){ this.val(value.replaceAll('a', 'A').replaceAll('b', 'B')); } return this; // 함수 체인 }; $("input").on('input',function(){ $(this).HTMLTagRestore(); }); $("input").HT..

한글 입력시 이벤트 중복 호출 해결 방법 cjk(중국어, 일본어, 한국어) 문자는 브라우저에서 처리하는 과정이 한 단계 더 필요하다. 따라서 한국어 입력시 이벤트가 중복 호출되는 현상이 생긴다. 이를 해결하기 위해 isComposing 이라는 이벤트 속성을 사용한다. isComposing 은 글자가 조합 중인지 boolean을 반환한다. 아래는 isComposing 사용 예시다. const inputEl = document.querySelector('input'); inputEl.addEventListener('keydown', event => { if(event.key === 'Enter' && !event.isComposing){ console.log(event.isComposing); console..

부동소수점 오류 현상 const a = 0.1; const b = 0.2; console.log(a+b); // 0.30000000000000004 소수점이 있는 실수를 이진수로 표현할 때 이진수로 표현하지 못하는 소수가 발생하여 컴퓨터는 가장 근사치의 값이 저장된다. 고정 소수점 또는 부동 소수점 을 사용해 이를 해결한다. 부동 소수점을 표현하는 방식으로 일반적으로 IEEE에서 표준으로 제안한 방식을 사용한다.( 부호비트(1bit), 지수비트(8bit), 가수비트(23bit) ) 하지만 부동 소수점 계산에는 정밀도가 손실되고, 반올림으로 오차가 생기는 오류가 발생한다. 부동 소수점 오류를 해결하기 위한 방법으로 - toFixed() 사용 - Math 객체의 메서드 사용 - 기타 라이브러리 사용 (Big..

금액 입력 input 구현 기능 리스트 1. 마이너스를 포함한 정수만 입력한다. 2. 입력한 숫자에 천단위 콤마를 찍는다. 3. 숫자들이 입력되면 합계 계산을 한다. 구현 정책 1. input에 포커스 될 때 1.1. input에 0 이 있으면 지운다. 1.2. input에 0 외에 값이 있으면 천단위 마다 있는 콤마를 지운다. 2. input에 포커스가 빠져나올 때 2.1. 마이너스만 있으면 0 으로 세팅 2.2. 천단위 마다 콤마를 넣는다. 3. input이 keyup 될 때 3.1. 마이너스와 숫자를 제외한 문자열이 입력되지 않도록 한다. 3.2. 마이너스가 문자열의 두번째 이후에 있으면 지운다. 3.3. 입력값이 마이너스 부호만 있는 경우를 제외하곤 합계 계산을 한다. See the Pen inp..

Material Symbols, Material Icons 사용 방법 Material Symbols, Material Icons 차이점 https://fonts.google.com/icons 에 들어가면 아이콘의 스타일이 Material Symbols(default) 와 Material Icons으로 나뉘어져 있다. 이 둘 모두 구글의 공식 아이콘 세트이다. Material Icons는 클래식 세트인 반면 Material Symbols는 가변 글꼴 기술을 기반으로 2022년 4월에 도입되었다. Material Symbols 는 세 가지 스타일과 4가지의 조정 가능한 가변 글꼴 축 (채우기, 두께, 등급, 광학 크기)으로 제공된다. 아래는 현재 Material Icons에서 사용할 수 없는 기능이다. va..

noto sans 웹폰트 다운로드 사용 방법 cdn을 걷어내기 위해 웹폰트를 다운로드하여 사용하게 되었다. 아래 글은 그 여정을 돌아보며 특별히 noto sans kr 웹폰트 사용 방법을 정리한 내용이다. noto sans 웹폰트를 어디서 다운로드 받아야 하는지, 어떤 파일타입을 받아야 하는지, css에 폰트 설정을 어떻게 해야 하는지 위 세 가지를 중점으로 살펴 본다. 먼저 웹에서 사용하는 폰트는 압축률이 좋은 woff2 혹은 모든 브라우저에서 지원하고 w3에서 추천하는 woff 타입을 사용해야 한다. 뒤에서 다시 살펴 보겠지만, @font-face src 속성에 적을 때도 woff2 url를 먼저 적고 그 다음 woff url을 적는다. woff2, woff 타입으로 noto sans kr 다운로드 ..

엑셀 다운로드 Blob 이해 https://heropy.blog/2019/02/28/blob/ Blob(블랍) 이해하기 JavaScript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다. 대개 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신 heropy.blog 자바스크립트로 엑셀 다운로드 하는 예제 코드 - JSON 데이터 -> HTML 변환 -> 엑셀 다운로드 - 한글 꺠짐 방지를 위해 utf-8 bom 문자열 "\ufeff"를 Blob 생성시 array 인수에 붙여준다. Download Excel https://codepen.io/dimorin/pen/oNmjNbo Excel Dow..