728x90 분류 전체보기66 React/Javascript 부드러운 스크롤 이동 적용 부드러운 스크롤 적용 방법 behavior: "smooth" 속성을 scroll 이벤트와 scroll 메서드와 같이 사용하며 부드러운 스크롤 이동을 적용해볼 수 있다. 본 포스팅은 Nextjs13 환경에서 작성되었다. scroll 메서드 scroll() , scrollTo() scroll(x,y) || scroll(options), scrollTo(x,y) || scrollTo(options) 와 같이 사용할 수 있다. 사실상 두 메서드는 동일하게 작동한다. xy 좌표를 통해서도 사용 가능하며 options를 적용한다면 아래와 같이 사용할 수 있다. window.scroll({ top: 0, left: 0, behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동 }.. 2023. 3. 25. React 함수형 컴포넌트와 Class형 컴포넌트 생명주기 React state와 LifeCycle 함수형 컴포넌트와 class형 컴포넌트의 LifeCycle이 어떻게 되는지 간단하게 비교해 보는 글이다. 클래스형 컴포넌트와 생명주기 메서드 1. Mount(컴포넌트가 처음 실행될 때) - state, context, defalutProps 저장 - componentWillMount - 안전하지 않은 접근 - render - componentDidMount - DOM 접근 가능 2. Props Update(프롭스가 업데이트될때) - componentWillReceiveProps - 사용 종료 - shouldComponentUpdate - componentWillUpdate - 사용 종료 - render - componentDidUpdate - DOM 접근 가능 3.. 2023. 3. 23. TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_7__.default) is not a function TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_7__.default) is not a function 에러 해결 방법 나의 경우 SSR 데이터를 contextAPI를 통해 패치하려 했으나, 정상적으로 받아올 지 못할때 발생한 오류였다. 로컬 실행 종료 후 재실행하니 정상적으로 데이터를 받아올 수 있었다. 다소 허탈한 해결방안이었지만, SSR을 다루는 페이지의 데이터가 정상적으로 받아와지지 않는 경우, 코드 작성 후 프로그램을 재실행 해보자. 참조 : https://github.com/vercel/next.js/issues/18090 context value is undefined on server with Webpack 5 · Issue #18090 · vercel.. 2023. 3. 18. Nextjs Link와 useRouter의 차이 Link / useRouter 사용법 // Link import Link from "next/link"; export const compo1 = () => { return ( some element ) } // useRouter import { useRouter } from "next/router"; export const compo2 = () => { const router = useRouter() const routeHandler = () => { router.push(url) } return ( some element ) } Nextjs에서 페이지를 전환하기 위해 사용하는 방법으로, Link를 이용하거나 useRouter를 이용해 router.push()와 같이 사용하여 전환해줄 수 있는데, 비슷해.. 2023. 3. 18. 이전 1 2 3 4 5 6 7 ··· 17 다음 728x90
