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

업무 중에 해결하기 위해 골머리를 앓았던 일을 회고하고자 합니다. 먼저 어떤 이슈였냐면 모바일기기에서 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 형태로 수정하여 에러를 잡았다.