코딩이야기/트러블슈팅7 [React] scrollTo 스크롤 이벤트 오류 (찔끔찔끔 올라가는 버그) 홈페이지를 만들면서 클릭하면 최상단으로 올라가는 버튼을 만들었습니다. 123const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); };Colored by Color Scriptercs 문제 상황엄청나게 간단한 코드인데 원인 모를 버그가 생깁니다.버튼을 누르면 찔끔(?) 올라갔다가 멈추는 현상이 발생합니다.왜 그런걸까 아무리 생각해봐도 답이 안나오는 상황에 구글링을 열심히 하여 해결방법을 찾았습니다. 12345678910const scrollToTop = () => { const scrollStep = -Math.floor(window.scrollY / 15); const scrollInterval = se.. 2024. 6. 11. [React] 뒤로가기 막는 방법 (feat.모달창) 문제 상황모달을 열고 닫은 뒤 뒤로가기 버튼을 누르면 이전 URL로 넘어 가면서 모달창이 다시 열리는 현상이 발생했습니다. 이 현상을 해결하기 위해 useEffect를 사용하여 뒤로가기를 누를때 동작을 정의해주는 함수를 만들어 주었습니다.홈페이지 전체에서 뒤로가기를 막아야 되기 때문에 App.js에 추가해 주었습니다. 1234567891011function App() { useEffect(() => { const preventGoBack = () => { window.history.go(1); console.log("prevent go back!"); }; window.history.pushState(null, "", window.location.pathname);.. 2024. 6. 11. [Next.js] build할 때 checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>() 오류 기록 문제상황next.js 프로젝트 빌드 과정에서 빌드가 안되는 오류가 발생하였습니다. 해결과정아무리 구글링을 해도 오류에 대한 원인이 분명하게 나오지 않아서 github의 next.js에 Discussions 부분에 동일한 문제가 있나 살펴보았습니다.빌드 시 이런 오류가 뜨면 app의 page중에 같은 이름으로 된 파일이 있는지 확인 해야 됩니다.이 오류가 뜬 이유가 components의 layout.tsx와 app의 layout.tsx가 똑같은 이름으로 export 되어 충돌이 일어나서 생긴 오류였습니다.components의 layout을 layout-bar로 이름을 변경하니 오류가 사라졌습니다.참고 : NextFont gives a type error on Build mode · vercel/nex.. 2024. 4. 18. 이전 1 2 다음
