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

브라우저에 있는 뒤로 가기를 실행했을 때 정말 해당 페이지를 떠날 것인지 Confirm 모달을 통해 True일 때만 페이지를 벗어날 수 있게 해야했다. 과거에도 이런 비슷한 작업을 한 적이 있고 제어할 수 없다 라는 결론이 나왔었는데 .. 기억의 오류였다. 과거 경험한것은 브라우저 종료를 제어할 수 있는가에 대한 것이었다. 먼저 React에서는 react router dom의 useHistory의 객체를 통해 해당 액션이 push인지 pop인지를 구분하고 컨트롤 할 수 있다. 하지만 내가 사용하는 react router dom의 버전은 V6 버전이였고, history객체는 사라지고 navigate로 대체되었다. navigate에서는 해당 기능이 없었고 결국 다른 방법을 사용해야했다. const handl..

CRA 없이 Webpack을 설정하여 작업 진행 중에 이미지를 import 해야 할 일이 생겼는데, 이미지 import를 하기 위해서 별도의 웹팩 설정이 필요했다. Webpack 4버전에서는 file-loader를 이용했지만 Webpack 5 버전 부터는 새로운 모듈이 추가되어 로더 없이 진행 할 수 있었다. 웹팩5 assets modules 설정 방법을 찾아봐도 file-loader를 이용한 방법이 대부분.. 또 빌드를 했을 때 이미지의 폴더구조가 동일해야 했는데 이 조건을 맞추기 위해 어떻게 해야하는지 넘무 어려웠다. 먼저 나의 assets 폴더 구조는 아래와 같았다. src / assets / images / 이미지 파일 아래 코드는 웹팩의 다른 설정부분들을 제외한 assets 모듈 설정만 남겨놓은..