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

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

next + firebase 조합으로 채팅창을 작업하던중에 , 새로운 메세지를 입력할 때 마다 가장 아래로 스크롤을 보내는 기능이 필요했다. useRef를 이용해 DOM에 접근해서 scrollIntoView()를 이용해 입력때 마다 아래로 이동하게 하려고 했는데.. 아무리해도 작동을 하지 않았다. 처음 내가 작성했던 코드는 아래와 같다. (스타일,구조 완성된 코드아님 주의) { messageList?.docs.map((e, i) => { const data = e.data() const date = data.createdAt?.seconds ? formatDate(new Date(data?.createdAt.seconds * 1000)) : null return ( {data.userName} {date..

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