Frontend/Next.js3 [ Next.js ] TypeError: Cannot set properties of undefined (setting 'nodeToRestore) 해결방법 알아보기 📍 TypeError: Cannot set properties of undefined (setting 'nodeToRestore) 해결방법 알아보기 Next.js에서 특정 컴포넌트를 호출하면 다음 에러가 뜨면서 정상적으로 렌더링이 되지 않는 이슈를 발견했다. 해당 컴포넌트는 adobe/react-spectrum의 react-aria/focus 패키지를 참조하고 있었다. 여러 가지 검색해 보다 development 단계에서 잠재적인 warning이나 bug를 찾도록 도와주는 react StrictMode가 원인인 것을 발견하고 next.config.js에서 reactStrictMode을 false로 변경했더니 작동이 잘 되었다. 혹은 React18을 17로 다운그레이드해도 정상 작동된다는 comment도 .. 2023. 4. 5. [ Next.js ] next/router 사용시 무한 렌더링 이슈 해결하기 📍 next/router 사용 시 무한 렌더링 이슈 해결하기 Next.js로 특정 페이지에 접속하면 무한 새로고침 되는 이슈를 발견했다. 이슈를 트래킹해보니 원인은 next/router - Router.replace 때문이었는데, 클라이언트 사이드에서 Router.replace를 사용한 이유는 필터에 조건을 넣고 검색 버튼을 클릭하면 해당 필터 값을 쿼리에 추가하여 다른 사람에게 링크를 공유할 때 필터를 두 번 조작하지 않도록 하기 위함이었다. 그래서 Router.replace와 state를 잃지 않고 pathname과 query 값을 업데이트 할 수 있는 옵션인 shallow Routing: true를 추가했으나 무한 렌더링(새로고침) 되는 이슈가 생겼다. 왜 이런 현상이 발생하는지 알아보기 위해 구글.. 2022. 10. 25. [ Next.js ] Rewrites와 Redirects 알아보기 📍 Rewrites와 Redirects 알아보기 로컬에서 Next.js로 작업할 때 한 개 프로젝트가 아니라 두 개 프로젝트를 동시에 실행해야 하는 경우가 종종 있다. 예를 들면 로그인을 담당하는 A프로젝트(port: 3001)에서 본인인증을 담당하는 B프로젝트(port: 3000)를 실행하는 경우가 그런 경우다. 이럴 때 A에서 B프로젝트로 넘어가려면 http://localhost:3000/verifications를 작성하고 다시 B에서 A프로젝트로 넘어올 때는 http://localhost:3001/auth-web을 작성하고 AWS를 통해 배포 할 때는 path만 남겨두고, 로컬에서 테스트 할 때는 다시 호스트와 포트를 붙이고.. 이렇게 수동적이고 번거로운 작업을 지속하다간 다른 작업을 하지 못할 것.. 2022. 10. 11. 이전 1 다음
