"드래그 기반 하이라이팅 시스템 개발 텍스트 선택 영역의 DOM 좌표 추출 및 저장 상세 페이지
"드래그 기반 하이라이팅 시스템 개발 텍스트 선택 영역의 DOM 좌표 추출 및 저장 로직 구현 위치 기반 데이터 매핑으로 페이지 새로고침 시에도 하이라이트 유지"
해설
. DOM 좌표 추출이 가장 까다로웠어요:
Range.getBoundingClientRect()로 선택 영역의 위치를 구하고
startContainer, startOffset, endContainer, endOffset으로 정확한 텍스트 위치를 저장했어요
문제는 DOM 구조가 바뀌면 이 좌표들이 무효가 된다는 거였죠
복원할 때는 저장된 좌표 정보로 다시 Range 객체를 만들어서 동일한 오버레이를 생성하는 방식이었습니다.
이 방식이 비파괴적이라서 안전했어요!
내용에 오류가 있거나 최신 법령·기준과 다른 부분이 보이면 알려주세요. 확인 후 반영하겠습니다.