study/Next.js (4) 썸네일형 리스트형 Next.js - App router Error Handling(오류 처리) error.js 파일 컨벤션은 중첩 라우트에서 발생하는 예상치 못한 런타임 에러를 우아하게 처리할 수 있도록 도와줍니다.자동으로 라우트 세그먼트와 자식 세그먼트를 리액트 에러 바운더리로 감싸줍니다.세분성을 조절하기 위해 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 최적화 된 에러 UI를 생성할 수 있습니다.나머지 기능은 그대로 유지한 채로 에러가 발생한 세그먼트만 분리할 수 있습니다.전체 페이지 로딩을 하지 않고 에러를 핸들링 할 수 있는 기능을 추가할 수 있습니다.error.js 파일을 라우트 세그먼트에 위치하고 리액트 컴포넌트를 export 하면 에러 UI를 생성할 수 있습니다. 공식 문서에서 제공하는 error.js의 기본 예시 코드는 아래와 같습니다.'use client' // 에러 컴포넌.. Next.js 13 - [next-auth][error][CLIENT_FETCH_ERROR] 오류 Next.js 13.3.1 버전으로 개인프로젝트를 진행하던 중 Google OAuth로그인시 문제가 발생하였다. run dev로 실행한 상태에서는 오류가 발생하지 않았는데 실제 환경과 비슷한 환경에서 테스트 해보기위해 build 후 start시켜 next/auth에 설정해둔 signIn 페이지에서 OAuth로그인을 하려고 하니까 아래와 같은 오류가 발생하였다...... [next-auth][error][CLIENT_FETCH_ERROR] https://next-auth.js.org/errors#client_fetch_error fetch failed { error: { message: 'fetch failed', stack: 'TypeError: fetch failed\n' + ' at Object.fe.. Next.js 13 - Warning: Prop `style` did not match. Server 오류 오류 메세지는 아래와 같다. Warning: Prop `style` did not match. Server: "display:inline-block;background-color:red;width:15px;height:15px;margin:2px;border-radius:100%;animation-fill-mode:both;animation:react-spinners-GridLoader-grid 0.6140239847719086s -0.18597601522809143s infinite ease" Client: "display:inline-block;background-color:red;width:15px;height:15px;margin:2px;border-radius:100%;animation-fill.. Next.js 13 - ReferenceError: window is not defined 오류 오류 메세지는 아래와 같다. ReferenceError: window is not defined api 모듈에서 window객체에 있는 함수를 사용하였는데 서버 컴포넌트에서는 당연히 사용할 수 없지만 클라이언트 컴포넌트에서도 오류가 발생하였다. 문제 발생 원인 // window is not defined error export const commonApi = { getUserOs() { const userOs = window.navigator.userAgent.replace(/ /g, '').toLowerCase(); ..... ..... ~ ..... ..... }, }; 위의 getUserOs 함수를 클라이언트 컴포넌트에서 사용하였다. export default function App() { // g.. 이전 1 다음
