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

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

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

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

-----

## 💥 증상: 텍스트는 보이나 제어가 불가능하다 {#sec-f2d06a47aa6b}

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

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

  * **커서 이동 불가**: 에디터 내부를 클릭해도 커서가 생기지 않음.
  * **입력 불가**: 키보드 이벤트가 전혀 먹히지 않음.
  * **UI 깨짐**: 에디터 상단에 의문의 공백 발생.
  * **콘솔 에러**: 클릭 시 다음과 같은 치명적 에러 발생.

<!-- end list -->

```text
Uncaught TypeError: can't access property "map", r is undefined
Error: Incorrect contents fetched, please reload.
```

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

-----

## 🔍 가설과 검증 {#sec-aa6082ae42f4}

### 가설 1: 인스턴스 중복 초기화? {#sec-890fc3cf12ee}

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

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

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

### 가설 2: Textarea 값 주입 방식의 문제? {#sec-931b00738f5b}

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

-----

## 🔍 원인 분석: [[Alpine.js]]와 EasyMDE의 속도 차이 {#sec-1331eea475fa}

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

### Alpine.js의 렌더링 프로세스 {#sec-a49d70e17225}

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

### EasyMDE의 초기화 조건 {#sec-0c5749697211}

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

### 실패한 실행 흐름 {#sec-a723c99ad1ff}

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

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

-----

## ⭐ 해결: `$nextTick()`으로 시점 동기화 {#sec-2e21a05a2f86}

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

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

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

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

### 정상화된 실행 흐름 {#sec-9344c58ea210}

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

-----

![image](https://blog.mikihands.com/media/editor_temp/6/0ebb0f5c-f4ff-49f3-9ee7-dd0ff8e32d88.png)


## 🎯 핵심 요약 및 교훈 {#sec-33af3a13e018}

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

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

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