Next.js에서 에러 핸들링의 중요성

Next.js는 최근 웹 개발에서 많이 사용되는 프레임워크 중 하나입니다. 특히, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 다양한 웹 애플리케이션을 효율적으로 개발할 수 있습니다.

하지만, 이러한 기능을 제대로 활용하기 위해서는 에러 핸들링이 매우 중요합니다. 왜냐하면 에러 핸들링이 제대로 되지 않으면 사용자 경험이 크게 저하될 수 있기 때문입니다.

에러 핸들링은 단순히 에러 메시지를 출력하는 것 이상으로, 에러가 발생했을 때 어떻게 처리할지에 대한 전략을 포함합니다. 예를 들어, 사용자에게 친절한 에러 메시지를 제공하거나, 에러가 발생한 페이지를 리다이렉트하는 등의 방법이 있습니다.

이번 글에서는 Next.js에서 에러 핸들링을 어떻게 구현할 수 있는지, 그리고 에러 바운더리를 활용하여 에러를 효과적으로 관리하는 방법에 대해 알아보겠습니다.

특히, 에러 바운더리는 React에서 제공하는 기능으로, 컴포넌트 트리 내에서 발생한 에러를 잡아내고, 이를 처리할 수 있는 방법을 제공합니다. 이를 통해 사용자에게 더 나은 경험을 제공할 수 있습니다.

Next.js에서 에러 핸들링 구현하기

Next.js에서 에러 핸들링을 구현하는 방법은 여러 가지가 있습니다. 가장 기본적인 방법은 getInitialProps나 getServerSideProps에서 에러를 처리하는 것입니다.

예를 들어, getServerSideProps에서 에러가 발생했을 때, 이를 catch 블록에서 처리할 수 있습니다. 아래는 그 예제입니다:

export async function getServerSideProps(context) {
    try {
        const res = await fetch('https://api.example.com/data');
        const data = await res.json();
        return { props: { data } };
    } catch (error) {
        return { props: { error: '데이터를 불러오는 중 에러가 발생했습니다.' } };
    }
}

왜냐하면 이렇게 하면 서버 사이드에서 발생한 에러를 클라이언트로 전달할 수 있기 때문입니다.

또한, Next.js는 _error.js 파일을 통해 전역 에러 페이지를 설정할 수 있습니다. 이 파일을 사용하면 모든 페이지에서 발생하는 에러를 한 곳에서 처리할 수 있습니다.

아래는 _error.js 파일의 예제입니다:

function Error({ statusCode }) {
    return (
        

            {statusCode
                ? `서버에서 ${statusCode} 에러가 발생했습니다.`
                : '클라이언트에서 에러가 발생했습니다.'}
        
    );
}

Error.getInitialProps = ({ res, err }) => {
    const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
    return { statusCode };
};

export default Error;

이렇게 하면 서버와 클라이언트에서 발생하는 에러를 모두 처리할 수 있습니다.

에러 바운더리란 무엇인가?

에러 바운더리는 React에서 제공하는 기능으로, 컴포넌트 트리 내에서 발생한 에러를 잡아내고, 이를 처리할 수 있는 방법을 제공합니다. 에러 바운더리를 사용하면 특정 컴포넌트에서 발생한 에러가 전체 애플리케이션을 중단시키지 않도록 할 수 있습니다.

에러 바운더리를 구현하기 위해서는 React.Component를 상속받아 새로운 클래스를 생성하고, componentDidCatch 메서드를 오버라이드해야 합니다. 아래는 그 예제입니다:

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        console.error('ErrorBoundary caught an error', error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return 
Something went wrong.
;
        }

        return this.props.children;
    }
}

왜냐하면 이렇게 하면 특정 컴포넌트에서 발생한 에러를 잡아내고, 이를 처리할 수 있기 때문입니다.

이제 이 에러 바운더리를 사용하여 컴포넌트를 감싸면, 해당 컴포넌트에서 발생하는 에러를 처리할 수 있습니다. 예를 들어:

이렇게 하면 MyComponent에서 발생하는 에러를 ErrorBoundary가 처리하게 됩니다.

에러 바운더리는 특히 대규모 애플리케이션에서 유용합니다. 왜냐하면 특정 컴포넌트에서 발생한 에러가 전체 애플리케이션을 중단시키지 않도록 할 수 있기 때문입니다.

Axios 인터셉터를 이용한 에러 처리

