브라우저의 번역 기능을 사용하면 가끔 서버 기능이 오동작 하는 이유

현상)

미리 준비된 data 리스트를 불러와 -> 원하는 일부 data 선택 -> 서버로 전송 -> 서버는 선택된 data 를 DB에 저장 -> 필요 시점에 저장한 data 를 불러와 -> 사용

위와 같은 순서로 동작하는 기능이 있는데 마지막 '사용' 단계에서 Error 가 발생함.

원인 파악 과정)

DB 에 저장된 data 의 모양새를 보니 다른 data 들과 양식이 다른 것을 확인
-> data 가 어느 시점에서 잘못 생성되었는지 확인하기 위해 동작의 역순으로 디버깅
  -> 'data 선택' 단계에서 선택된 data 가 이상한 모양으로 변수에 담기고 있다는 것을 console 출력으로 확인

원인은 바로 웹 브라우저의 내장 번역 기능을 사용하면서 html code 가 변형되었기 때문.
더 정확히는 번역을 위해 웹 브라우저가 생성해낸 html tag 가 선택된 data 를 감싸게 됨. 추가된 html tag 는 고스란히 server 로 전달 및 DB 에 저장되고 후에 Error 를 발생함.

해결 방법)

다음과 같이 DOMParser 를 사용하여 html code 로부터 text 값만 추출하는 방식을 사용

const parser = new DOMParser()  
for (let el of dataList) {  
    try {  
        // 브라우저 번역 사용 시 el 의 텍스트가 HTML Tag 로 wrapping 되는 문제 해결       
        const parsedData = parser.parseFromString(el.innerHTML, 'text/html')  
        result.push(parsedData.body.textContent)  
    } catch(error){  
        console.error('Error parsing HTML:', error);  
    }  
}

html 에서 text 만 추출하는 방법으로는 DOMParser 와 임시 DOM 요소 라는 2가지 방식이 존재.
그 중 표준화되어 다양한 브라우저에서 일관되게 동작 하고, 보안이 더 좋은 DOMParser 를 사용.(동작 속도는 DOMParser 보다 임시 DOM 요소가 더 빠름)

위 Code 는 다음의 효과들을 볼 수 있음.

1. DOMParser 객체를 재사용하여 메모리 낭비 방지
2. 일회성 Document 객체 사용으로 메모리 누수 방지
3. HTML 파싱 중 발생할 수 있는 예외 상황 처리

남아있는 의문)

웹 브라우저의 번역 기능은 대부분의 개발사가 제시하는 공식적인 방법이 아닐텐데 굳이 번역된 결과까지 개발사가 책임을 가져야 할까?

한편으로는

사용자의 접근성, 사용 편의성을 위해 개선해야 할 부분처럼 느껴지기도 함.

어떻게 바라봐고 결정해야 할까?

상사의 답변)

개발사의 역할 범위 밖이기 때문에 처리하지 않음.
-> (추가적으로 생각해봐야할 사항) 그렇다면 개발사의 적절한 역할 범위는 어디까지일까?