the node before which the new node is to be inserted is not a child of this node 에러를 해결해 보자

어느날 외국 유저가 CS 채널에 문의를 남겼는데
특정 페이지에서만 항상 the node before which the new node is to be inserted is not a child of this node 오류가 발생한다는 것이였습니다.

처음에는 재현이 어려워 정확한 원인을 파악하기가 쉽지 않았습니다. 하지만 다양한 테스트 케이스를 시도해본 결과, 해당 에러는 브라우저 자동 번역 기능이 활성화된 상태에서 해당 페이지로 접근했을 때 발생한다는 사실을 발견했습니다.

현재 회사 플랫폼은 웹과 앱(웹뷰)로 구성되어 있으며 외국 유저는 모두 웹으로만 접근 가능합니다. 아직 다국어를 지원하지 않아 해당 외국유저는 한글을 그대로 보거나 브라우저 자동번역을 사용해야 하지요.

정확한 원인을 파악하기 위해 문제가 되는 페이지의 컴포넌트들을 하나 하나 주석처리 하면서 분석한 결과 문제가 되는 코드는 아래와 같았습니다

<span>{productValue} 개</span>

이 코드는 React에서 다음과 같이 해석됩니다.

1. productValue는 숫자 등의 동적 값
2. "개"는 정적인 문자열

따라서 React는 두개의 텍스트 노드로 분리해서 렌더링을하죠

<span>
  #text: "3"
  #text: " 개"
</span>

하지만 브라우저 자동 번역 기능은 이 구조를 그대로 유지하지 않습니다. 예를 들어 "3 개"를 "3 pcs"로 번역할 경우, 두 개의 텍스트 노드를 하나의 번역된 문자열로 통합하거나 DOM 구조를 변경하게 됩니다.

이로 인해 React가 이후 업데이트 과정에서 노드를 특정 위치에 삽입하려 할 때, 기존의 참조 노드가 이미 DOM에서 분리되었거나 위치가 달라진 상태가 되어버려 DOMException이 발생하게 되는거죠

해결 방법은 간단합니다. 두 개로 나눠진 텍스트 노드를 React가 하나의 노드로 처리하게 만드는거죠

<span>{`${productValue} 개`}</span>

이렇게 작성하면 React는 전체 문자열을 하나의 텍스트 노드로 처리하고, 브라우저 자동 번역 역시 이 텍스트를 한 번에 번역하므로 DOM 구조의 변경 없이 안정적으로 동작하게 됩니다.

사실 그동안 자동번역을 많이 사용했지만 이로 인해 발생할 수 있는 문제점은 생각하지 않았습니다. 이번 이슈 덕분에 브라우저가 자동번역을 어떻게 처리하는지 얕게나 봐 알 수 있어서 도움이 많이 되었습니다.