Next.js의 화나는 에러 : /_error: /404, /500

React 기반의 SPA 프레임 워크, Next.js는 장점도 많지만 블랙박스가 많다. 나같은 초짜는 그 속내를 알기가 어렵고 리액트를 제대로 배우지 않았거나 websocket의 개념을 정확히 모른다면 쉽게 접근하기 어렵다.

오류메시지

보통은 JSX array에서 key가 없거나 하는 단순한 문제부터 pages 폴더에 component를 넣거나 하는 구성 오류에서 build가 안되는 문제를 경험하는 편인데, 오늘은 당최 종잡을 수 없는 에러가 떠버려서 삽질을 많이 했다.

해결시도1 : 404.jsx 파일 만들기

/404와 /500을 렌더링하는 과정에서 오류가 생겼다는 것이다. 하지만 pages폴더에 404.jsx와 500.jsx파일이 없다. 그래서 stackoverflow를 뒤져보니 404.jsx를 만들어 주라고 한다.

만들어주니 이렇게 에러가 변했다. 404는 렌더링 과정에서 오류가 생겼고, 500은 오류가 떴는데 그걸 렌더링 할 페이지가 없다는 것 같았다. 그럼 500.jsx도 만들어주면? /_error : 만 사라지지 별다른 변화는 없다.

해결시도2 : _error.jsx 파일 만들기

모든 에러코드에 대해 렌더링되는 파일을 만들어준다. 앞서 떴던 오류메시지를 바탕으로 stackoverflow를 뒤져보니 이런 답변이 있어서 파일을 만들고 다시 build를 해보았다.

대략 이런 코드를 작성해주면 되는데,

function Error(props) {  
   const { err } = props;  
   return (
      <div>{err.message}</div>
   )
}

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

export default Error

이번엔 빌드는 된다. 근데 문제는 모든 페이지에서 오류가 떠버린다. 문제는 무슨 오류인지 알 수가 없다. 나는 고인물이 아니니까..

해결법

사실 문제는 client-side에 있지 않다. JSX에 대한 이해가 필요한 것인데, JSX는 HTMLelement가 아닌 Object기반이다. 즉 딕셔너리이다. 그래서 Object의 prototype함수를 함부로 선언하거나 수정하면 안된다.

Object.prototype.deepMerge = function (b) {
    const merge = (a, b) => {
        return Object.entries(b).reduce((o, [k, v]) => {
            o[k] = v && typeof v === 'object'
                ? merge(o[k] = o[k] || (Array.isArray(v) ? [] : {}), v)
                : v;
            return o;
        }, a);
    }
    return [{}, this, b].reduce(merge);
}

문제는 내가 두 딕셔너리의 deep-merge를 위해 추가한 코드였다. node-express 기반의 시스템이었으면 문제가 없었겠지만, React나 Next를 사용하면 Object의 prototype함수를 선언하면 안되는 것 같다.

npm i -s deepmerge

그래서 이 문제는 deepmerge 라이브러리를 통해 해결했다. 라이브러리 쓰는 걸 싫어하는 편이라 곧 내가 구현할 생각이다.