Next.js4 전역 에러 바운더리와 지역 에러 바운더리 (feat.Sentry) API 에러 발생시 먼저 지역 Error Boundary인 API 에러 바운더리에 에러가 전달된다.API 에러 바운더리가 에러를 처리하면 해당 에러 Sentry로 전달 → 전역 에러 바운더리는 관여하지 않음API 에러 바운더리가 에러를 처리하지 않고 throw하면 → 전역 에러 바운더리가 캐치지역 에러 바운더리가 throw한 에러는 전역 에러 바운더리가 캐치하게 되고 해당 에러를 Sentry로 전달한다. 2024. 10. 22. Next.js에서의 GSAP 사용 1. DOM 요소일때단일 요소일 경우 useRef를 사용import React, { useRef } from 'react';import { gsap } from 'gsap';import { useGSAP } from '@gsap/react';const AnimatedComponent = () => { // ref 생성 const boxRef = useRef(null); useGSAP(() => { // ref가 가리키는 요소에 애니메이션 적용 gsap.from(boxRef.current, { opacity: 0, y: 50, duration: 1, ease: "power3.out" }); // useGSAP이 자동으로 cleanup을 처리하므로 .. 2024. 10. 22. revalidatePath(); revalidatePath()는 Next.js에서 제공하는 캐시 관련 함수입니다. 해당 함수에 넘겨진 페이지의 캐시를 재검증하여 페이지의 변경된 부분만 새로고침 없이 업데이트합니다. Next.js에서는 서버 컴포넌트 페이지와 클라이언트 컴포넌트 페이지가 있습니다. 클라이언트 페이지에서는 useState를 이용해 변경된 상태를 페이지에 바로바로 재렌더링할 수 있지만, 서버 컴포넌트인 SSR과 SSG는 초기에 한번 렌더링되고 난 후 재렌더링이 되지않습니다. 이때 서버 컴포넌트에 새로고침 없이 변경된 부분을 적용해야할때(새로운 컨텐츠를 추가한 뒤, 서버 컴포넌트 페이지에서 모든 컨텐츠들을 다시 로드 해야할때) revalidatePath()가 사용됩니다. 서버 컴포넌트는 클라이언트 컴포넌트에서 사용하는 useS.. 2024. 3. 4. Image 컴포넌트를 이용한 이미지 최적화 기본 html인 요소인 와 다르게 지연 로드(Lazy Load)가 됨. 웹페이지 접속시 로드되는게 아니라 화면에 보여질 때 해당 이미지 로드 가능.srcset속성을 자동으로 생성해주어 뷰포트와 접속기기에 따라 알맞은 이미지를 제공해줌.사용자의 브라우저에 가장 알맞은 이미지 포맷으로 변환하여 이미지를 제공해줌. (이미지 원본은 .png이지만 크롬으로 접속시 .webp로 변환하여 제공) 주의해야할 점은 을 사용했을때는 의 src 속성에 logoImg.src를 넣어 주었지만, Next.js의 를 사용할때는 src 속성에 logoImg.src가 아닌 이미지 요소 전체인 logoImg를 넣어줘야 width, height를 설정하지 않아도 되게 된다는 것이다. 왜냐하면 기본적으로 Next.js의 컴포넌트는 과다한.. 2024. 2. 26. 이전 1 다음
