개인 포트폴리오 사이트 구축을 목적으로 notion을 CMS로 채택하였는데,
관련 라이브러리를 사용하던 도중 next.js 관련 이슈와, 노션의 신규 기능이 반영되어 있지 않은 기능을 구현하여 기여하였습니다.
feat(text): support Link Mention format
fix(code): code hydration error
fix(collection): two collection hydration errors
next.js 하이드레이션 에러 수정
기존 코드 베이스에서 SSR(Server Side Rendering)을 염두하고
isBrowser, isServer 등의 변수로 동적으로 변하는 UI에 대한 처리를 해두었습니다.하지만 빌드 시에 들어가는 기본 골격과 하이드레이션이 될 때의 DOM Tree가 다르다면 하이드레이션 에러를 발생시키고, 해당 컴포넌트 및 자식 컴포넌트들까지 다시 리렌더링 하게 됩니다.
Client Side로 오게 되면
isBrowser, isServer의 값이 달라지기 때문에 속성 값이 달라지고, 따라서 하이드레이션 에러가 발생하던 이슈입니다.하이드레이션 과정까진 동일한 골격을 유지할 수 있도록 조치하였고, 하이드레이션 이후 post-hydration 단계에서 CSR 컴포넌트를 렌더링 하는 과정에서
mount를 인지하고, 그 때부터 동적인 정보를 바탕으로 UI가 변하도록 수정하였습니다.신규 기능 구현 (Link Mention)
비교적 최근에 도입된 Notion의 Link Mention 기능을 제대로 처리하지 못하고 있었습니다.
“
lm” 태그에 대한 처리와, 올바르게 보여질 UI 가 만들어져 있지 않은 상태여서 구현하였습니다.