본문 바로가기

프론트엔드111

jquery 확장 메서드 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.. 2024. 7. 6.
한글 입력시 이벤트 중복 호출 해결 방법 한글 입력시 이벤트 중복 호출 해결 방법 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.. 2024. 3. 9.
부동소수점 오류 현상 부동소수점 오류 현상 const a = 0.1; const b = 0.2; console.log(a+b); // 0.30000000000000004 소수점이 있는 실수를 이진수로 표현할 때 이진수로 표현하지 못하는 소수가 발생하여 컴퓨터는 가장 근사치의 값이 저장된다. 고정 소수점 또는 부동 소수점 을 사용해 이를 해결한다. 부동 소수점을 표현하는 방식으로 일반적으로 IEEE에서 표준으로 제안한 방식을 사용한다.( 부호비트(1bit), 지수비트(8bit), 가수비트(23bit) ) 하지만 부동 소수점 계산에는 정밀도가 손실되고, 반올림으로 오차가 생기는 오류가 발생한다. 부동 소수점 오류를 해결하기 위한 방법으로 - toFixed() 사용 - Math 객체의 메서드 사용 - 기타 라이브러리 사용 (Big.. 2024. 3. 8.
3D를 위한 삼각함수 기초 3D를 위한 삼각함수 기초 sinθ = θ에서 직각까지 빙돌아서tanθ  = θ에서 직각까지 바로 간 다음에 뚫린 길로cosθ = 빗변에서 시작해서 θ를 사이에 두고 tanθ = sinθ / cosθ  특수각의 삼각비 30도45도60도sin$$  \frac{ 1 }{2} $$$$  \frac{ \sqrt{2} }{2} $$$$  \frac{ \sqrt{3} }{2} $$cos$$  \frac{ \sqrt{3} }{2} $$$$  \frac{ \sqrt{2} }{2} $$$$  \frac{ 1 }{2} $$tan$$  \frac{1} { \sqrt{3} } $$$$  { 1 } $$$$  { \sqrt{3} } $$ 라디안라디안은 호의 길이로 각도를 나타내는 방법이다.각도를 실수로 표현하기 위해 사용한다... 2024. 2. 17.
Three.js 설치(번들러 없이) Three.js 설치(번들러 없이)Three.js 는 모듈 방식으로 개발하는 것을 권장한다.three.js에서 공식적으로 webpack이나 vite같은 번들러의 이용을 권장하고 있고,  공식 문서도 번들러의 사용을 전제로 작성되어 있다. 아래의 설치 방법은 번들러를 사용하지 않은 방법이다.번들러를 사용하지 않기 때문에 폴더의 경로를 직접 지정해줘야 하는 번거로움이 있다.importmap을 사용하여 그 번거로움을 해결한다.1. npm 명령어 이용하여 설치1.1 node_moduls/three/build 폴더에서 three.module.js 가져오기npm install threeThree.js를 불러오기 위해서는 폴더의 경로를 지정해 주어야 한다. 하지만 Three.js의 다양한 모듈(controls, lo.. 2024. 2. 12.
금액 입력 input 구현 금액 입력 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.. 2023. 12. 29.

티스토리툴바