안녕하세요! 가을입니다.
이번에 간단한 토이 프로젝트를 진행하면서 있었던 일을 기록하고 싶어서 남깁니당
아이디어
Velog를 처음 쓰는 초보자로써, 다음과 같은 생각이 들었습니다.
왜 글자의 색을 바꾸거나, 글자의 배경색을 바꾸기 위한 기능이 없는가?
현재 velog에서 글자 색을 바꾸거나, 글자의 배경색을 바꾸기 위해서는 아래와 같이 입력해야 합니다.
<span style='background-color: #ffdce0; color: red;'>안녕하세요</span>-> 결과 : 안녕하세요
불편~
이번에 경신스(경제신문스크랩)을 진행하면서,
계속 빨간색과 파란색으로 칠해야하는데 일일이 <span>을 작성하는게 귀찮았다..ㅋㅋ
velog의 깃허브에 요청하자니, 너무 오래 걸릴것 같고..
그래서 내가 생각한 대안은 바로
"구글 확장 프로그램으로 velog용 하이라이터 만들기"
였다.
진행
- 우선 구글 확장 프로그램을 만드는 방법에 대해 공부했다.
- 공식페이지 : 맞춤 Chrome 앱 및 확장 프로그램 만들기 및 게시하기
https://support.google.com/chrome/a/answer/2714278?hl=ko - 대충 확인해 보니, 간단한 javascript와 html, css로 구성되어 있었다.
- 공식페이지 : 맞춤 Chrome 앱 및 확장 프로그램 만들기 및 게시하기
- 구현 방향
- 마크다운에 글을 쓰기
- 원하는 부분에 마우스로 블록처리
- 확장프로그램 클릭해서 원하는 글자 색, 배경 색 선택
- 마우스로 블록처리 된 곳 앞 뒤로
<span>태그 붙어서 나오기!
issue 발생
간단하게 확장프로그램을 로컬에서 띄우는 것 까지는 성공했다.
UI는 너무 못생겼지만, 우선 기능이 중요하니까..
- 왼쪽에 '블록처리'된 곳에 변하지 않는 모습..🥲
이를 해결하기 위해 gpt랑 열심히 토론한 결과..
issue 해결 시도 및 결과
아래는 내가 시도했던 방법과 결과들이다.
✅ 방법 1: range.insertNode()를 사용해 DOM 조작
- 내용: 선택된 텍스트 앞뒤로 HTML 태그()를 직접 삽입.
- 결과: 콘솔 로그에는 HTML 태그가 정상적으로 표시되었지만, Velog 글쓰기 페이지에서는 적용되지 않음.
- 문제: React의 가상 DOM과 충돌하여 Velog 에디터가 변경 사항을 감지하지 못함.
✅ 방법 2: React 이벤트 트리거
- 내용: HTML 태그 삽입 후, input 및 change 이벤트를 트리거하여 React가 변경 사항을 감지하도록 시도.
- 결과: 콘솔에서는 이벤트 트리거가 성공했다고 표시되었으나, Velog 에디터에 반영되지 않음.
- 문제: React의 내부 상태가 제대로 업데이트되지 않음.
✅ 방법 3: CodeMirror 인스턴스에 직접 접근
- 내용: Velog 에디터가 사용하는 CodeMirror 라이브러리에 접근하여 텍스트를 수정.
- 결과: .cm-content 요소를 찾지 못해 실패.
- 문제: Velog 에디터의 DOM 구조가 복잡하여 직접적인 접근이 어려움.
✅ 방법 4: Shadow DOM 접근
- 내용: Velog 글쓰기 페이지에서 textarea의 Shadow DOM에 접근하여 텍스트 삽입 시도.
- 결과: ShadowRoot를 찾을 수 없음 오류 발생.
- 문제: Velog 에디터는 Shadow DOM을 사용하지 않음.
✅ 방법 5: MutationObserver 사용
- 내용: MutationObserver를 사용하여 Velog 에디터가 동적으로 렌더링되는 시점을 탐지하고 텍스트 삽입 시도.
- 결과: MutationObserver로 DOM 변경을 감지했으나, Velog 에디터가 변경 사항을 무시함.
- 문제: CodeMirror 인스턴스를 찾을 수 없었고, React 상태가 제대로 업데이트되지 않음.
✅ 방법 6: Markdown 상태 직접 조작
- 내용: .CodeMirror textarea에 접근하여 Markdown 텍스트를 수정.
- 결과: 콘솔에는 텍스트가 수정되었으나, Velog 에디터에는 반영되지 않음.
- 문제: Velog 에디터가 내부 상태를 다시 렌더링하면서 수정 사항을 덮어씀.
✅ 방법 7: HTML 엔티티 코드 변환 후 삽입
- 내용: HTML 태그를 엔티티 코드로 변환하여 삽입.
- 결과: 콘솔 로그에는 정상적으로 변환된 HTML 태그가 출력되었으나, Velog 글쓰기 페이지에는 적용되지 않음.
- 문제: Velog 에디터가 HTML 태그를 Markdown 문법으로 처리하지 않음.
🔴 요약: 모든 방법 실패
| 시도한 방법 | 결과 | 문제 |
|---|---|---|
range.insertNode() 사용 | 실패 | React 가상 DOM과 충돌 |
| React 이벤트 트리거 | 실패 | React 상태 업데이트 불가 |
| CodeMirror 인스턴스 접근 | 실패 | .cm-content를 찾을 수 없음 |
| Shadow DOM 접근 | 실패 | ShadowRoot가 없음 |
| MutationObserver 사용 | 실패 | Velog 에디터가 변경 사항 무시 |
| Markdown 상태 직접 조작 | 실패 | 에디터 내부 상태 덮어쓰기 발생 |
| HTML 엔티티 코드 변환 후 삽입 | 실패 | HTML 태그를 엔티티로 변환 |
결론
결국 해결하지 못했다!
으아아
12시에 착수하여 새벽 4시 30분에 겨우 멈췄다...😭😭😭
우선은 해당프로젝트는 킵해놓고, 다음에 시간나면 다시 가동하는걸로...ㅠㅠ
안녕하세요. 2년차 머신러닝 엔지니어입니다.