react-toastify2 ReferenceError: document is not defined (feat. Next.js + lottie) 프로젝트 잘 진행하다가 dev실행했을 때 갑자기 오류가 났다.... 팀원이 lottie를 적용한 toastify를 수정 후 그 PR이 develop 브랜치에 머지 후에 갑자기 아래와 같은 오류가 발생했다.. 보니 lottie가 문제. document is not defined 오류는 Next.js의 서버 측 렌더링(SSR) 환경에서 클라이언트 전용 코드가 실행될 때 발생한다. Lottie 애니메이션을 사용할 때 이 오류가 발생하는 이유는 Lottie 라이브러리가 DOM 요소에 접근하려고 하기 때문이다.해결하기 위해서는 클라이언트 측에서만 Lottie 애니메이션을 렌더링하도록 설정해야 한다.해결 방법) Lottie 컴포넌트 클라이언트 전용으로 설정하기// Lottie 컴포넌트를 클라이언트에서만 렌더링하도록.. 2024. 8. 14. Toast 공통 컴포넌트 만들기 (feat.react-toastify) react-toastify로 토스트 구현하기공통컴포넌트로 만들기 (성공, 실패, 에러, 멘트 프롭으로 받기)https://fkhadra.github.io/react-toastify/icons Icons | React-ToastifyBuilt-in iconsfkhadra.github.io error)react-toastify의 타입스크립트 사용 시, position 속성이 string 타입으로 정의되어 있어서 발생하는 오류다. position 속성은 ToastPosition 타입으로 설정해야 한다.import React from 'react';import { ToastContainer, ToastPosition, toast } from 'react-toastify';import 'react-toastify.. 2024. 8. 8. 이전 1 다음 반응형