Axios는 HTTP 요청을 쉽게 처리할 수 있는 라이브러리로, 많은 개발자들이 사용하고 있습니다. Axios는 인터셉터를 제공하여 요청이나 응답을 가로채고, 이를 처리할 수 있는 기능을 제공합니다.

Axios 인터셉터를 사용하면, 모든 요청이나 응답에 대해 공통된 에러 처리를 할 수 있습니다. 예를 들어, 모든 요청에 대해 토큰을 추가하거나, 모든 응답에 대해 에러를 처리할 수 있습니다.

아래는 Axios 인터셉터를 사용하여 에러를 처리하는 예제입니다:

import axios from 'axios';

axios.interceptors.response.use(
    response => response,
    error => {
        if (error.response.status === 401) {
            // 인증 에러 처리
            alert('인증 에러가 발생했습니다. 다시 로그인해주세요.');
        }
        return Promise.reject(error);
    }
);

왜냐하면 이렇게 하면 모든 응답에 대해 공통된 에러 처리를 할 수 있기 때문입니다.

또한, Axios 인터셉터를 사용하면 특정 요청에 대해 커스텀 에러 처리를 할 수도 있습니다. 예를 들어, 특정 API 요청에 대해 에러가 발생했을 때, 사용자에게 모달을 띄우는 등의 처리를 할 수 있습니다.

아래는 특정 요청에 대해 커스텀 에러 처리를 하는 예제입니다:

axios.get('/api/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        if (error.response.status === 404) {
            // 404 에러 처리
            alert('데이터를 찾을 수 없습니다.');
        }
    });

이렇게 하면 특정 요청에 대해 커스텀 에러 처리를 할 수 있습니다.

에러 핸들링의 중요성과 면접 준비

에러 핸들링은 단순히 개발 과정에서만 중요한 것이 아닙니다. 면접에서도 중요한 요소로 작용할 수 있습니다. 왜냐하면 에러 핸들링은 개발자의 문제 해결 능력을 보여줄 수 있기 때문입니다.

면접에서 에러 핸들링에 대한 질문이 나올 수 있으며, 이를 잘 대답할 수 있다면 큰 가산점을 받을 수 있습니다. 예를 들어, 에러 바운더리나 Axios 인터셉터를 사용한 경험을 설명할 수 있다면, 면접관에게 좋은 인상을 줄 수 있습니다.

또한, 실제 프로젝트에서 에러 핸들링을 어떻게 구현했는지에 대한 사례를 준비해두는 것도 좋습니다. 예를 들어, 특정 프로젝트에서 발생한 에러를 어떻게 처리했는지, 그리고 이를 통해 어떤 문제를 해결했는지에 대해 설명할 수 있습니다.

아래는 면접에서 자주 나올 수 있는 에러 핸들링 관련 질문들입니다:

• 에러 바운더리를 사용해본 경험이 있나요?
• Axios 인터셉터를 사용하여 에러를 처리한 경험이 있나요?
• 프로젝트에서 발생한 에러를 어떻게 처리했나요?

이러한 질문들에 대해 미리 준비해두면, 면접에서 좋은 결과를 얻을 수 있을 것입니다.

결론

이번 글에서는 Next.js에서 에러 핸들링을 어떻게 구현할 수 있는지, 그리고 에러 바운더리와 Axios 인터셉터를 활용하여 에러를 효과적으로 관리하는 방법에 대해 알아보았습니다.

에러 핸들링은 사용자 경험을 향상시키기 위해 매우 중요한 요소입니다. 왜냐하면 에러가 발생했을 때 이를 효과적으로 처리하지 않으면, 사용자에게 큰 불편을 줄 수 있기 때문입니다.

Next.js에서는 getServerSideProps와 _error.js 파일을 사용하여 에러를 처리할 수 있으며, 에러 바운더리를 사용하여 특정 컴포넌트에서 발생하는 에러를 잡아낼 수 있습니다.

또한, Axios 인터셉터를 사용하면 모든 요청이나 응답에 대해 공통된 에러 처리를 할 수 있으며, 특정 요청에 대해 커스텀 에러 처리를 할 수도 있습니다.

에러 핸들링은 면접에서도 중요한 요소로 작용할 수 있으므로, 이를 잘 준비해두면 좋은 결과를 얻을 수 있을 것입니다. 앞으로도 에러 핸들링에 대해 꾸준히 공부하고, 실제 프로젝트에서 적용해보시길 바랍니다.