폼에서 한 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..

업무 중에 해결하기 위해 골머리를 앓았던 일을 회고하고자 합니다. 먼저 어떤 이슈였냐면 모바일기기에서 PC URL 접속 시 모바일 URL로 보내주고 있는데, 삼성 브라우저에서 모바일 URL로 리다이렉팅 되었을 때 뷰포트가 깨지는 현상이 있었습니다. 문제 해결과정 1. 삼성 브라우저 조사 삼성 브라우저에서만 발생했기 때문에 별도의 설정이 필요한지 찾아보았습니다. 이 과정에서 찾은 결과는 삼성 브라우저와 크롬 브라우저는 개발자가 설정한 확대 방지 옵션을 무시할 수 있는 기능이 있는데 삼성에서는 기본값으로 설정되어있고 크롬에서는 선택 값으로 설정이 되어 있었습니다. 삼성 브라우저에서도 해당 옵션을 끄면 이슈가 재현되지 않았지만 코드로 브라우저의 해당 기능을 끄거나 할 수 있는 방법을 찾지 못했고 작성 된 코드..

사이드 프로젝트를 위한 프레임워크 및 필요 라이브러리 설치 과정입니다. 기존에는 react/ts + redux saga + node.js를 사용하여 작업을 했지만 사이드 프로젝트에서 새로운것들을 공부해보기 위해 해보지 않았던 프레임워크와 라이브러리를 이용해보기로 했습니다. 1. Nextjs 2. Recoil 3. TypeScript 4. styled component 5. antd 6. jest 7. firebase 처음 사용해보는것들은 nextjs, recoil, jest, firebase입니다. 전부다 사용해볼수 있을지 둑은둑은....... next js는 서버사이드 렌더링이.... 어쩌고는 여기저기 많으니 해당 프레임워크,라이브러리 세팅 과정만 정리합니다. 1. npx create-next-app ..

Do not pass children as props. Instead, nest children between the opening and closing tags react/no-children-prop 옛날 코드를 가지고 오던중에 해당 에러를 만났다. 기존 코드는 위와같이 Children props를 태그안에 보내는 형식이였는데 self closing 형태로 되어 있었다. 이 부분이 문제가 되었고 해당 코드를 end tag 형태로 수정하여 에러를 잡았다.

React에서는 useRef를 이용해 특정 DOM을 선택할 수 있습니다. useRef에 대해서는.... 검색하면 많은 자료가 나오니 패스합니다. input에 기본 값을 주고 포커스 되었을 때 커서를 가장 뒤로 보내주기 위해 useRef를 사용하였고, 그 과정을 소개하고자 합니다. 먼저 antd의 input 태그를 사용하였으며, focus 안에 있는 cursor 객체는 antd에서만 되는듯 했다. 일반 input태그에서는 확인해보지 못했습니다.. 만약 일반 input에서 저게 안된다면 useRef.current로 console.log 찍어 보시면 해당 input의 value를 받아 올 수 있습니 다. 그 value의 length값을 가지고 useRef.current 안에 있는 selectionStart ,..