폼에서 한 Input에서 데이터가 넘어오질 않아 확인해달라는 요청이 들어왔다. 확인을 해보니 문제는 type이 number인 input에서 한글이 입력되었을때 빈 값을 리턴하는것이였다. 먼저 정규표현식으로 입력값을 숫자만 남기고 제거하는 방법을 사용하려고 했는데, 아무리 해도 undefined값이 리턴되었다. e.target.value를 확인한 결과 한글이 입력되는순간 빈값으로 변경되었고 정규표현식을 사용하려해도 사용할수 없는 상황이였다. Type을 text로 설정해 정규표현식으로 숫자만 남기는식으로 하고 싶었지만 모바일에서 숫자 키패드가 나와야 하는 상황이라 text를 사용할수 없었고, 이벤트 객체 안에 사용할만한 다른놈이 있나 콘솔을 찍어봤다. 흔히 사용하는 target.value와 currentTa..

웹 워커를 사용하는 환경에 놓여 이에 대하여 알아보았습니다. 사용방법에 초점을 맞춰 정리했습니다. 😊 자바스크립트는 싱글 스레드입니다. 데이터 처리 시간이 길게 소요되는 작업이 실행되면 해당 연산이 마무리되기 전까지 다른 이벤트를 실행하면 동작하지 않습니다. 이때 유저 입장에서는 불편함을 느낄 수 있는데 WebWorker를 이용해 백그라운드 스레드로 해당 이슈를 개선할 수 있습니다. 또한 웹 워커에서는 DOM 컨트롤을 직접적으로 할 수 없기 때문에 결과를 전달받아 사용해야 합니다. 다른 예제들에 해당 기능을 지원하는지 확인하는 코드가 있어 확인해봤는데 잘 지원되는 것 같다. 개발 중인 서비스의 지원 브라우저를 확인하고 작업하면 좋을 듯합니다! 사용 환경 1. React 17.0.2 2. vite 2.72..

ES2021에서 추가된 기능들 String.prototype.replaceAll Promise.any WeakRef Logical assignment operators Numeric separators ES12버전은 2021년 6월에 출시될 예정입니다. stage-0 부터 stage-4까지 단계를 거쳐 채택되는데 아래 기능들은 stage-4에 채택된 기능들이며 Google Chrome V8 엔진에 적용되어 바로 사용 할 수 있습니다. 그러나 아직 최종적으로 브라우저 업데이트가 된것이 아니기 때문에 코드에 적용 하면 곤란해집니다 ! 4 단계 목록은 tc39에서 확인 할 수 있습니다. 1. replaceAll (String.prototype.replaceAll) 기존에 문자열을 변경하기 위해서는 replac..