search

AllRightJunyoung / blog-project

Next.js를 사용하여 개인블로그 만들기
https://www.physicaljun.blog/
2 stars 0 forks source link

TOC 컴포넌트 문제점 고치기 #18

Closed AllRightJunyoung closed 1 year ago

AllRightJunyoung commented 1 year ago

현재 Toc 컴포넌트는 Markdown컴포넌트에 의존적이다.

Markdown 컴포넌트가 먼저 렌더링이 되어야지만 Toc컴포넌트에서 오류가 발생하지않는다 (useEffect에서 첫렌더링시에 Markdown의 태그를 사용하는소스코드가 작성되어있기때문에)

dynamic Import를 통해 번들 사이즈를 절반으로 줄였지만 Toc컴포넌트가 Markdown 컴포넌트보다 먼저 렌더링이 되려는 현상이 발생하여 useEffect내에서 Markdown컴포넌트의 document 객체를 읽지 못하게 된다.

AllRightJunyoung commented 1 year ago
  1. dynamic Import시에 SSR 옵션을 true로 변경
  2. PostDetailSection 컴포넌트에서 Prop Drilling으로 HeadingElement를 보내서 Toc컴포넌트에서 사용하도록 하였다.
AllRightJunyoung commented 1 year ago

여전히 에러가 발생한다..

ReactMarkdown 번들 사이즈 만 작아지고 dynamic import를 하지 않아도 Post Detail 페이지의 로딩문제가 없으므로 dynamic import를 제거