1. 상황

초안함에서 "보내기"를 누르면 마크다운 초안이 글로 바뀐다. 개발노트는 Lexical 에디터가 읽는 형식으로, 스토리는 HTML로 저장해야 한다. 이 변환을 Next.js(App Router)의 서버 라우트에서 하려고 했다.

그런데 변환 코드를 넣자 빌드가 두 번 연달아 깨졌다.

2. 에러 1 — react-dom/server

스토리용 HTML 변환을 처음에는 React 컴포넌트로 만들고 react-dom/server로 문자열을 뽑으려 했다. 그런데 App Router 빌드에서 react-dom/server를 import하는 것 자체가 에러가 났다. [확인 필요: 정확한 에러 문구는 빌드 로그에서 가져와 붙이기]

해결은 React를 거치지 않는 것이었다. unified로 마크다운을 파싱하고 HTML 문자열로 바로 내보내는 파이프라인으로 바꿨다.

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";

// 단순화한 예. 실제 파일에는 링크 주소 검사가 더 들어간다.
const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(markdown);

const html = String(file);

스토리 본문은 HTML로 저장하고 dangerouslySetInnerHTML로 그리기 때문에, 링크 주소는 javascript: 같은 위험한 값이 들어가지 않도록 걸러 주는 처리도 추가했다.

3. 에러 2 — createContext is not a function

개발노트용 변환은 @lexical/headless로 에디터 없이 마크다운을 Lexical 데이터로 바꾼다. 이번에는 빌드는 통과했는데, 라우트가 실행되자 이런 에러가 났다.

createContext is not a function

원인은 에디터에 등록하려고 import한 노드 하나였다. @lexical/react에서 가져온 HorizontalRuleNode가 내부에서 React의 context를 만든다. 서버 라우트에서 이걸 불러오면 React 쪽 코드가 같이 실행되면서 터진다. 이 노드를 변환용 에디터 구성에서 빼니 해결됐다.

변환용 에디터에는 제목, 인용, 목록, 코드, 링크처럼 서버에서 문제없는 노드만 남겼다.

4. 배운 것

두 에러의 뿌리는 같았다. 서버에서 도는 코드에 React 쪽 코드가 딸려 들어왔다는 것이다. 에러 메시지는 달라도 "이 import가 React에 의존하나?"를 보면 원인을 빨리 찾는다.

[보강: 이 에러를 AI에게 보여줬을 때 어떤 답이 왔는지, 내가 어떻게 원인을 좁혔는지]

정리

• 서버 라우트에서 react-dom/server는 App Router 빌드에서 막힌다. 마크다운→HTML은 unified로 하자.
• @lexical/react의 노드는 React에 기대는 게 있다. 서버 변환용 에디터에서는 빼자.
• "서버에서 도는 코드"의 import는 React 의존성이 없는지 확인하자.

다음 글에서는 변환한 결과가 에디터에서 코드블록까지 제대로 열리는지 확인한 과정을 다뤄보겠다.