EasyMDE + Alpine.js 환경에서 발생한 ‘타이밍 버그’ 해결기 — 숨겨진 DOM과 초기화 충돌

프론트엔드 개발 과정에서 마주하는 버그는 크게 두 가지다. 하나는 논리적 오류나 오타 같은 ‘코드의 문제’, 다른 하나는 바로 ‘타이밍의 문제’다.

전자는 디버깅이 명확하다. 코드를 수정하면 해결된다. 하지만 후자는 차원이 다르다. 코드는 틀린 곳이 없는데 동작하지 않는다. 이번 글은 Django 기반 서비스에서 EasyMDE와 Alpine.js를 연동하며 겪은, 프론트엔드 개발의 난제인 타이밍 버그 추적기다.

"원인은 코드가 아니라, 실행 시점이었다."

💥 증상: 텍스트는 보이나 제어가 불가능하다

Commandbox 광고

Django 템플릿 위에서 Markdown 에디터인 EasyMDE와 DOM 제어를 위한 Alpine.js를 함께 사용 중이었다. 특히 "임시 저장된 초안 불러오기" 기능을 구현하던 중 치명적인 문제가 발생했다.

서버에서 전달받은 raw_markdown 데이터는 정상적으로 에디터에 로드되었다. 하지만 그 직후 에디터가 얼어붙었다.

  • 커서 이동 불가: 에디터 내부를 클릭해도 커서가 생기지 않음.
  • 입력 불가: 키보드 이벤트가 전혀 먹히지 않음.
  • UI 깨짐: 에디터 상단에 의문의 공백 발생.
  • 콘솔 에러: 클릭 시 다음과 같은 치명적 에러 발생.
Uncaught TypeError: can't access property "map", r is undefined
Error: Incorrect contents fetched, please reload.

이 에러는 EasyMDE의 코어인 CodeMirror가 DOM과의 동기화를 잃었을 때 발생한다. 즉, 라이브러리가 제어하려는 DOM 요소가 예상과 다른 상태라는 뜻이다.

🔍 가설과 검증

가설 1: 인스턴스 중복 초기화?

EasyMDE는 동일 요소에 대해 두 번 초기화될 경우 내부 상태가 꼬이는 경향이 있다. 로그를 통해 초기화 시점을 확인했다.

[postEditor] Creating new EasyMDE instance
[postEditor] EasyMDE already initialized

중복 방지 로직을 추가했으나 문제는 여전했다. 특히 '신규 작성'시에는 잘 작동하고, '초안 불러오기' 시에만 에러가 발생한다는 점에서 단순 초기화 문제는 아니었다.

가설 2: Textarea 값 주입 방식의 문제?

서버 사이드 렌더링 시 <textarea> 내부에 값을 직접 채워 넣는 방식이 문제일까 의심했으나, 이는 표준적인 사용법이며 EasyMDE는 이를 정상적으로 파싱해야 한다. 이 또한 원인이 아니었다.

🔍 원인 분석: Alpine.js와 EasyMDE의 속도 차이

Commandbox 광고

문제의 핵심은 **DOM 생성과 라이브러리 초기화 사이의 '경쟁(Race Condition)'**이었다.

Alpine.js의 렌더링 프로세스

  1. x-data 초기화 및 JavaScript 객체 생성.
  2. DOM 파싱 및 x-if, x-show, class 바인딩 적용.
  3. 비동기적으로 실제 DOM 업데이트 수행.

EasyMDE의 초기화 조건

  1. new EasyMDE()가 실행되는 순간 타겟 <textarea>가 DOM 트리에 존재해야 함.
  2. 해당 요소의 크기(Width/Height)와 위치가 계산 가능해야 함 (Hidden 상태가 아니어야 함).
  3. 초기화 직후 DOM 구조가 변경되지 않아야 함.

실패한 실행 흐름

내 코드는 다음과 같이 동작하고 있었다.

  1. Alpine: DOM을 구성하고 속성을 변경하는 중.
  2. JS: init() 함수가 실행되어 new EasyMDE() 호출.
  3. EasyMDE: 불완전한 DOM을 기준으로 내부 좌표 계산 완료.
  4. Alpine: 뒤늦게 DOM 렌더링 완료 (속성 변경 등).
  5. EasyMDE: "초기화 시점의 DOM과 현재 DOM이 다르다"고 판단하여 Crash.

⭐ 해결: $nextTick()으로 시점 동기화

해결책은 라이브러리의 초기화 시점을 **"DOM 렌더링이 완전히 끝난 후"**로 미루는 것이었다. Alpine.js는 이를 위해 $nextTick() 매직 메서드를 제공한다.

// 수정된 코드
this.$nextTick(() => {
    this.initEditor();
    this.initDropzone();
    this.loadFromLocalStorage();
});

이 코드는 Alpine에게 다음과 같이 지시한다.

"현재 진행 중인 DOM 업데이트 사이클이 모두 끝나면, 그 다음 틱(Tick)에 이 함수를 실행해."

정상화된 실행 흐름

  1. Alpine이 모든 DOM 조작을 완료.
  2. $nextTick() 콜백 실행.
  3. 완전한 상태의 <textarea> 위에서 EasyMDE 초기화.
  4. 정상 작동.

image

🎯 핵심 요약 및 교훈

이번 디버깅을 통해 프론트엔드 라이브러리 사용 시 반드시 고려해야 할 원칙을 재확인했다.

  1. 타이밍이 전부다: 코드가 논리적으로 맞아도 실행 순서가 틀리면 버그다. 특히 DOM 조작 프레임워크(Alpine, Vue, React)와 외부 UI 라이브러리(Editor, Slider 등)를 함께 쓸 때 주의해야 한다.
  2. 초기화는 렌더링 후에: UI 라이브러리는 반드시 타겟 DOM이 안정화된 상태에서 초기화해야 한다.
  3. NextTick 활용: 프레임워크가 제공하는 렌더링 완료 시그널($nextTick, useEffect, onMounted)을 적극 활용하여 실행 시점을 제어해야 한다.

백엔드가 흐름을 통제하는 영역이라면, 프론트엔드는 수많은 비동기 이벤트와 렌더링 사이클의 조화가 필요한 영역임을 다시 한번 깨닫게 된 경험이었다.