/movies/[id]/error.tsx

'use client'

export default function Error() {
    return <h1>lol something broke...</h1>
}

Next.js 에러 처리 및 안정적인 애플리케이션 구현

1. 에러 처리의 필요성

• 안정성 확보: 특정 페이지나 컴포넌트에서 에러가 발생하더라도 전체 애플리케이션이 중단되지 않도록 함.
• 사용자 경험 향상: 사용자에게 친절한 에러 메시지를 제공하여 불편함을 최소화함.

2. 에러 시뮬레이션

• 에러 발생 방법: MovieVideos 컴포넌트의 getVideos 함수에 throw new Error()를 추가하여 의도적으로 에러를 발생시킴.
• 결과 확인: 영화를 클릭하면 로딩 후 에러가 발생하여 애플리케이션이 고장나는 것을 확인함.

3. 에러 처리의 문제점

• 전체 애플리케이션 중단: 에러가 발생하면 전체 애플리케이션이 작동을 멈추어 사용자가 아무것도 볼 수 없게 됨.
• 개발 모드의 한계: 개발 모드에서는 에러 메시지가 상세하게 표시되지만, 실제 사용자에게는 적절한 에러 처리가 필요함.

4. 에러 처리 해결 방안

• 에러 컴포넌트 생성: 각 페이지 디렉토리에 error.tsx 파일을 생성하여 해당 페이지 또는 자식 컴포넌트에서 발생하는 에러를 처리함.
  • 파일 명명 규칙: 반드시 error.tsx로 명명해야 하며, 해당 페이지 파일과 동일한 디렉토리에 위치시킴.
  • 에러 메시지 설정: 사용자에게 표시할 간단한 에러 메시지를 작성함 (예: "Something went wrong...").

5. 에러 컴포넌트 구현

• 컴포넌트 정의: error.tsx 파일 내에 ErrorOMG!와 같은 컴포넌트를 정의하고, 에러 발생 시 반환할 UI를 설정함.
• 클라이언트 사이드 훅 사용: 에러 컴포넌트에는 use client를 추가하여 클라이언트 사이드에서 동작하도록 설정함.

6. 에러 처리의 효과

• 부분적 에러 처리: 특정 페이지나 컴포넌트에서 에러가 발생해도 다른 페이지나 컴포넌트는 정상적으로 작동함.
• 사용자 피드백 제공: 에러 발생 시 사용자에게 친절한 메시지를 제공하여 불필요한 혼란을 방지함.