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

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..

엑셀 다운로드 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..

SVG 애니메이션 만들기 1. SVG 제작 1.1. 직접 만들기 (Figma 에서 만드는 것을 추천) 1.2. SVG 자료 가져와서 커스터마이징 하기 https://storyset.com Storyset | Customize, animate and download illustration for free Choose your own style! Tell your story with the help of our 'friends' Editable color: choose the hue that best suits the needs of your project Customize! There are a lot of different backgrounds and layers to pick from Animated ..

TOAST UI DateRangePicker 날짜 초기화 날짜 범위 선택 라이브러리 중 디자인이 이쁘고 사용성이 좋은 TOAST UI DateRangePicker가 있다. 특별히 선택된 날짜를 초기화 하는 기능을 구현할 때, 공식 document 에 나온 예제나 API 설명만으로는 기능 구현에 어려움이 있었는데, 얼마간 삽질 후 얻은 '초기화' 방법을 여기에 소개한다. close ~ close 선택된 날짜 초기화 방법을 간략히 얘기하자면, 1. default 상태에선 초기화 버튼이 보이지 않다가 2. 날짜가 입력되면 초기화 버튼이 보인다. - change:start, change:end 이벤트 일어나면 getStartDate(), getEndDate() 를 통해 날짜가 입력됐는지 파악 3. 초기화 버튼을..

SPA에서 History API 이해 주소 내역은 하나의 목록이다. 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것이다. 따라서, 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 된다. 목록에 주소를 추가하기 위한 메소드(history.pushState(). history.replaceState())가 HTML5에서 생겼다. 예제를 만들고 테스트하며 목록에 주소를 추가하는 메소드 history.pushState(), historyreplaceState()를 비교하자. 아래 예제를 book 폴더 아래에 만든다. pushState replaceState ①'pushState' 버튼을 클릭하면, 페이지가 새로 갱신되지 않지만 주소만 바뀌고, 뒤로가기 버튼이 활성화된다. 주소 목록에 새로운 주소가 추가된다...