velog 글 티스토리 이전, 자동화 코드로 해결!

추출 단계: velog의 GraphQL API를 활용하여 글 본문(마크다운 형식)을 직접 가져옴으로써 데이터 추출의 정확성을 높임.

이미지 처리: velog에서 추출한 이미지를 GitHub 저장소에 업로드하고, jsDelivr CDN을 통해 서빙하여 이미지 링크를 동적으로 생성함. 이는 이미지 호스팅(Image Hosting) 및 서빙(Serving) 문제를 해결하는 과정임.

발행 단계: Playwright를 사용하여 티스토리 에디터를 열고, 제목 입력, 본문 붙여넣기, 마크다운 모드 전환, 이미지 삽입 등의 복잡한 과정을 자동화함. 특히 iframe 기반 텍스트 에디터와 CodeMirror 기반 마크다운 에디터 간의 전환을 정확히 처리하는 것이 중요했음.

CodeMirror 셀렉터 오류: 초기 셀렉터가 두 개의 요소를 가리키는 오류 발생. Playwright Inspector를 활용하여 실제 DOM 구조를 파악하고, iframe 내부의 CodeMirror textarea 요소에 대한 정확한 셀렉터를 찾아 해결함. 이는 UI 요소 식별의 중요성을 보여줌.

네이티브 confirm 다이얼로그: 마크다운 모드 전환 시 발생하는 브라우저 네이티브 confirm 다이얼로그는 일반 DOM 요소가 아니므로, `page.once('dialog', ...)` 핸들러를 사용하여 자동으로 수락(accept) 처리해야 함. 핸들러 부재 시 Playwright는 기본적으로 다이얼로그를 취소하므로 모드 전환이 실패하는 문제 발생. 이 경험은 프레임워크의 기본 동작 방식 이해의 중요성을 강조함.

본문 동기화 오류: `CodeMirror.setValue()`를 사용하면 화면에는 텍스트가 표시되지만, 티스토리의 내부 저장 필드에는 값이 동기화되지 않아 발행 시 본문이 비어있는 문제 발생. 사용자가 직접 타이핑하는 것처럼 에디터에 포커스를 주고 키보드 입력으로 값을 주입하는 방식으로 변경 감지(Change Detection) 메커니즘을 트리거하여 해결함. 이는 UI 상태와 실제 데이터 저장 상태의 분리를 인지하는 것이 중요함을 시사함.

마크다운 미적용: 마크다운 모드 전환 실패로 인해 `#`, `*` 등의 문법이 텍스트 그대로 노출되고, 이미지도 마크다운 문법 없이 텍스트로 보였음. 네이티브 confirm 다이얼로그 처리 후 마크다운 모드가 정상 작동하면서 이 문제가 해결됨.

Private 저장소 접근 제한: jsDelivr와 같은 공개 CDN은 인증되지 않은 접근을 허용하지 않으므로, Private 저장소에 있는 파일에 접근할 수 없어 404 오류가 발생함. GitHub 웹에서는 로그인 상태로 접근했기 때문에 이미지가 보였던 것임.

해결 방안: 이미지 호스팅 용도로 저장소를 Public으로 전환하여 CDN이 이미지 파일에 정상적으로 접근하고 서빙할 수 있도록 함. 이 문제는 서비스 아키텍처 설계 시 외부 리소스 접근 권한 관리의 중요성을 보여줌.

오류 메시지 분석의 중요성: 'resolved to 2 elements', '저장소는 찾았으나 파일 없음'과 같은 오류 메시지가 문제의 원인을 절반 이상 알려주었으며, 이를 통해 빠른 원인 파악 및 해결이 가능했음.

문제의 복합성: 마크다운 미적용, 이미지 노출 오류 등 여러 증상이 실제로는 단일 원인(마크다운 모드 전환 실패)에서 비롯되었음을 파악함. 이는 문제 해결 시 근본 원인을 찾는 것의 중요성을 강조함.

디버깅 도구 활용: Playwright Inspector를 사용하여 실시간 DOM 요소를 직접 선택하는 방식이 요소 검사보다 효율적이었으며, 이를 통해 예상치 못한 DOM 구조를 발견할 수 있었음.

개인 프로젝트 기록 방식: 혼자 진행하는 프로젝트에서 GitHub Issues를 트러블 슈팅 기록 용도로 활용하는 것이 습관화 및 체계적인 기록에 도움이 된다는 점을 발견함.