마크다운 에디터 라이브러리인 toast-ui/react-editor 사용도중 아래와 같은 에러를 마주침

Server Error

ReferenceError: self is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

문제 원인

• 외부 페이지에서 탐색

  1. 사용자가 다른 사이트에 있고 페이지 링크를 클릭
  2. 페이지에 오류가 표시

요청이 서버로 직접 이동했고 Next.js가 페이지 window가 존재하지 않을 때 미리 렌더링하기로 결정했기 때문에 오류가 발생

페이지 새로고침

1. next/link사용자가 구성 요소 를 사용하는 내부 링크를 클릭
2. 페이지에 오류가 발생하지 않고 정상적으로 로드
3. 사용자가 페이지를 새로 고침
4. 페이지에 오류가 표시

첫 번째 탐색은 클라이언트에서 발생하지만 새로 고침은 서버에 직접 요청하여 오류를 트리거

dynamic import는 모듈을 빌드 타임이 아닌 런타임에 불러오도록 한다. 이를 통해 번들 파일을 분리하고 퍼포먼스 향상을 기대할 수 있다.

해결방법

• 기존코드

import React from 'react';
import styled from 'styled-components';
import ViewerBox from '../components/Write/ViewerBox';
import EditorBox from '../components/Write/EditorBox'

const Write = () => {
  return (
    <Styled.Wrap>
      <div>Write</div>
      <EditorBox />
      <ViewerBox />
    </Styled.Wrap>
  );
};

const Styled = {
  Wrap: styled.div`
    margin: 0 auto;
    margin-top: 50px;
  `,
};
export default Write;

• 수정코드

import React from 'react';
import styled from 'styled-components';
import dynamic from 'next/dynamic';

const EditorBox = dynamic(() => import('../components/Write/EditorBox'), {
  ssr: false,
});

 const ViewerBox = dynamic(() => import('../components/Write/ViewerBox'), {
	  ssr: false,
 });

const Write = () => {
  return (
    <Styled.Wrap>
      <div>Write</div>
      <EditorBox />
      <ViewerBox />
    </Styled.Wrap>
  );
};

const Styled = {
  Wrap: styled.div`
    margin: 0 auto;
    margin-top: 50px;
  `,
};
export default Write;

Next.js 내장 모듈인 dynamic을 사용하여 동적으로 컴포넌트를 렌더링함