Mutation Observer로 동적으로 로드되는 콘텐츠 번역하기

새롭게 load 되는 element 를 Mutation Observer로 번역 하기

---

번역 버튼을 만들고 나니 문제가있었다. 지금 개발중인 사이트는 pagination 을 1,2,3 숫자로 하는것이 아니라 스크롤이 일정 부분 내려가면 새롭게 request 를 보내고 불러오는 방식이다.

따라서 버튼을 누르고 나서 로드되는 translate-target은 다시 번역이 되지 않는다는 것이다.

새롭게 load 되는 element 들을 확인하고 그 element 를 번역해야 한다. 이때 사용 할 수 있는 것이 바로 Mutation Observer 였다.

Mutation Observer

---

const observer = new MutationObserver((mutationList) => {
	for(let mutation of mutationList) {
		translateMutation(mutation);
	}
})

그럼 이제 새롭게 로드가 되는 element 가 있을 때마다 위의 코드가 실행이 된다! 그럼 이제 새롭게 로드되는것 중에 translate-target 이 있는지를 확인한다!

function translateMutation(mutation) {
	for (let node of mutation.addedNodes) {
		$(node).find(".translate-target").each(funation() {
			translateByNode(this);
		})
	}
}

그리고 번역을 시켜주면 된다! 이제 번역 버튼을 한번 누르면 그 페이지 에서는 새롭게 로드되는 것이든 뭐든 translate-target 이 붙었다면 모두 번역을 할 수 있게되어 사용자 입장에서 굉장히 편해졌다!